Skip to content

Commit b7623d6

Browse files
nikonstnikonst
committed
Add flex cards
1 parent 572ca5c commit b7623d6

2 files changed

Lines changed: 160 additions & 0 deletions

File tree

‎tailwind/Example1/src/index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<title>Tailwind</title>
78
<link href="./style.css" rel="stylesheet">
89
</head>
10+
911
<body class="bg-blue-400">
1012
<div class="container mx-auto px-2">
1113
<button class="btn bg-blue-500 hover:bg-blue-400 text-white py-2 px-4 rounded">Press</button>
@@ -23,6 +25,44 @@ <h4 class="text-xl text-green-400">A Test Page</h4>
2325
<p class="text-base text-red">A Message</p>
2426
</div>
2527
</div>
28+
<!-- CARD COLUMNS -->
29+
<div class="container mt-5 mx-auto px-2">
30+
<!-- Flex on med screens and up -->
31+
<div class="md:flex">
32+
<div class="flex-1 text-gray-700 text-center bg-gray-100 px-5 py-5 m-2 rounded">
33+
<div class="lg:flex lg:items-center">
34+
<div class="lg:flex-shrink-0">
35+
<img class="rounded-lg lg:w-64" src="https://picsum.photos/id/9/200/300" alt="An Image" />
36+
</div>
37+
<div class="mt-4 lg:mt-0 lg:ml-6">
38+
<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">
39+
JavaScript
40+
</div>
41+
<a href="#"
42+
class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">
43+
27 years of JavaScript!</a>
44+
</div>
45+
</div>
46+
</div>
47+
<div class="flex-1 text-gray-700 text-center bg-gray-100 px-5 py-5 m-2 rounded">
48+
<div class="lg:flex lg:items-center">
49+
<div class="lg:flex-shrink-0">
50+
<img class="rounded-lg lg:w-64" src="https://picsum.photos/id/1/200/300
51+
" alt="An Image" />
52+
</div>
53+
<div class="mt-4 lg:mt-0 lg:ml-6">
54+
<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">
55+
php
56+
</div>
57+
<a href="#"
58+
class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">
59+
Fast, flexible and pragmatic</a>
60+
</div>
61+
</div>
62+
</div>
63+
</div>
64+
</div>
2665

2766
</body>
67+
2868
</html>

‎tailwind/Example1/src/style.css‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -586,6 +586,10 @@ video {
586586
position: relative;
587587
}
588588

589+
.m-2 {
590+
margin: 0.5rem;
591+
}
592+
589593
.mx-auto {
590594
margin-left: auto;
591595
margin-right: auto;
@@ -600,6 +604,18 @@ video {
600604
margin-left: 1.5rem;
601605
}
602606

607+
.mt-1 {
608+
margin-top: 0.25rem;
609+
}
610+
611+
.mt-4 {
612+
margin-top: 1rem;
613+
}
614+
615+
.mt-5 {
616+
margin-top: 1.25rem;
617+
}
618+
603619
.block {
604620
display: block;
605621
}
@@ -644,10 +660,18 @@ video {
644660
max-width: 24rem;
645661
}
646662

663+
.flex-1 {
664+
flex: 1 1 0%;
665+
}
666+
647667
.shrink-0 {
648668
flex-shrink: 0;
649669
}
650670

671+
.grow {
672+
flex-grow: 1;
673+
}
674+
651675
.rounded {
652676
border-radius: 0.25rem;
653677
}
@@ -685,6 +709,16 @@ video {
685709
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
686710
}
687711

712+
.bg-gray-400 {
713+
--tw-bg-opacity: 1;
714+
background-color: rgb(156 163 175 / var(--tw-bg-opacity));
715+
}
716+
717+
.bg-gray-100 {
718+
--tw-bg-opacity: 1;
719+
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
720+
}
721+
688722
.p-6 {
689723
padding: 1.5rem;
690724
}
@@ -709,10 +743,19 @@ video {
709743
padding-right: 1.25rem;
710744
}
711745

746+
.py-5 {
747+
padding-top: 1.25rem;
748+
padding-bottom: 1.25rem;
749+
}
750+
712751
.pt-1 {
713752
padding-top: 0.25rem;
714753
}
715754

755+
.text-center {
756+
text-align: center;
757+
}
758+
716759
.text-xl {
717760
font-size: 1.25rem;
718761
line-height: 1.75rem;
@@ -723,10 +766,36 @@ video {
723766
line-height: 1.5rem;
724767
}
725768

769+
.text-lg {
770+
font-size: 1.125rem;
771+
line-height: 1.75rem;
772+
}
773+
774+
.text-sm {
775+
font-size: 0.875rem;
776+
line-height: 1.25rem;
777+
}
778+
726779
.font-bold {
727780
font-weight: 700;
728781
}
729782

783+
.font-semibold {
784+
font-weight: 600;
785+
}
786+
787+
.uppercase {
788+
text-transform: uppercase;
789+
}
790+
791+
.leading-tight {
792+
line-height: 1.25;
793+
}
794+
795+
.tracking-wide {
796+
letter-spacing: 0.025em;
797+
}
798+
730799
.text-white {
731800
--tw-text-opacity: 1;
732801
color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -742,6 +811,21 @@ video {
742811
color: rgb(74 222 128 / var(--tw-text-opacity));
743812
}
744813

814+
.text-gray-700 {
815+
--tw-text-opacity: 1;
816+
color: rgb(55 65 81 / var(--tw-text-opacity));
817+
}
818+
819+
.text-gray-900 {
820+
--tw-text-opacity: 1;
821+
color: rgb(17 24 39 / var(--tw-text-opacity));
822+
}
823+
824+
.text-indigo-600 {
825+
--tw-text-opacity: 1;
826+
color: rgb(79 70 229 / var(--tw-text-opacity));
827+
}
828+
745829
.shadow-xl {
746830
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
747831
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -757,8 +841,44 @@ video {
757841
background-color: rgb(96 165 250 / var(--tw-bg-opacity));
758842
}
759843

844+
.hover\:underline:hover {
845+
text-decoration-line: underline;
846+
}
847+
760848
@media (min-width: 640px) {
761849
.sm\:inline {
762850
display: inline;
763851
}
852+
}
853+
854+
@media (min-width: 768px) {
855+
.md\:flex {
856+
display: flex;
857+
}
858+
}
859+
860+
@media (min-width: 1024px) {
861+
.lg\:ml-6 {
862+
margin-left: 1.5rem;
863+
}
864+
865+
.lg\:mt-0 {
866+
margin-top: 0px;
867+
}
868+
869+
.lg\:flex {
870+
display: flex;
871+
}
872+
873+
.lg\:w-64 {
874+
width: 16rem;
875+
}
876+
877+
.lg\:flex-shrink-0 {
878+
flex-shrink: 0;
879+
}
880+
881+
.lg\:items-center {
882+
align-items: center;
883+
}
764884
}

0 commit comments

Comments
 (0)