This repository was archived by the owner on Jul 20, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
61 lines (57 loc) · 2.91 KB
/
Copy pathindex.html
File metadata and controls
61 lines (57 loc) · 2.91 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Stats Preview card by FrontendMentor">
<link rel="stylesheet" href="./styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap" rel="stylesheet">
<title>Tailwind CSS Template</title>
</head>
<body>
<section class="flex items-center min-h-screen px-8 py-24 bg-gradient-to-br from-purple-900 via-indigo-900 to-dark-blue">
<div class="container w-full h-full max-w-screen-lg px-0 overflow-hidden shadow-xl bg-secondary rounded-xl">
<div class="grid grid-cols-1">
<div class="order-last p-12 text-center sm:p-20 2xl:p-24 lg:order-first md:text-left">
<h1 class="text-3xl font-bold text-white sm:text-4xl">
<span class="text-primary"> TailwindCSS</span> Template
</h1>
<div class="mt-4 sm:mt-8">
<p class="leading-relaxed text-white opacity-75 sm:text-lg">
General template to help people try out TailwindCSS with customizations and plugins without the faff of setting up postCSS and other compilers. Pretty useful for quick static builds too. Left in some of my own tailwind customizations to help get you started. Check out the <a class="underline transition-colors focus:text-primary hover:text-primary" href="https://tailwindcss.com/"> Tailwind docs</a>. Parts of this design are from a <a class="underline transition-colors focus:text-primary hover:text-primary" href="https://www.frontendmentor.io"> FrontendMentor</a> challenge
</p>
</div>
<ul class="justify-between mt-8 space-y-8 cursor-default sm:mt-16 md:flex md:space-y-0">
<li class="flex flex-col-reverse space-y-reverse sm:space-y-2 group">
<p class="text-white uppercase sm:text-lg opacity-60 font-secondary">
Placeholder
</p>
<p class="text-2xl font-semibold text-white transition-colors sm:text-3xl group-hover:text-primary">
12k+
</p>
</li>
<li class="flex flex-col-reverse space-y-reverse sm:space-y-2 group">
<p class="text-white uppercase sm:text-lg opacity-60 font-secondary">
Placeholder
</p>
<p class="text-2xl font-semibold text-white transition-colors sm:text-3xl group-hover:text-primary">
314
</p>
</li>
<li class="flex flex-col-reverse space-y-reverse sm:space-y-2 group">
<p class="text-white uppercase sm:text-lg opacity-60 font-secondary">
Placeholder
</p>
<p class="text-2xl font-semibold text-white transition-colors sm:text-3xl group-hover:text-primary">
12M+
</p>
</li>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>