-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
314 lines (305 loc) · 15.5 KB
/
Copy pathindex.html
File metadata and controls
314 lines (305 loc) · 15.5 KB
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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"/>
<title>Document</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<meta name="keywords" content="tailwindcss,tailwindcss tutorial,tailwindcss react,react tailwindcss,tailwinds css,tailwindcss react js,react tailwindcss setup,tialwindcss,tailwindcss react tutorial,react tailwindcss tutorial,complete tailwindcss course,tailwindcss responsive navbar,apprendre à utiliser tailwindcss,tailwindcss classname not working,tialwindcss курс,tialwindcss гайд,tialwindcss для новичков,tialwindcss для начинающих,3 técnicas para interfaces melhores com tailwindcss"/>
<meta name="description" content=""/>
<meta name="author" content="Jems Divin"/>
<meta name="theme-color" content=""/>
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<!-- Load library from the CDN -->
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
</head>
<body>
<div class="alert">
<p>Hello! Welcome you in our website click here for more our projects on github <a href="https://sidsimo.github.io" class="link">click here</a></p>
<i class='bx bx-x' id="close"></i>
</div>
<header>
<nav>
<div class="title">
<a href="https://tailwindcss.com" target="_blank"><img src="images/tailwind-css-logo-24.png" alt=""></a>
<h1>tailwindcss</h1>
</div>
<div class="unordered">
<div>
<ul>
<li><a href="https://tailwindcss.com/docs/installation">Docs</a></li>
<li><a href="https://tailwindui.com/?ref=top">Components</a></li>
<li><a href="https://tailwindcss.com/blog">Blog</a></li>
<li><a href="https://tailwindcss.com/showcase">Showcase</a></li>
</ul>
</div>
<div class="icons">
<img src="images/moon-regular-24.png" alt="" id="img">
<a href="https://github.com/tailwindlabs/tailwindcss" target="_blank" title="github" id="img"><img src="images/github-logo-24.png" alt=""></a>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAH1JREFUSEvtlMEJgEAMBGfrEASxIJvxYwdiQZYjChbhLyLc0+PyuAPBy3vZDZMlovCosD8/CjCzAZgBA0ZJqwevG5GZnUATTDdJfe6AA2iD6S6pyx3wIFqAC5iyI/Js+6Zx36B4QG1REnFAVFsUJ1VbVFsUJfCdZ5c8UkRwAyNvQhkv+YgoAAAAAElFTkSuQmCC" id="points"/>
</div>
</div>
</nav>
</header>
<div id="hidshow">
<i class='bx bx-x' id="x"></i>
<nav>
<ul>
<li><a href="https://tailwindcss.com/docs/installation">Docs</a></li>
<li><a href="https://tailwindui.com/?ref=top">Components</a></li>
<li><a href="https://tailwindcss.com/blog">Blog</a></li>
<li><a href="https://tailwindcss.com/showcase">Showcase</a></li>
</ul>
</nav>
<div class="ico">
<img src="images/moon-regular-24.png" alt="" id="icon">
<a href="https://github.com/tailwindlabs/tailwindcss" target="_blank" title="github" id="icon"><img src="images/github-logo-24.png" alt=""></a>
</div>
</div>
<main id="main">
<div class="container">
<p id="para1">
<!-- Element to contain animated typing -->
Rapidly build modern websites <br>
without ever leaving <span id="element"></span>
</p>
<p id="para2">
A utility-first CSS framework packed with classes like <code>flex, pt-4</code>, <code>text-center</code> and <br>
<code>rotate-90</code> that can be composed to build any design, directly in your markup.
</p>
<div class="btns">
<a href="https://tailwindcss.com/docs/installation" target="_blank"><button type="button">Get started</button></a>
<button type="button">
<div id="bflex">
<img src="images/search-regular-24.png" alt="">
Quick search...
</div>
<div id="kbd">
<kbd>ctrl+k</kbd>
</div>
</button>
</div>
</div>
</main>
<section id="section">
<div id="text">
<h1>“Best practices” don’t actually work.</h1>
<h2>
I’ve written <code>a few thousand words</code> on why traditional “semantic class names” are the <br>
reason CSS is hard to maintain, but the truth is you’re never going to believe me until you <br>
actually try it. If you can suppress the urge to retch long enough to give it a chance, I really <br>
think you’ll wonder how you ever worked with CSS any other way.
</h2>
</div>
<div id="card">
<img src="images/adam.jpg" alt="">
<div>
<h3>Adam Wathan</h3>
<p>
Creator of Tailwind CSS
</p>
</div>
</div>
<div id="cards1">
<figure id="figure1">
<figcaption>
<img src="images/th (1).jpg" alt="">
<div id="flex-ryan">
<h3>Ryan Florence</h3>
<p>Remix & React Training</p>
</div>
</figcaption>
<blockquote>"I feel like an idiot for not using Tailwind CSS until now."</blockquote>
</figure>
<figure id="figure2">
<figcaption>
<img src="images/th (2).jpg" alt="">
<div id="flex-ryan">
<h3>Debbie O'Brien</h3>
<p>Senior Program Manager at Microsoft</p>
</div>
</figcaption>
<blockquote>"Have been working with CSS for over ten years and Tailwind just makes my life easier. It is still CSS and you use flex, grid, etc. but just quicker to write and maintain."</blockquote>
</figure>
<figure id="figure3">
<figcaption>
<img src="images/th (3).jpg" alt="">
<div id="flex-ryan">
<h3>Vercel</h3>
<p>Guillermo Rauch</p>
</div>
</figcaption>
<blockquote>"If I had to recommend a way of getting into programming today, it would be HTML + CSS with Tailwind CSS."</blockquote>
</figure>
</div>
<div id="cards2">
<figure id="figure4">
<figcaption>
<img src="images/th.jpg" alt="">
<div id="flex-ryan">
<h3>Ben Furfie</h3>
<p>Developer</p>
</div>
</figcaption>
<blockquote>"I’ve been writing CSS for over 20 years, and up until 2017, the way I wrote it changed frequently. It’s not a coincidence Tailwind was released the same year. It might look wrong, but spend time with it and you’ll realize semantic CSS was a 20 year mistake."</blockquote>
</figure>
<figure id="figure5">
<figcaption>
<img src="images/télécharger.jpg" alt="">
<div id="flex-ryan">
<h3>Didier Catz</h3>
<p>Co-Founder @StyptApp</p>
</div>
</figcaption>
<blockquote>"Tailwind makes writing code feel like I’m using a design tool."</blockquote>
</figure>
<figure id="figure6">
<figcaption>
<img src="images/sarah.jpg" alt="">
<div id="flex-ryan">
<h3>Sarah Dayan</h3>
<p>Staff Software Engineer @Algolia</p>
</div>
</figcaption>
<blockquote>"Tailwind CSS is bridging the gap between design systems and products. It’s becoming the defacto API for styling."</blockquote>
</figure>
</div>
<div id="cards3">
<figure id="figure4">
<figcaption>
<img src="images/th (4).jpg" alt="">
<div id="flex-ryan">
<h3>Dacey Nolan</h3>
<p>Software Engineer</p>
</div>
</figcaption>
<blockquote>"I started using @tailwindcss. I instantly fell in love with their responsive modifiers, thorough documentation, and how easy it was customizing color palettes."</blockquote>
</figure>
<figure id="figure5">
<figcaption>
<img src="images/th (5).jpg" alt="">
<div id="flex-ryan">
<h3>Gilbert Rabut Tsurwa</h3>
<p>Web Developer</p>
</div>
</figcaption>
<blockquote>"Loved it the very moment I used it."</blockquote>
</figure>
<figure id="figure6">
<figcaption>
<img src="images/th (6).jpg" alt="">
<div id="flex-ryan">
<h3>Sarah Dayan</h3>
<p>Staff Software Engineer @Algolia</p>
</div>
</figcaption>
<blockquote>"Tailwind CSS is bridging the gap between design systems and products. It’s becoming the defacto API for styling."</blockquote>
</figure>
</div>
<div id="cards4">
<figure id="figure4">
<figcaption>
<img src="images/th (7).jpg" alt="">
<div id="flex-ryan">
<h3>Ben Furfie</h3>
<p>Developer</p>
</div>
</figcaption>
<blockquote>"I’ve been writing CSS for over 20 years, and up until 2017, the way I wrote it changed frequently. It’s not a coincidence Tailwind was released the same year. It might look wrong, but spend time with it and you’ll realize semantic CSS was a 20 year mistake."</blockquote>
</figure>
<figure id="figure5">
<figcaption>
<img src="images/th (8).jpg" alt="">
<div id="flex-ryan">
<h3>Didier Catz</h3>
<p>Co-Founder @StyptApp</p>
</div>
</figcaption>
<blockquote>"Tailwind makes writing code feel like I’m using a design tool."</blockquote>
</figure>
<figure id="figure6">
<figcaption>
<img src="images/th (9).jpg" alt="">
<div id="flex-ryan">
<h3>Sarah Dayan</h3>
<p>Staff Software Engineer @Algolia</p>
</div>
</figcaption>
<blockquote>"Tailwind CSS is bridging the gap between design systems and products. It’s becoming the defacto API for styling."</blockquote>
</figure>
</div>
<button type="button" id="btn">Show more...</button>
<button type="button" id="btnx">Okey , i get my point...</button>
</section>
<footer id="footer">
<div id="foot">
<div id="ulist">
<h4>Getting Started</h4>
<ul>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Installation</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Editor Setup</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Using with preprocessors</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Optimizing for Production</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Browser Support</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Upgrade Guide</a></li>
</ul>
</div>
<div id="ulist">
<h4>Customization</h4>
<ul>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Configuration</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Content Configuration</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Content Configuration</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Theme Configuration</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Customizing Screens</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Customizing Colors</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Customizing Spacing</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Plugins</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Presets</a></li>
</ul>
</div>
<div id="ulist">
<h4>Core Concepts</h4>
<ul>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Utility-First Fundamentals</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Handling Hover, Focus, and Other States</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Responsive Design</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Dark Mode</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Reusing Styles</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Adding Custom Styles</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Functions & Directives</a></li>
</ul>
</div>
<div id="ulist">
<h4>Community</h4>
<ul>
<li><a href="http://" target="_blank" rel="noopener noreferrer">GitHub</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Discord</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">Twitter</a></li>
<li><a href="http://" target="_blank" rel="noopener noreferrer">YouTube</a></li>
</ul>
</div>
</div>
<div id="last">
<div id="parent">
<div id="hr"></div>
<div id="def">
<img src="images/tailwind-css-logo-24.png" alt="">
<h1>tailwindcss</h1>
</div>
</div>
</div>
</footer>
<script>
// Setup and start animation!
var typed = new Typed('#element', {
strings: ['your HTML.','your HTML5.'],
typeSpeed: 40,
backSpeed : 40,
loop : true
});
</script>
<script src="index.js"></script>
</body>
</html>