diff options
| author | Kamal Wickramanayake <kamal@inbox.lk> | 2026-07-04 21:47:53 +0530 |
|---|---|---|
| committer | Kamal Wickramanayake <kamal@inbox.lk> | 2026-07-04 21:47:53 +0530 |
| commit | 8ab27073ece9163510e63763ca4cf83a9d9c252b (patch) | |
| tree | 91521b478701ccbd1a6b4c2821583f4004589d2f /tailwindcss/02-vite/index.html | |
| parent | 10410dbe1d3e16bbfa6c27a788f48885b8a0c6f7 (diff) | |
Added Tailwind CSS sample projects
Diffstat (limited to 'tailwindcss/02-vite/index.html')
| -rw-r--r-- | tailwindcss/02-vite/index.html | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/tailwindcss/02-vite/index.html b/tailwindcss/02-vite/index.html new file mode 100644 index 0000000..8107c39 --- /dev/null +++ b/tailwindcss/02-vite/index.html @@ -0,0 +1,76 @@ +<!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> +</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> + </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> +</body> + +</html>
\ No newline at end of file |