1 files changed, 13 insertions, 6 deletions
diff --git a/tailwindcss/02-vite/index.html b/tailwindcss/02-vite/index.html
index f44f5a1..3060e72 100644
--- a/tailwindcss/02-vite/index.html
+++ b/tailwindcss/02-vite/index.html
@@ -6,11 +6,11 @@
   <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)) {
+    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');
@@ -19,7 +19,7 @@
 </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 gap-10 min-h-screen flex-col bg-white dark:bg-gray-800 dark:text-white">
     <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">
@@ -27,6 +27,8 @@
         <a href="#">Blog</a>
         <a href="#">Contact</a>
         <a href="#" id="theme-toggle">Toggle Theme</a>
+        <a href="#" onclick="increaseFontSize()">A+</a>
+        <a href="#" onclick="decreaseFontSize()">A-</a>
       </nav>
     </div>
 
@@ -71,10 +73,15 @@
     <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
+      <p>Reference: <a class="underline" 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>
+      <div class="flex gap-3 justify-center mt-3">
+        <a href="#" class="btn">Test</a>
+        <a href="#" class="btn">Test</a>
+        <a href="#" class="btn">Test</a>
+      </div>
     </section>
 
     <footer