-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
216 lines (201 loc) · 25.6 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
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!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>Pop-Up Tailwindcss</title>
<link rel="icon" href="https://pujayana.com/cv/favicon.ico">
<!-- Import Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Import CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Tailwindcss -->
<style type="text/tailwindcss">
@layer base{
body{
@apply font-inter font-normal text-black;
}
}
</style>
<!-- Tailwindcss -->
<script>
tailwind.config = {
theme: {
fontFamily: {
inter: ['Inter'],
},
extend: {
transitionDuration: {
DEFAULT: '200ms',
},
}
},
}
</script>
</head>
<body>
<!-- Pop-Up 1 -->
<div class="fixed inset-0 collapse z-50 w-full">
<input type="checkbox" id="pop-up-1" class="peer appearance-none collapse opacity-0">
<label for="pop-up-1" class="cursor-pointer px-10 invisible absolute inset-0 w-full flex items-center justify-center overflow-hidden opacity-0 transition-all peer-checked:visible peer-checked:opacity-100 peer-checked:[&>*]:scale-100 z-10"></label>
<div class="absolute bg-slate-800 bg-opacity-60 px-10 inset-0 w-full flex justify-center items-center invisible opacity-0 peer-checked:visible peer-checked:opacity-100 peer-checked:[&>*]:scale-100 transition-all">
<div class="relative z-40 max-h-[calc(100vh-5em)] w-full max-w-screen-lg cursor-auto overflow-y-auto rounded-sm bg-white py-10 px-10 md:px-14 scale-90 transition-all">
<!-- Button close pop-up -->
<label for="pop-up-1" class="group absolute top-5 right-5 cursor-pointer w-auto transition-all">
<svg class="h-4 w-auto group-hover:opacity-50 transition-all" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 45L45 3" stroke="#1E293B" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M45 45L3 3" stroke="#1E293B" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</label>
<div class="w-full">
<!-- Put the content here -->
<h2 class="text-slate-800 text-3xl text-center">Pop-Up 1</h2>
<p class="text-slate-800 text-sm text-justify mt-4 mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet alias nobis dolore, iste beatae adipisci nisi modi magnam illo tenetur. Explicabo voluptates officia ex praesentium dolores nisi doloribus rerum necessitatibus perferendis enim dolorum aliquam tenetur magni sequi dignissimos quam at distinctio accusamus beatae tempore quos, asperiores est quibusdam odio. Asperiores magnam praesentium exercitationem fugit aut dicta assumenda voluptatibus! Repellendus hic quos pariatur animi culpa eligendi eos iste reiciendis consequuntur ipsa soluta facilis quas sapiente ab at dolorem earum explicabo, cumque rerum, necessitatibus non perferendis inventore blanditiis exercitationem? Placeat repellendus ducimus sed pariatur sint praesentium quidem soluta eveniet, maiores non eum.</p>
<p class="text-slate-800 text-sm text-justify mt-4 mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet alias nobis dolore, iste beatae adipisci nisi modi magnam illo tenetur. Explicabo voluptates officia ex praesentium dolores nisi doloribus rerum necessitatibus perferendis enim dolorum aliquam tenetur magni sequi dignissimos quam at distinctio accusamus beatae tempore quos, asperiores est quibusdam odio. Asperiores magnam praesentium exercitationem fugit aut dicta assumenda voluptatibus! Repellendus hic quos pariatur animi culpa eligendi eos iste reiciendis consequuntur ipsa soluta facilis quas sapiente ab at dolorem earum explicabo, cumque rerum, necessitatibus non perferendis inventore blanditiis exercitationem? Placeat repellendus ducimus sed pariatur sint praesentium quidem soluta eveniet, maiores non eum.</p>
</div>
</div>
</div>
</div>
<!-- Pop-Up 2 -->
<div class="fixed inset-0 collapse z-50 w-full">
<input type="checkbox" id="pop-up-2" class="peer appearance-none collapse opacity-0">
<label for="pop-up-2" class="cursor-pointer px-10 invisible absolute inset-0 w-full flex items-center justify-center overflow-hidden opacity-0 transition-all peer-checked:visible peer-checked:opacity-100 peer-checked:[&>*]:scale-100 z-10"></label>
<div class="absolute bg-slate-800 bg-opacity-60 px-10 inset-0 w-full flex justify-center items-center invisible opacity-0 peer-checked:visible peer-checked:opacity-100 peer-checked:[&>*]:scale-100 transition-all">
<div class="relative z-40 max-h-[calc(100vh-5em)] w-full max-w-screen-lg cursor-auto overflow-y-auto rounded-sm bg-white py-10 px-10 md:px-14 scale-90 transition-all">
<!-- Button close pop-up -->
<label for="pop-up-2" class="group absolute top-5 right-5 cursor-pointer w-auto transition-all">
<svg class="h-4 w-auto group-hover:opacity-50 transition-all" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 45L45 3" stroke="#1E293B" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M45 45L3 3" stroke="#1E293B" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</label>
<div class="w-full">
<!-- Put the content here -->
<h2 class="text-slate-800 text-3xl text-center">Pop-Up 2</h2>
<p class="text-slate-800 text-sm text-justify mt-4 mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet alias nobis dolore, iste beatae adipisci nisi modi magnam illo tenetur. Explicabo voluptates officia ex praesentium dolores nisi doloribus rerum necessitatibus perferendis enim dolorum aliquam tenetur magni sequi dignissimos quam at distinctio accusamus beatae tempore quos, asperiores est quibusdam odio. Asperiores magnam praesentium exercitationem fugit aut dicta assumenda voluptatibus! Repellendus hic quos pariatur animi culpa eligendi eos iste reiciendis consequuntur ipsa soluta facilis quas sapiente ab at dolorem earum explicabo, cumque rerum, necessitatibus non perferendis inventore blanditiis exercitationem? Placeat repellendus ducimus sed pariatur sint praesentium quidem soluta eveniet, maiores non eum.</p>
<p class="text-slate-800 text-sm text-justify mt-4 mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet alias nobis dolore, iste beatae adipisci nisi modi magnam illo tenetur. Explicabo voluptates officia ex praesentium dolores nisi doloribus rerum necessitatibus perferendis enim dolorum aliquam tenetur magni sequi dignissimos quam at distinctio accusamus beatae tempore quos, asperiores est quibusdam odio. Asperiores magnam praesentium exercitationem fugit aut dicta assumenda voluptatibus! Repellendus hic quos pariatur animi culpa eligendi eos iste reiciendis consequuntur ipsa soluta facilis quas sapiente ab at dolorem earum explicabo, cumque rerum, necessitatibus non perferendis inventore blanditiis exercitationem? Placeat repellendus ducimus sed pariatur sint praesentium quidem soluta eveniet, maiores non eum.</p>
</div>
</div>
</div>
</div>
<!-- Pop-Up 3 -->
<div class="fixed inset-0 collapse z-50 w-full">
<input type="checkbox" id="pop-up-3" class="peer appearance-none collapse opacity-0">
<label for="pop-up-3" class="cursor-pointer px-10 invisible absolute inset-0 w-full flex items-center justify-center overflow-hidden opacity-0 transition-all peer-checked:visible peer-checked:opacity-100 peer-checked:[&>*]:scale-100 z-10"></label>
<div class="absolute bg-slate-800 bg-opacity-60 px-10 inset-0 w-full flex justify-center items-center invisible opacity-0 peer-checked:visible peer-checked:opacity-100 peer-checked:[&>*]:scale-100 transition-all">
<div class="relative z-40 max-h-[calc(100vh-5em)] w-full max-w-screen-lg cursor-auto overflow-y-auto rounded-sm bg-white py-10 px-10 md:px-14 scale-90 transition-all">
<!-- Button close pop-up -->
<label for="pop-up-3" class="group absolute top-5 right-5 cursor-pointer w-auto transition-all">
<svg class="h-4 w-auto group-hover:opacity-50 transition-all" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 45L45 3" stroke="#1E293B" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M45 45L3 3" stroke="#1E293B" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</label>
<div class="w-full">
<!-- Put the content here -->
<h2 class="text-slate-800 text-3xl text-center">Pop-Up 3</h2>
<p class="text-slate-800 text-sm text-justify mt-4 mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet alias nobis dolore, iste beatae adipisci nisi modi magnam illo tenetur. Explicabo voluptates officia ex praesentium dolores nisi doloribus rerum necessitatibus perferendis enim dolorum aliquam tenetur magni sequi dignissimos quam at distinctio accusamus beatae tempore quos, asperiores est quibusdam odio. Asperiores magnam praesentium exercitationem fugit aut dicta assumenda voluptatibus! Repellendus hic quos pariatur animi culpa eligendi eos iste reiciendis consequuntur ipsa soluta facilis quas sapiente ab at dolorem earum explicabo, cumque rerum, necessitatibus non perferendis inventore blanditiis exercitationem? Placeat repellendus ducimus sed pariatur sint praesentium quidem soluta eveniet, maiores non eum.</p>
<p class="text-slate-800 text-sm text-justify mt-4 mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet alias nobis dolore, iste beatae adipisci nisi modi magnam illo tenetur. Explicabo voluptates officia ex praesentium dolores nisi doloribus rerum necessitatibus perferendis enim dolorum aliquam tenetur magni sequi dignissimos quam at distinctio accusamus beatae tempore quos, asperiores est quibusdam odio. Asperiores magnam praesentium exercitationem fugit aut dicta assumenda voluptatibus! Repellendus hic quos pariatur animi culpa eligendi eos iste reiciendis consequuntur ipsa soluta facilis quas sapiente ab at dolorem earum explicabo, cumque rerum, necessitatibus non perferendis inventore blanditiis exercitationem? Placeat repellendus ducimus sed pariatur sint praesentium quidem soluta eveniet, maiores non eum.</p>
<p class="text-slate-800 text-sm text-justify mt-4 mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet alias nobis dolore, iste beatae adipisci nisi modi magnam illo tenetur. Explicabo voluptates officia ex praesentium dolores nisi doloribus rerum necessitatibus perferendis enim dolorum aliquam tenetur magni sequi dignissimos quam at distinctio accusamus beatae tempore quos, asperiores est quibusdam odio. Asperiores magnam praesentium exercitationem fugit aut dicta assumenda voluptatibus! Repellendus hic quos pariatur animi culpa eligendi eos iste reiciendis consequuntur ipsa soluta facilis quas sapiente ab at dolorem earum explicabo, cumque rerum, necessitatibus non perferendis inventore blanditiis exercitationem? Placeat repellendus ducimus sed pariatur sint praesentium quidem soluta eveniet, maiores non eum.</p>
<p class="text-slate-800 text-sm text-justify mt-4 mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet alias nobis dolore, iste beatae adipisci nisi modi magnam illo tenetur. Explicabo voluptates officia ex praesentium dolores nisi doloribus rerum necessitatibus perferendis enim dolorum aliquam tenetur magni sequi dignissimos quam at distinctio accusamus beatae tempore quos, asperiores est quibusdam odio. Asperiores magnam praesentium exercitationem fugit aut dicta assumenda voluptatibus! Repellendus hic quos pariatur animi culpa eligendi eos iste reiciendis consequuntur ipsa soluta facilis quas sapiente ab at dolorem earum explicabo, cumque rerum, necessitatibus non perferendis inventore blanditiis exercitationem? Placeat repellendus ducimus sed pariatur sint praesentium quidem soluta eveniet, maiores non eum.</p>
</div>
</div>
</div>
</div>
<!-- Pop-Up 4 -->
<div class="fixed inset-0 collapse z-50 w-full">
<input type="checkbox" id="pop-up-4" class="peer appearance-none collapse opacity-0">
<label for="pop-up-4" class="cursor-pointer px-10 invisible absolute inset-0 w-full flex items-center justify-center overflow-hidden opacity-0 transition-all peer-checked:visible peer-checked:opacity-100 peer-checked:[&>*]:scale-100 z-10"></label>
<div class="absolute bg-slate-800 bg-opacity-60 px-10 inset-0 w-full flex justify-center items-center invisible opacity-0 peer-checked:visible peer-checked:opacity-100 peer-checked:[&>*]:scale-100 transition-all">
<div class="relative z-40 max-h-[calc(100vh-5em)] w-full max-w-screen-lg cursor-auto overflow-y-auto rounded-sm bg-white py-10 px-10 md:px-14 scale-90 transition-all">
<!-- Button close pop-up -->
<label for="pop-up-4" class="group absolute top-5 right-5 cursor-pointer w-auto transition-all">
<svg class="h-4 w-auto group-hover:opacity-50 transition-all" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 45L45 3" stroke="#1E293B" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M45 45L3 3" stroke="#1E293B" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</label>
<div class="w-full">
<!-- Put the content here -->
<h2 class="text-slate-800 text-3xl text-center">Pop-Up 4</h2>
<p class="text-slate-800 text-sm text-justify mt-4 mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet alias nobis dolore, iste beatae adipisci nisi modi magnam illo tenetur. Explicabo voluptates officia ex praesentium dolores nisi doloribus rerum necessitatibus perferendis enim dolorum aliquam tenetur magni sequi dignissimos quam at distinctio accusamus beatae tempore quos, asperiores est quibusdam odio. Asperiores magnam praesentium exercitationem fugit aut dicta assumenda voluptatibus! Repellendus hic quos pariatur animi culpa eligendi eos iste reiciendis consequuntur ipsa soluta facilis quas sapiente ab at dolorem earum explicabo, cumque rerum, necessitatibus non perferendis inventore blanditiis exercitationem? Placeat repellendus ducimus sed pariatur sint praesentium quidem soluta eveniet, maiores non eum.</p>
</div>
</div>
</div>
</div>
<!-- Pop-Up 5 -->
<div class="fixed inset-0 collapse z-50 w-full">
<input type="checkbox" id="pop-up-5" class="peer appearance-none collapse opacity-0">
<label for="pop-up-5" class="cursor-pointer px-10 invisible absolute inset-0 w-full flex items-center justify-center overflow-hidden opacity-0 transition-all peer-checked:visible peer-checked:opacity-100 peer-checked:[&>*]:scale-100 z-10"></label>
<div class="absolute bg-slate-800 bg-opacity-60 px-10 inset-0 w-full flex justify-center items-center invisible opacity-0 peer-checked:visible peer-checked:opacity-100 peer-checked:[&>*]:scale-100 transition-all">
<div class="relative z-40 max-h-[calc(100vh-5em)] w-full max-w-screen-lg cursor-auto overflow-y-auto rounded-sm bg-white py-10 px-10 md:px-14 scale-90 transition-all">
<!-- Button close pop-up -->
<label for="pop-up-5" class="group absolute top-5 right-5 cursor-pointer w-auto transition-all">
<svg class="h-4 w-auto group-hover:opacity-50 transition-all" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 45L45 3" stroke="#1E293B" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M45 45L3 3" stroke="#1E293B" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</label>
<div class="w-full">
<!-- Put the content here -->
<h2 class="text-slate-800 text-3xl text-center">Pop-Up 5</h2>
<p class="text-slate-800 text-sm text-justify mt-4 mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet alias nobis dolore, iste beatae adipisci nisi modi magnam illo tenetur. Explicabo voluptates officia ex praesentium dolores nisi doloribus rerum necessitatibus perferendis enim dolorum aliquam tenetur magni sequi dignissimos quam at distinctio accusamus beatae tempore quos, asperiores est quibusdam odio. Asperiores magnam praesentium exercitationem fugit aut dicta assumenda voluptatibus! Repellendus hic quos pariatur animi culpa eligendi eos iste reiciendis consequuntur ipsa soluta facilis quas sapiente ab at dolorem earum explicabo, cumque rerum, necessitatibus non perferendis inventore blanditiis exercitationem? Placeat repellendus ducimus sed pariatur sint praesentium quidem soluta eveniet, maiores non eum.</p>
<p class="text-slate-800 text-sm text-justify mt-4 mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet alias nobis dolore, iste beatae adipisci nisi modi magnam illo tenetur. Explicabo voluptates officia ex praesentium dolores nisi doloribus rerum necessitatibus perferendis enim dolorum aliquam tenetur magni sequi dignissimos quam at distinctio accusamus beatae tempore quos, asperiores est quibusdam odio. Asperiores magnam praesentium exercitationem fugit aut dicta assumenda voluptatibus! Repellendus hic quos pariatur animi culpa eligendi eos iste reiciendis consequuntur ipsa soluta facilis quas sapiente ab at dolorem earum explicabo, cumque rerum, necessitatibus non perferendis inventore blanditiis exercitationem? Placeat repellendus ducimus sed pariatur sint praesentium quidem soluta eveniet, maiores non eum.</p>
</div>
</div>
</div>
</div>
<!-- Pop-Up 6 -->
<div class="fixed inset-0 collapse z-50 w-full">
<input type="checkbox" id="pop-up-6" class="peer appearance-none collapse opacity-0">
<label for="pop-up-6" class="cursor-pointer px-10 invisible absolute inset-0 w-full flex items-center justify-center overflow-hidden opacity-0 transition-all peer-checked:visible peer-checked:opacity-100 peer-checked:[&>*]:scale-100 z-10"></label>
<div class="absolute bg-slate-800 bg-opacity-60 px-10 inset-0 w-full flex justify-center items-center invisible opacity-0 peer-checked:visible peer-checked:opacity-100 peer-checked:[&>*]:scale-100 transition-all">
<div class="relative z-40 max-h-[calc(100vh-5em)] w-full max-w-screen-lg cursor-auto overflow-y-auto rounded-sm bg-white py-10 px-10 md:px-14 scale-90 transition-all">
<!-- Button close pop-up -->
<label for="pop-up-6" class="group absolute top-5 right-5 cursor-pointer w-auto transition-all">
<svg class="h-4 w-auto group-hover:opacity-50 transition-all" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 45L45 3" stroke="#1E293B" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M45 45L3 3" stroke="#1E293B" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</label>
<div class="w-full">
<!-- Put the content here -->
<h2 class="text-slate-800 text-3xl text-center">Pop-Up 6</h2>
<p class="text-slate-800 text-sm text-justify mt-4 mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet alias nobis dolore, iste beatae adipisci nisi modi magnam illo tenetur. Explicabo voluptates officia ex praesentium dolores nisi doloribus rerum necessitatibus perferendis enim dolorum aliquam tenetur magni sequi dignissimos quam at distinctio accusamus beatae tempore quos, asperiores est quibusdam odio. Asperiores magnam praesentium exercitationem fugit aut dicta assumenda voluptatibus! Repellendus hic quos pariatur animi culpa eligendi eos iste reiciendis consequuntur ipsa soluta facilis quas sapiente ab at dolorem earum explicabo, cumque rerum, necessitatibus non perferendis inventore blanditiis exercitationem? Placeat repellendus ducimus sed pariatur sint praesentium quidem soluta eveniet, maiores non eum.</p>
<p class="text-slate-800 text-sm text-justify mt-4 mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet alias nobis dolore, iste beatae adipisci nisi modi magnam illo tenetur. Explicabo voluptates officia ex praesentium dolores nisi doloribus rerum necessitatibus perferendis enim dolorum aliquam tenetur magni sequi dignissimos quam at distinctio accusamus beatae tempore quos, asperiores est quibusdam odio. Asperiores magnam praesentium exercitationem fugit aut dicta assumenda voluptatibus! Repellendus hic quos pariatur animi culpa eligendi eos iste reiciendis consequuntur ipsa soluta facilis quas sapiente ab at dolorem earum explicabo, cumque rerum, necessitatibus non perferendis inventore blanditiis exercitationem? Placeat repellendus ducimus sed pariatur sint praesentium quidem soluta eveniet, maiores non eum.</p>
<p class="text-slate-800 text-sm text-justify mt-4 mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet alias nobis dolore, iste beatae adipisci nisi modi magnam illo tenetur. Explicabo voluptates officia ex praesentium dolores nisi doloribus rerum necessitatibus perferendis enim dolorum aliquam tenetur magni sequi dignissimos quam at distinctio accusamus beatae tempore quos, asperiores est quibusdam odio. Asperiores magnam praesentium exercitationem fugit aut dicta assumenda voluptatibus! Repellendus hic quos pariatur animi culpa eligendi eos iste reiciendis consequuntur ipsa soluta facilis quas sapiente ab at dolorem earum explicabo, cumque rerum, necessitatibus non perferendis inventore blanditiis exercitationem? Placeat repellendus ducimus sed pariatur sint praesentium quidem soluta eveniet, maiores non eum.</p>
</div>
</div>
</div>
</div>
<section class="min-h-screen w-full flex justify-center items-center flex-col py-16">
<div class="w-full max-w-screen-lg px-10">
<h1 class="text-slate-800 text-center text-3xl mb-14">Pop-Up in Tailwindcss</h1>
<div class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="p-16 border border-slate-200 flex justify-center items-center rounded-sm">
<label for="pop-up-1" class="px-8 py-4 rounded-sm bg-blue-500 text-white text-base whitespace-nowrap cursor-pointer hover:bg-opacity-70 transition-all">Pop-Up 1</label>
</div>
<div class="p-16 border border-slate-200 flex justify-center items-center rounded-sm">
<label for="pop-up-2" class="px-8 py-4 rounded-sm bg-blue-500 text-white text-base whitespace-nowrap cursor-pointer hover:bg-opacity-70 transition-all">Pop-Up 2</label>
</div>
<div class="p-16 border border-slate-200 flex justify-center items-center rounded-sm">
<label for="pop-up-3" class="px-8 py-4 rounded-sm bg-blue-500 text-white text-base whitespace-nowrap cursor-pointer hover:bg-opacity-70 transition-all">Pop-Up 3</label>
</div>
<div class="p-16 border border-slate-200 flex justify-center items-center rounded-sm">
<label for="pop-up-4" class="px-8 py-4 rounded-sm bg-blue-500 text-white text-base whitespace-nowrap cursor-pointer hover:bg-opacity-70 transition-all">Pop-Up 4</label>
</div>
<div class="p-16 border border-slate-200 flex justify-center items-center rounded-sm">
<label for="pop-up-5" class="px-8 py-4 rounded-sm bg-blue-500 text-white text-base whitespace-nowrap cursor-pointer hover:bg-opacity-70 transition-all">Pop-Up 5</label>
</div>
<div class="p-16 border border-slate-200 flex justify-center items-center rounded-sm">
<label for="pop-up-6" class="px-8 py-4 rounded-sm bg-blue-500 text-white text-base whitespace-nowrap cursor-pointer hover:bg-opacity-70 transition-all">Pop-Up 6</label>
</div>
</div>
<h2 class="text-slate-800 text-center text-xl mt-14">Created with ♥︎ by <a href="https://pujayana.com" class="hover:text-blue-500 transition-all">Pujayana</a></h2>
</div>
</section>
</body>
</html>