-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
63 lines (59 loc) · 2.73 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
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/build/styles.css" />
<title>Tailwind JIT</title>
</head>
<body>
<div class="p-8 text-center">
<h1 class="text-4xl text-blue-600 font-bold">Tailwind JIT Tutorial</h1>
<h2 class="text-2xl text-gray-500 font-semibold">(Just in Time)</h2>
</div>
<div class="p-8 text-center">
<button class="bg-blue-600 text-white p-2 rounded">Click me</button>
<button class="bg-green-600 text-white p-2 rounded">Click me</button>
</div>
<div class="p-8">
<h3 class="first-letter:font-bold first-letter:text-green-500">Todos:</h3>
<ul class="my-4 list-disc marker:text-blue-600">
<li class="marker:text-green-500">Get out of bed</li>
<li class="selection:bg-purple-500">Do some work</li>
<li class="selection:bg-pink-500">Play Mario Kart</li>
</ul>
<p class="first-line:font-semibold">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque provident
nemo culpa esse eum illum minus molestias illo? Rerum, perspiciatis
corrupti. Eveniet accusantium veniam aspernatur magni! Ab tempore quidem
facilis? Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Veritatis expedita porro eum quisquam ut doloremque officia ipsa odio
iure provident.
</p>
</div>
<div class="p-8">
<button class="bg-[#f46225] text-[#fff6ca] p-2 rounded">click me</button>
<p class="text-[24px] mb-4">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium
architecto iste esse. Officia inventore animi, eius excepturi recusandae
rerum similique. Vitae dolorem minima, necessitatibus accusantium magnam
nemo, repellendus et tempora praesentium perferendis possimus totam quam
nam soluta nostrum laudantium vero velit quo iusto? Voluptatibus, amet.
Magnam debitis earum nam provident.
</p>
</div>
<div class="p-8">
<button class="bg-[color:var(--primary)] text-white p-2 rounded">
click me
</button>
<p class="text-[length:var(--leadFont)]">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium
architecto iste esse. Officia inventore animi, eius excepturi recusandae
rerum similique. Vitae dolorem minima, necessitatibus accusantium magnam
nemo, repellendus et tempora praesentium perferendis possimus totam quam
nam soluta nostrum laudantium vero velit quo iusto? Voluptatibus, amet.
Magnam debitis earum nam provident.
</p>
</div>
</body>
</html>