-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.index.html
131 lines (125 loc) · 4.41 KB
/
example.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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width-device-width, initial-scale-1.0" />
<title>Document</title>
<link href="tailwind.css" ref="stylesheet">
</head>
<body>
<!-- NAVBAR COMPONENT -->
<nav class="flex flex-wrap items-center justify-between p-6 bg-gray-800">
<div class="flex items-center flex-shrink-0 mr-6 text-white">
<span class="text-xl font-bold">Anablock</span>
</div>
<div class="flex-grow block w-full sm:flex sm:items-center sm:w-auto">
<div class="text-sm sm:flex-grow">
<a
href="#"
class="block mt-4 mr-4 text-teal-200 sm:inline-block sm:mt-0 hover:text-white"
>
Your Business
</a>
<a
href="#"
class="block mt-4 mr-4 text-teal-200 sm:inline-block sm:mt-0 hover:text-white"
>
Networking
</a>
<a
href="#"
class="block mt-4 text-teal-200 sm:inline-block sm:mt-0 hover:text-white"
>
Blog
</a>
</div>
<div>
<a
href="#"
class="inline-block px-4 py-2 mt-4 text-sm leading-none text-white border border-white rounded hover:border-transparent hover:text-blue-500 hover:bg-white md:mt-0"
>Login</a
>
</div>
</div>
</nav>
<div class="container px-2 mx-auto mt-5">
<!-- BUTTON COMPONENT -->
<button
class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-400"
>
Find Friends
</button>
<button
class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-400"
>
Find Groups
</button>
<!-- ALERT COMPONENT -->
<div
class="relative px-4 py-3 my-5 text-red-700 bg-red-100 border border-red-400 rounded"
role="alert"
>
<strong class="font-bold">Alert!</strong>
<span class="block sm:inline">Please update your password</span>
</div>
</div>
<!-- CARD COMPONENT -->
<div class="flex max-w-sm p-6 mx-auto bg-white rounded-lg shadow-xl">
<div class="flex-shrink-0">
<img src="https://i.ibb.co/vX8pYzZ/logo-only.png" alt="" class="w-12 h-12" />
</div>
<div class="pt-1 ml-6">
<h4 class="text-xl text-gray-900">Traversy Media</h4>
<p class="text-base text-gray-600">You have a new message!</p>
</div>
</div>
<!-- CARD COLUMNS -->
<div class="container px-2 mx-auto mt-5">
<!-- Flex on med screens and up -->
<div class="md:flex">
<div
class="flex-1 px-5 py-5 m-2 text-center text-gray-700 bg-gray-400 rounded"
>
<div class="lg:flex lg:items-center">
<div class="lg:flex-shrink-0">
<img class="rounded-lg lg:w-64" src="https://i.ibb.co/mJJNkTJ/img2.jpg" alt="" />
</div>
<div class="mt-4 lg:mt-0 lg:ml-6">
<div
class="text-sm font-bold tracking-wide text-indigo-600 uppercase"
>
Networking
</div>
<a
href="#"
class="block mt-1 text-lg font-semibold leading-tight text-gray-900 hover:underline"
>Finding connections to help your business grow</a
>
</div>
</div>
</div>
<div
class="flex-1 px-5 py-5 m-2 text-center text-gray-700 bg-gray-400 rounded"
>
<div class="lg:flex lg:items-center">
<div class="lg:flex-shrink-0">
<img class="rounded-lg lg:w-64" src="https://i.ibb.co/w4wGYvQ/img1.jpg
" alt="" />
</div>
<div class="mt-4 lg:mt-0 lg:ml-6">
<div
class="text-sm font-bold tracking-wide text-indigo-600 uppercase"
>
Marketing
</div>
<a
href="#"
class="block mt-1 text-lg font-semibold leading-tight text-gray-900 hover:underline"
>Finding customers for your new business</a
>
</div>
</div>
</div>
</div>
</div>
</body>
</html>