diff --git a/pages/aboutv2.hbs b/pages/aboutv2.hbs
deleted file mode 100644
index fa742e2..0000000
--- a/pages/aboutv2.hbs
+++ /dev/null
@@ -1,47 +0,0 @@
----
-{
-    "urlFormat": "aboutv2.html",
-    "urlRedirects": [
-        "/about-us-v2.html",
-        "/about-usv2.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>About Us Version 2</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-pink-100">
-            
-        {{>navbar}}
-
-        <section class="py-8">
-            <div class="container py-8 px-6 mx-auto">
-                <h1 class="text-5xl font-bold">About - Version 2 #pinkBackground</h1>
-                <p class="mt-8 mb-8 text-xl">{{global.name}} was founded in 2021 by 8 technology leaders.</p>
-                <p class="mt-8 mb-8 text-xl">Meet the team below!</p>
-            </div>
-        </section>
-
-            <div class="container py-8 px-6 mx-auto pr-8 pl-8 pb-20">
-                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-                    {{#each global.photoGallery}}
-                        <img class="m-3 rounded-lg hover:grow hover:shadow-lg" title={{this.image.name}} src={{this.image.url}}>
-                    {{/each}}
-                </div>
-            </div>
-
-        </body> 
-    </div>
-</html>
\ No newline at end of file
diff --git a/pages/tailwindcss.hbs b/pages/tailwindcss.hbs
new file mode 100644
index 0000000..60a45f4
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/partials/navbar.hbs b/partials/navbar.hbs
index aec529a..059fb09 100644
--- 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
index da04096..1fea482 100644
--- 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
index d68d73b..984cbf6 100644
--- 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: {},
