-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
76 lines (76 loc) · 6.03 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Atomic CSS with Sass</title>
<link href="css/app.css" rel="stylesheet">
</head>
<body class="font-sans line-normal mt-12">
<div class="container">
<h2 class="uppercase spacing-wider text-gray-500">Card Example</h2>
<div class="flex flex-wrap justify-center">
<div class="block-70 flex flex-wrap p-8 shadow-lg shadow-2xl:hover rounded-lg transition">
<div class="block-100 block-15@md">
<img class="rounded-full square-16" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User profile image">
</div>
<div class="block-100 block-85@md">
<h3 class="mt-0 mb-4 text-purple-500 uppercase spacing-wide text-xl">Jane Doe</h3>
<p class="line-loose text-gray-600 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus perferendis, ex quisquam et iure repellendus quas nihil provident neque nisi aliquid doloribus nesciunt quibusdam. Enim cupiditate voluptatibus dolorem quam tempore.</p>
<button class="outline-none cursor-pointer px-6 py-3 rounded-full bg-purple-500 text-cyan-200 uppercase spacing-widest text-xs shadow-lg-purple bg-purple-600:hover shadow-xl-purple:hover cursor-pointer">View Profile</button>
</div>
</div>
</div>
</div>
<div class="container">
<h2 class="uppercase spacing-wider text-gray-500">Grid</h2>
<div class="flex flex-wrap">
<div class="p-4 text-center mb-1 block-5 bg-gray-100:odd bg-gray-200:even">5</div>
<div class="p-4 text-center mb-1 block-95 bg-gray-100:odd bg-gray-200:even">95</div>
<div class="p-4 text-center mb-1 block-10 bg-gray-100:odd bg-gray-200:even">10</div>
<div class="p-4 text-center mb-1 block-90 bg-gray-100:odd bg-gray-200:even">90</div>
<div class="p-4 text-center mb-1 block-15 bg-gray-100:odd bg-gray-200:even">15</div>
<div class="p-4 text-center mb-1 block-85 bg-gray-100:odd bg-gray-200:even">85</div>
<div class="p-4 text-center mb-1 block-20 bg-gray-100:odd bg-gray-200:even">20</div>
<div class="p-4 text-center mb-1 block-80 bg-gray-100:odd bg-gray-200:even">80</div>
<div class="p-4 text-center mb-1 block-25 bg-gray-100:odd bg-gray-200:even">25</div>
<div class="p-4 text-center mb-1 block-75 bg-gray-100:odd bg-gray-200:even">75</div>
<div class="p-4 text-center mb-1 block-30 bg-gray-100:odd bg-gray-200:even">30</div>
<div class="p-4 text-center mb-1 block-70 bg-gray-100:odd bg-gray-200:even">70</div>
<div class="p-4 text-center mb-1 block-35 bg-gray-100:odd bg-gray-200:even">35</div>
<div class="p-4 text-center mb-1 block-65 bg-gray-100:odd bg-gray-200:even">65</div>
<div class="p-4 text-center mb-1 block-40 bg-gray-100:odd bg-gray-200:even">40</div>
<div class="p-4 text-center mb-1 block-60 bg-gray-100:odd bg-gray-200:even">60</div>
<div class="p-4 text-center mb-1 block-45 bg-gray-100:odd bg-gray-200:even">45</div>
<div class="p-4 text-center mb-1 block-55 bg-gray-100:odd bg-gray-200:even">55</div>
<div class="p-4 text-center mb-1 block-50 bg-gray-100:odd bg-gray-200:even">50</div>
<div class="p-4 text-center mb-1 block-50 bg-gray-100:odd bg-gray-200:even">50</div>
</div>
</div>
<div class="container mt-10">
<h2 class="uppercase spacing-wider text-gray-500">Offsets</h2>
<div class="flex flex-wrap">
<div class="p-4 offset-95 text-center mb-1 block-5 bg-gray-100:odd bg-gray-200:even">5</div>
<div class="p-4 offset-90 text-center mb-1 block-10 bg-gray-100:odd bg-gray-200:even">10</div>
<div class="p-4 offset-85 text-center mb-1 block-15 bg-gray-100:odd bg-gray-200:even">15</div>
<div class="p-4 offset-80 text-center mb-1 block-20 bg-gray-100:odd bg-gray-200:even">20</div>
<div class="p-4 offset-75 text-center mb-1 block-25 bg-gray-100:odd bg-gray-200:even">25</div>
<div class="p-4 offset-70 text-center mb-1 block-30 bg-gray-100:odd bg-gray-200:even">30</div>
<div class="p-4 offset-65 text-center mb-1 block-35 bg-gray-100:odd bg-gray-200:even">35</div>
<div class="p-4 offset-60 text-center mb-1 block-40 bg-gray-100:odd bg-gray-200:even">40</div>
<div class="p-4 offset-55 text-center mb-1 block-45 bg-gray-100:odd bg-gray-200:even">45</div>
<div class="p-4 offset-50 text-center mb-1 block-50 bg-gray-100:odd bg-gray-200:even">50</div>
<div class="p-4 offset-45 text-center mb-1 block-55 bg-gray-100:odd bg-gray-200:even">55</div>
<div class="p-4 offset-40 text-center mb-1 block-60 bg-gray-100:odd bg-gray-200:even">60</div>
<div class="p-4 offset-35 text-center mb-1 block-65 bg-gray-100:odd bg-gray-200:even">65</div>
<div class="p-4 offset-30 text-center mb-1 block-70 bg-gray-100:odd bg-gray-200:even">70</div>
<div class="p-4 offset-25 text-center mb-1 block-75 bg-gray-100:odd bg-gray-200:even">75</div>
<div class="p-4 offset-20 text-center mb-1 block-80 bg-gray-100:odd bg-gray-200:even">80</div>
<div class="p-4 offset-15 text-center mb-1 block-85 bg-gray-100:odd bg-gray-200:even">85</div>
<div class="p-4 offset-10 text-center mb-1 block-90 bg-gray-100:odd bg-gray-200:even">90</div>
<div class="p-4 offset-5 text-center mb-1 block-95 bg-gray-100:odd bg-gray-200:even">95</div>
</div>
</div>
</body>
</html>