Update Tailwind Plus section (#2335)

This PR updates the Tailwind Plus section on the home page with a better
dark mode version that is more aligned with the actual Tailwind Plus
website.

Before | After | Tailwind Plus |
| --- | --- | --- |
| <img width="2144" height="1373" alt="image"
src="https://github.com/user-attachments/assets/d3651616-bc7b-401d-99c1-3ae277efe397"
/> | <img width="2144" height="1373" alt="image"
src="https://github.com/user-attachments/assets/dae7243b-ebac-4aa8-b52b-bc801a294336"
/> | <img width="2144" height="1373" alt="image"
src="https://github.com/user-attachments/assets/98abe928-0bf6-4470-9cc0-6bf0fa2c8084"
/> |
| <img width="2144" height="1373" alt="image"
src="https://github.com/user-attachments/assets/ceabb5be-b5e2-4869-aab2-22de296d90c0"
/> | <img width="2144" height="1373" alt="image"
src="https://github.com/user-attachments/assets/fb118fee-21e4-4180-bf02-e1f00a08930f"
/> | <img width="2144" height="1373" alt="image"
src="https://github.com/user-attachments/assets/90201b8e-a8f8-47a0-818a-946f7baaec9b"
/> |
| <img width="2144" height="1373" alt="image"
src="https://github.com/user-attachments/assets/beb6b930-ebf8-4b32-8b18-87c89874ffba"
/> | <img width="2144" height="1373" alt="image"
src="https://github.com/user-attachments/assets/f958e1aa-7668-47d7-b08e-7ce9d447980d"
/> | <img width="2144" height="1373" alt="image"
src="https://github.com/user-attachments/assets/798e14ca-c74a-47e2-9312-dadd976688e4"
/> |

Author: RobinMalfait

src/app/globals.css

@@ -40,13 +40,26 @@
   &:where(.dark, .dark *) {
     @slot;
   }
+
   @media (prefers-color-scheme: dark) {
     &:where(.system, .system *) {
       @slot;
     }
   }
 }
 
+@variant not-dark {
+  &:not(:where(.dark, .dark *)) {
+    @media not (prefers-color-scheme: dark) {
+      @slot;
+    }
+
+    &:not(:where(.system, .system *)) {
+      @slot;
+    }
+  }
+}
+
 /* Hide scrollbar for Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
   display: none;