-
Notifications
You must be signed in to change notification settings - Fork 1
/
Tailwind.html
35 lines (30 loc) · 1.9 KB
/
Tailwind.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="bg-green-500 w-1/2 h-20">Sizing</div>
<h1 class=" text-7xl italic font-semibold">Typography</h1>
<h1 class="text-4xl font-medium">Typography</h1>
<h1 class="text-xl font-thin">Typography</h1>
<p class="font-sans">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem vitae sequi nulla ducimus laborum alias possimus veniam explicabo ex dolorum.</p>
<p class="font-serif">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem vitae sequi nulla ducimus laborum alias possimus veniam explicabo ex dolorum.</p>
<p class="font-mono">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem vitae sequi nulla ducimus laborum alias possimus veniam explicabo ex dolorum.</p>
<!-- Design a Card In Tailwind. -->
<div class="mb-20 text-xs text-center flex flex-col border-solid rounded-md border-black border w-1/2 justify-center m-auto">
<div class="mb-4 tracking-tighter h-8 pt-2 text-white text-center font-bold rounded-t-md bg-blue-600">News you can Trust.</div>
<div class="space-y-1 mb-3">
<h1 class="text-xs font-semibold text-center text-sm">Stay up to date with the Latest!</h1>
<p class="text-xs font-normal text-center text-sm">Subscribe to our newsletter for the latest news straight into your inbox</p>
<input class="rounded-xs bg-gray-200 text-xs text-center text-sm" type="text" placeholder="[email protected]">
<br>
<button class=" rounded-md px-4 text-white bg-blue-600 text-xs text-center text-sm" >Subscrible Now</button>
<p class=" text-xs text-center text-sm" >We value your privacy</p>
</div>
</div>
</body>
</html>