blob: f44f5a13aebf2a2285f5ba53dd318b55bd533f52 (
plain)
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
|
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/src/style.css" rel="stylesheet">
<title>Tailwind CSS Starter</title>
<!-- Prevent screen flashing on initial load -->
<script>
if (localStorage.getItem('theme') === 'dark' ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
</script>
</head>
<body class="transition-colors duration-300">
<div class="flex gap-10 min-h-screen flex-col bg-white dark:bg-gray-800">
<div class="flex justify-between px-6 py-4 shadow-lg text-black dark:text-white">
<h1 class="text-lg font-bold">MyWebsite</h1>
<nav class="flex gap-4">
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
<a href="#" id="theme-toggle">Toggle Theme</a>
</nav>
</div>
<section class="text-center py-24 px-6">
<h2 class="text-4xl font-semibold mb-4">Welcome</h2>
<p>This is the main content area of the website.</p>
<p>HTML for this page is based on the nice video titled <a class="underline"
href="https://www.youtube.com/watch?v=H_kSd4kn0E8" target="_blank">"Tailwind CSS V4 Crash Course 2025 | Become
a Tailwind Pro in 1.5 Hours"</a> by PedroTech YouTube channel.</p>
</section>
<section>
<h2 class="text-xl font-semibold text-center mb-4">Features</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 px-6">
<div
class="p-4 rounded bg-gray-200 dark:bg-neutral-800 hover:bg-gray-300 dark:hover:bg-neutral-700 transition-colors">
Feature 1</div>
<div
class="p-4 rounded bg-gray-200 dark:bg-neutral-800 hover:bg-gray-300 dark:hover:bg-neutral-700 transition-colors">
Feature 2</div>
<div
class="p-4 rounded bg-gray-200 dark:bg-neutral-800 hover:bg-gray-300 dark:hover:bg-neutral-700 transition-colors">
Feature 3</div>
<div
class="p-4 rounded bg-gray-200 dark:bg-neutral-800 hover:bg-gray-300 dark:hover:bg-neutral-700 transition-colors">
Feature 4</div>
<div
class="p-4 rounded bg-gray-200 dark:bg-neutral-800 hover:bg-gray-300 dark:hover:bg-neutral-700 transition-colors">
Feature 5</div>
<div
class="p-4 rounded bg-gray-200 dark:bg-neutral-800 hover:bg-gray-300 dark:hover:bg-neutral-700 transition-colors">
Feature 6</div>
</div>
</section>
<section class="text-center">
<h2 class="text-xl font-semibold text-center mb-4">Layers</h2>
<p>Reference: <a href="https://tailwindcss.com/docs/adding-custom-styles" target="_blank">Adding custom
classes</a></p>
<a href="#" class="btn">Test</a> <a href="#" class="btn">Test</a> <a href="#" class="btn border-red">Test</a>
</section>
<footer
class="mt-4 py-6 text-center text-sm bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-400 border-t dark:border-white/10">
© 2026 My Website. All rights reserved.
</footer>
</div>
<script src="/src/main.js"></script>
</body>
</html>
|
