tailwindcss demo

lymarrie · Nov 17, 2021 · 61e7548 · 61e7548
1 parent eed371c
commit 61e7548
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 49 deletions.
diff --git a/pages/aboutv2.hbs b/pages/aboutv2.hbs
diff --git a/pages/tailwindcss.hbs b/pages/tailwindcss.hbs
@@ -0,0 +1,51 @@
+---
+{
+    "urlFormat": "tailwindcss.html"
+}
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>TailwindCSS Demo</title>
+    <meta name="description" content="About {{global.name}}">
+    {{>head}}
+    {{!-- <link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet"> --}}
+    <!--Replace with your tailwind.css once created-->
+    <link href="https://fonts.googleapis.com/css?family=Work+Sans:200,400&display=swap" rel="stylesheet">
+</head>
+    <div class="container mx-auto px-4">
+        <body class="bg-white">
+            {{>navbar}}
+            <section class="py-8">
+                <div class="container py-8 px-6 mx-auto">
+                    <h1 class="section text-5xl font-bold">TailwindCSS Demo</h1>
+                    <h2>Responsive Grids</h2>
+                    <div class="section flex flex-col gap-x-10 gap-y-10
+                        sm:grid grid-cols-2
+                        md:grid-cols-3
+                        lg:grid-cols-5">
+                        <div class="border p-10 rounded-xl text-3xl text-center text-white align-middle bg-pink-300">Card 1</div>    
+                        <div class="border p-10 rounded-xl text-3xl text-center text-white align-middle bg-pink-300">Card 2</div>    
+                        <div class="border p-10 rounded-xl text-3xl text-center text-white align-middle bg-pink-300">Card 3</div>    
+                        <div class="border p-10 rounded-xl text-3xl text-center text-white align-middle bg-pink-300">Card 4</div>    
+                        <div class="border p-10 rounded-xl text-3xl text-center text-white align-middle bg-pink-300">Card 5</div>    
+                    </div>
+
+                    <h2>More Grids</h2>
+                    <div class="section grid-demo-div">
+                        <div class="grid-card">Card 1</div> 
+                        <div class="grid-card">Card 1</div> 
+                        <div class="grid-card">Card 1</div> 
+                        <div class="grid-card">Card 1</div> 
+                        <div class="grid-card">Card 1</div> 
+                    </div>
+
+                </div>
+            </section>
+        </body> 
+    </div>
+</html>
diff --git a/partials/navbar.hbs b/partials/navbar.hbs
@@ -15,6 +15,7 @@
                     <ul class="md:flex items-center justify-between text-base text-gray-700 pt-4 md:pt-0">
                         <li><a class="inline-block no-underline hover:text-black hover:underline py-2 px-4" href="/">Home</a></li>
                         <li><a class="inline-block no-underline hover:text-black hover:underline py-2 px-4" href="/about.html">About</a></li>
+                        <li><a class="inline-block no-underline hover:text-black hover:underline py-2 px-4" href="/tailwindcss.html">TailwindCSS</a></li>
                     </ul>
                 </nav>
             </div>

diff --git a/src/global.css b/src/global.css
@@ -1,9 +1,45 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
 
 
+h1 {
+  @apply text-4xl mb-5 font-extrabold;
+}
+
+h2 {
+  @apply text-2xl font-bold;
+}
+
+h3 {
+  @apply text-lg font-bold;
+}
+
+h4 {
+  @apply text-lg font-bold;
+}
 
+p {
+  @apply opacity-90;
+}
 
+.section {
+    @apply mt-8 mb-16;
+}
 
+/* TailwindCSS Demo Styling */
 
+.grid-demo-div {
+    @apply flex flex-col gap-x-10 gap-y-10 sm:grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5;
+}
+
+.grid-card {
+    @apply border p-10 rounded-xl text-3xl text-center text-white align-middle bg-custom-color;
+    @apply hover:bg-yellow-200 text-black cursor-pointer; 
+}
+
+/* .grid-card:hover {
+    background-color: yellow;
+    color: black;
+} */
+
+@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,7 +7,13 @@ module.exports = {
     ],
     darkMode: false, // or 'media' or 'class'
     theme: {
-      extend: {},
+      extend: {
+        colors: {
+          "custom-color": "#40e0d0",
+        },
+        lineHeight: {
+        },
+      },
     },
     variants: {
       extend: {},