-
Notifications
You must be signed in to change notification settings - Fork 18
/
srisathya-20ita53.html
85 lines (77 loc) · 3.72 KB
/
srisathya-20ita53.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
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../css/tailwind.css" />
<title>Event App</title>
</head>
<body>
<div class="container m-10 p-20">
<div class="text-lg">
My Buttons
<div class="grid grid-cols-1 sm:grid-cols-3 grid-rows-3 gap-4 my-10">
<div>
<a href="#" class="bg-black hover:bg-gray-900 text-white text-center py-2 px-4 rounded-full h-14 w-14 inline-flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
</a>
</div>
<div>
<a href="#" class="bg-red-400 hover:bg-red-700 text-white text-center py-2 px-4 rounded">
Button
</a>
</div>
<div>
<a href="#" class="bg-green-200 hover:bg-gray-1000 border-b-4 border-black hover:border-gray-800 text-black text-center py-2 px-4 rounded">
Button
</a>
</div>
<div>
<a href="#" class="bg-blue-500 hover:bg-gray-900 text-white text-center py-2 px-4 rounded">
Button
</a>
</div>
<div>
<a href="#" class="bg-pink-500 hover:bg-pink-400 border-b-4 border-pink-700 hover:border-pink-500 text-white text-white text-center py-2 px-4 rounded">
Button
</a>
</div>
<div>
<a href="#" class="bg-indigo-500 hover:bg-indigo-700 text-white text-center py-2 px-4 rounded-full">
Button
</a>
</div>
<div>
<a href="#" class="bg-green-200 hover:bg-green-500 hover:text-white text-green-500 text-center py-2 px-4 rounded">
Button
</a>
</div>
<div>
<a href="#"
class="bg-transparent border border-gray-500 text-gray-500 hover:bg-gray-500 hover:text-white text-center py-2 px-4 rounded">
Button
</a>
</div>
<div>
<a href="#" class="bg-yellow-500 hover:bg-yellow-700 text-white py-2 px-4 rounded inline-flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
Button
</a>
</div>
</div>
</div>
<div>
<div class="text-lg my-4">
Reference
</div>
<div>
https://www.ordinarycoders.com/blog/article/7-tailwindcss-buttons
</div>
</div>
</div>
</body>
</html>