From 1b866474b9840ca07fb21835c88eae2017c092ad Mon Sep 17 00:00:00 2001
From: rahuldkjain <rahuldkjain@gmail.com>
Date: Fri, 4 Sep 2020 21:16:18 +0530
Subject: [PATCH] [add]: tailwind-complete

---
 gatsby-config.js              |  34 ++++----
 src/components/addons.js      |   2 +-
 src/components/footer.js      |   2 +-
 src/components/markdown.js    |   2 +-
 src/components/skills.js      |   4 +-
 src/components/social.js      |  12 ---
 src/components/subtitle.js    |   2 +-
 src/components/title.js       |   4 +-
 src/components/work.js        |  44 +++++-----
 src/markdown-pages/about.md   |   4 +-
 src/pages/index.css           | 148 +++++++++++++++++-----------------
 src/pages/index.js            |  19 +++--
 src/styles/tailwind.css       | 102 ++++++++++++++++++++++-
 src/templates/blogTemplate.js |  19 ++---
 14 files changed, 244 insertions(+), 154 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 6f686b9..753391c 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -7,20 +7,6 @@ module.exports = {
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
-    {
-      resolve: `gatsby-plugin-postcss`,
-      options: {
-        postCssPlugins: [require("tailwindcss")],
-      }
-    },
-    {
-      resolve: `gatsby-plugin-purgecss`,
-      options: {
-        printRejected: false,
-        develop: false,
-        tailwind: true,
-      }
-    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {
@@ -66,8 +52,22 @@ module.exports = {
         // other options
       },
     },
+    {
+      resolve: `gatsby-plugin-postcss`,
+      options: {
+        postCssPlugins: [require("tailwindcss")],
+      }
+    },
+    {
+      resolve: `gatsby-plugin-purgecss`,
+      options: {
+        printRejected: false,
+        develop: false,
+        tailwind: true,
+      }
+    },
   ],
-    // this (optional) plugin enables Progressive Web App + Offline functionality
-    // To learn more, visit: https://gatsby.dev/offline
-    // `gatsby-plugin-offline`,
+  // this (optional) plugin enables Progressive Web App + Offline functionality
+  // To learn more, visit: https://gatsby.dev/offline
+  // `gatsby-plugin-offline`,
 }
diff --git a/src/components/addons.js b/src/components/addons.js
index 4dc54f8..9d2be20 100644
--- a/src/components/addons.js
+++ b/src/components/addons.js
@@ -25,7 +25,7 @@ const Addons = (props) => {
         document.body.removeChild(tempElement);
     }
     return (
-        <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-4">
+        <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
             <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Add-ons</div>
             <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
                 <label htmlFor="visitors-count" className="cursor-pointer">
diff --git a/src/components/footer.js b/src/components/footer.js
index cfae977..a208307 100644
--- a/src/components/footer.js
+++ b/src/components/footer.js
@@ -4,7 +4,7 @@ import { Link } from 'gatsby'
 const Footer = () => {
     return (
         <div className="bg-gray-100 p-4 flex flex-col justify-center items-center shadow-inner mt-2">
-            <div className="w-full flex justify-evenly items-center py-2 text-blue-500">
+            <div className="w-full flex justify-evenly items-center py-2 text-orange-500">
                 <div>
                     <Link to={links.about} activeStyle={{ color: "#002ead" }}>
                         About
diff --git a/src/components/markdown.js b/src/components/markdown.js
index 756b04d..ff2e382 100644
--- a/src/components/markdown.js
+++ b/src/components/markdown.js
@@ -93,7 +93,7 @@ const Markdown = (props) => {
         return '';
     }
     return (
-        <div id="markdown-content" className="break-all">
+        <div id="markdown-content" className="break-words">
             <><Title prefix={props.prefix.title} title={props.data.title} /></>
             <><SubTitle subtitle={props.data.subtitle} /></>
             <><VisitorsBadge show={props.data.visitorsBadge} github={props.social.github} /></>
diff --git a/src/components/skills.js b/src/components/skills.js
index c7c60d7..904e8d9 100644
--- a/src/components/skills.js
+++ b/src/components/skills.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from "react"
+import React from "react"
 import { icons, categorizedSkills } from "../constants/skills"
 
 const Skills = props => {
@@ -20,7 +20,7 @@ const Skills = props => {
   }
 
   return (
-    <div className="px-2 sm:px-6 mb-4">
+    <div className="px-2 sm:px-6 mb-10">
       <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Skills</div>
 
       {Object.keys(categorizedSkills).map(key => (
diff --git a/src/components/social.js b/src/components/social.js
index c90065e..7e031ed 100644
--- a/src/components/social.js
+++ b/src/components/social.js
@@ -19,18 +19,6 @@ const Social = (props) => {
                         className="placeholder-gray-700 w-32 sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
                         value={props.social.twitter} onChange={event => props.handleSocialChange('twitter', event)} />
                 </div>
-                {/* <div className="container">
-                    <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg"
-                        className="icon" alt="github" />
-                    <input id="github" placeholder="github username" className="inputField lg"
-                        value={props.social.github} onChange={event => props.handleSocialChange('github', event)} />
-                </div>
-                <div className="container">
-                    <img src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg"
-                        className="icon" alt="twitter" />
-                    <input id="twitter" placeholder="twitter username" className="inputField lg"
-                        value={props.social.twitter} onChange={event => props.handleSocialChange('twitter', event)} />
-                </div> */}
                 <div className="w-1/2 flex justify-center items-center text-xxs sm:text-lg py-4">
                     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg"
                         className="w-6 h-6 sm:w-8 sm:h-8 mr-1 sm:mr-4" alt="dev.to" />
diff --git a/src/components/subtitle.js b/src/components/subtitle.js
index ea65e42..e1656ed 100644
--- a/src/components/subtitle.js
+++ b/src/components/subtitle.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 const Subtitle = (props) => {
     return (
-        <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-4">
+        <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
             <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Subtitle</div>
             <input id="subtitle" className="w-full text-xs sm:text-lg sm:w-1/2 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700" value={props.data.subtitle} 
             onChange={event => props.handleDataChange('subtitle', event)} />
diff --git a/src/components/title.js b/src/components/title.js
index b3292c1..bbb88f3 100644
--- a/src/components/title.js
+++ b/src/components/title.js
@@ -2,11 +2,11 @@ import React from 'react';
 
 const Title = (props) => {
     return (
-        <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-4">
+        <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
             <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">Title</div>
             <div className="flex justify-start items-center w-full text-regular text-xs sm:text-lg">
                 <input id="title-prefix"
-                    className="w-24 sm:w-40 mr-6 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
+                    className="w-24 sm:w-40 mr-10 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 prefix"
                     value={props.prefix.title} onChange={event => props.handlePrefixChange('title', event)} />
                 <input id="title-name" placeholder="name" className="placeholder-gray-700 w-1/2 sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700" 
                 value={props.data.title}
diff --git a/src/components/work.js b/src/components/work.js
index 9f8bacf..a779052 100644
--- a/src/components/work.js
+++ b/src/components/work.js
@@ -2,7 +2,7 @@ import React from "react"
 
 const Work = props => {
   return (
-    <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-4">
+    <div className="flex justify-center items-start flex-col w-full px-2 sm:px-6 mb-10">
       <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
         Work
       </div>
@@ -10,21 +10,21 @@ const Work = props => {
         <input
           id="currentWork-prefix"
           placeholder="Hi, I'm "
-          className="placeholder-gray-700 mr-4 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.currentWork}
           onChange={event => props.handlePrefixChange("currentWork", event)}
         />
         <input
           id="currentWork"
           placeholder="project name"
-          className="placeholder-gray-700 mr-4 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.currentWork}
           onChange={event => props.handleDataChange("currentWork", event)}
         />
         <input
           id="currentWork-link"
           placeholder="project link"
-          className="placeholder-gray-700 text-blue-700 mr-4 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 text-blue-700 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.currentWork}
           onChange={event => props.handleLinkChange("currentWork", event)}
         />
@@ -32,21 +32,21 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="collaborateOn-prefix"
-          className="mr-4 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.collaborateOn}
           onChange={event => props.handlePrefixChange("collaborateOn", event)}
         />
         <input
           id="collaborateOn"
           placeholder="project name"
-          className="placeholder-gray-700 mr-4 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.collaborateOn}
           onChange={event => props.handleDataChange("collaborateOn", event)}
         />
         <input
           id="collaborateOn-link"
           placeholder="project link"
-          className="placeholder-gray-700 text-blue-700 mr-4 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.collaborateOn}
           onChange={event => props.handleLinkChange("collaborateOn", event)}
         />
@@ -54,21 +54,21 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="helpWith-prefix"
-          className="placeholder-gray-700 mr-4 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.helpWith}
           onChange={event => props.handlePrefixChange("helpWith", event)}
         />
         <input
           id="helpWith"
           placeholder="project name"
-          className="placeholder-gray-700 mr-4 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 mr-8 w-full sm:w-1/4 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.helpWith}
           onChange={event => props.handleDataChange("helpWith", event)}
         />
         <input
           id="helpWith-link"
           placeholder="project link"
-          className="placeholder-gray-700 text-blue-700 mr-4 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 text-blue-700 w-full sm:w-1/4  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.helpWith}
           onChange={event => props.handleLinkChange("helpWith", event)}
         />
@@ -77,14 +77,14 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="currentLearn-prefix"
-          className="mr-4 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.currentLearn}
           onChange={event => props.handlePrefixChange("currentLearn", event)}
         />
         <input
           id="currentLearn"
           placeholder="Frameworks, courses etc."
-          className="placeholder-gray-700 mr-4 w-full sm:w-1/3  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 w-full sm:w-1/3  border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.currentLearn}
           onChange={event => props.handleDataChange("currentLearn", event)}
         />
@@ -92,14 +92,14 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="ama-prefix"
-          className="mr-4 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.ama}
           onChange={event => props.handlePrefixChange("ama", event)}
         />
         <input
           id="ama"
           placeholder="react, vue and gsap"
-          className="placeholder-gray-700 mr-4 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.ama}
           onChange={event => props.handleDataChange("ama", event)}
         />
@@ -108,14 +108,14 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="contact-prefix"
-          className="mr-4 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.contact}
           onChange={event => props.handlePrefixChange("contact", event)}
         />
         <input
           id="contact"
           placeholder="example@gmail.com"
-          className="placeholder-gray-700 mr-4 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.contact}
           onChange={event => props.handleDataChange("contact", event)}
         />
@@ -124,14 +124,14 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="portfolio-prefix"
-          className="mr-4 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.portfolio}
           onChange={event => props.handlePrefixChange("portfolio", event)}
         />
         <input
           id="portfolio"
           placeholder="portfolio link"
-          className="placeholder-gray-700 text-blue-700 mr-4 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.portfolio}
           onChange={event => props.handleLinkChange("portfolio", event)}
         />
@@ -139,14 +139,14 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="blog-prefix"
-          className="mr-4 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.blog}
           onChange={event => props.handlePrefixChange("blog", event)}
         />
         <input
           id="blog"
           placeholder="blog link"
-          className="placeholder-gray-700 text-blue-700 mr-4 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 text-blue-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.link.blog}
           onChange={event => props.handleLinkChange("blog", event)}
         />
@@ -154,14 +154,14 @@ const Work = props => {
       <div className="text-xs sm:text-lg flex flex-col sm:flex-row mb-10 justify-center sm:justify-start items-center sm:items-start w-full px-4 sm:px-0">
         <input
           id="funFact-prefix"
-          className="mr-4 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="mr-8 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.prefix.funFact}
           onChange={event => props.handlePrefixChange("funFact", event)}
         />
         <input
           id="funFact"
           placeholder="Chai over Coffee"
-          className="placeholder-gray-700 mr-4 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
+          className="placeholder-gray-700 w-full sm:w-1/3 border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700"
           value={props.data.funFact}
           onChange={event => props.handleDataChange("funFact", event)}
         />
diff --git a/src/markdown-pages/about.md b/src/markdown-pages/about.md
index 1fee7fa..5e9ec6b 100644
--- a/src/markdown-pages/about.md
+++ b/src/markdown-pages/about.md
@@ -16,13 +16,15 @@ The profile should be neat and minimal to give a clear overview of the work. Non
 To solve this, GitHub Profile README Generator came into existence.
 
 So many developers contributed to the project and made it more awesome to use. You can contribute too to make it grow even further.
-
+<p align="left">
 <a href="https://github.com/rahuldkjain/github-profile-readme-generator/issues" target="blank">
 <img src="https://img.shields.io/github/issues/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator issues"/>
 </a>
+<br/>
 <a href="https://github.com/rahuldkjain/github-profile-readme-generator/pulls" target="blank">
 <img src="https://img.shields.io/github/issues-pr/rahuldkjain/github-profile-readme-generator?style=flat-square" alt="github-profile-readme-generator pull-requests"/>
 </a>
+</p>
 
 <hr/>
 
diff --git a/src/pages/index.css b/src/pages/index.css
index 79c1418..8b0f6f8 100644
--- a/src/pages/index.css
+++ b/src/pages/index.css
@@ -22,22 +22,22 @@
 html,
 body {
   /* margin: 1%; */
-  padding: 0% 0.5%;
+  /* padding: 0% 0.5%; */
   font-family: "Roboto Mono", monospace;
   color: var(--grey-90);
 }
 
-.section-title {
+/* .section-title {
   margin: 0 !important;
   font-family: "Lato", sans-serif;
   padding-left: 2%;
   font-size: 24px;
   font-weight: 600;
-}
+} */
 
-input:focus {
+/* input:focus {
   outline: none;
-}
+} */
 
 [type="checkbox"] {
   -webkit-box-shadow: 0 1px 1px var(--grey-90) !important;
@@ -58,27 +58,27 @@ input:focus {
   margin: 2% 0%;
 }
 
-.inputField {
+/* .inputField {
   border: 0px solid;
   border-bottom: 1px solid grey;
   margin: 2%;
   padding: 1% 2% 1% 1%;
   font-size: 18px;
   height: 25px;
-}
-
+} */
+/* 
 .row {
   width: 100%;
   display: flex;
-  /* justify-content: flex-start; */
-}
+  justify-content: flex-start;
+} */
 
-.inputField:focus {
+/* .inputField:focus {
   border-bottom: 1px solid var(--dark-blue);
   color: var(--grey-90);
-}
+} */
 
-.sm {
+/* .sm {
   width: 15%;
 }
 
@@ -88,13 +88,13 @@ input:focus {
 
 .lg {
   width: 50%;
-}
+} */
 
-.prefix {
+/* .prefix {
   color: var(--grey-80);
-}
+} */
 
-.button {
+/* .button {
   padding: 1% 0%;
   background: var(--grey-05);
   border: 2px solid var(--grey-85);
@@ -102,34 +102,34 @@ input:focus {
   width: 25%;
   text-align: center;
   cursor: pointer;
-}
+} */
 
-.container {
+/* .container {
   width: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-}
+} */
 
-.checkbox {
+/* .checkbox {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   padding-left: 2%;
   margin: 1% 0%;
-}
-
+} */
 
+/* 
 .checkboxLabel {
   font-weight: 500;
   cursor: pointer;
-}
+} */
 
-.submit {
+/* .submit {
   display: flex;
   justify-content: center;
-}
+} */
 
 .warning {
   color: var(--red);
@@ -137,26 +137,26 @@ input:focus {
   margin-left: 2%;
   padding: 1%;
 }
-
+/* 
 .preview {
   border: 2px solid var(--grey-75);
   -webkit-box-shadow: 0px 0px 5px 5px rgba(208, 208, 213, 0.75);
   -moz-box-shadow: 0px 0px 5px 5px rgba(208, 208, 213, 0.75);
   box-shadow: 0px 0px 5px 5px rgba(208, 208, 213, 0.75);
   padding: 0% 2%;
-}
+} */
 
 .markdown-section {
   min-height: calc(100vh - 100px);
 }
-
+/* 
 .markdown {
   width: 100%;
   display: flex;
   justify-content: center;
-}
+} */
 
-.markdown-box {
+/* .markdown-box {
   width: 100%;
   font-size: 12px;
   color: var(--grey-85);
@@ -166,7 +166,7 @@ input:focus {
   box-shadow: 3px 5px 5px 5px rgba(208, 208, 213, 0.75);
   padding: 1% 2% 0.5% 2%;
   margin-top: 0.5%;
-}
+} */
 
 /* .copy-button {
   background: var(--grey-05);
@@ -195,7 +195,7 @@ input:focus {
   grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
   margin-top: 4%;
 } */
-
+/* 
 .preview-button {
   background: var(--grey-05);
   border: 2px solid var(--grey-75);
@@ -205,7 +205,7 @@ input:focus {
   justify-self: end;
   padding: 2% 0%;
   align-self: center;
-}
+} */
 
 .loader {
   height: 100vh;
@@ -216,7 +216,7 @@ input:focus {
   font-size: 24px;
 }
 
-.back-button {
+/* .back-button {
   background: var(--grey-05);
   border: 2px solid var(--grey-75);
   text-align: center;
@@ -225,7 +225,7 @@ input:focus {
   justify-self: start;
   padding: 2% 0%;
   align-self: center;
-}
+} */
 /* 
 .title {
   text-align: center;
@@ -272,35 +272,35 @@ input:focus {
   cursor: pointer;
 } */
 
-.header {
+/* .header {
   width: 100%;
   text-align: center;
   display: inline-block;
-}
+} */
 
-.heading {
+/* .heading {
   color: var(--dark-blue);
   font-family: "Lato", sans-serif;
   cursor: pointer;
-}
+} */
 
-.footer {
+/* .footer {
   margin-top: 2%;
   width: 100%;
   text-align: center;
   padding: 1%;
-}
-.footer-pages {
+} */
+/* .footer-pages {
   display: grid;
   grid-template-columns: repeat(
     auto-fill,
     minmax(min(calc(20% + 20vmin), 100%), 1fr)
   );
   color: var(--grey-75);
-}
-.footer-proud {
+} */
+/* .footer-proud {
   margin: 2% 0%;
-}
+} */
 
 a {
   text-decoration: none;
@@ -308,11 +308,11 @@ a {
   color: inherit;
 }
 
-.github {
+/* .github {
   display: inline-flex;
-}
+} */
 
-.github-button {
+/* .github-button {
   color: var(--grey-90);
   font-size: 12px;
   font-weight: bolder;
@@ -321,18 +321,18 @@ a {
   border: 2px solid var(--grey-85);
   margin: 1%;
   width: 230px;
-}
+} */
 
 .github-count {
   color: var(--dark-purple);
 }
-
+/* 
 .logo {
   width: 40px;
   height: 40px;
-}
+} */
 
-.skills {
+/* .skills {
   margin: 1%;
   width: 100%;
   display: grid;
@@ -353,7 +353,7 @@ a {
   width: 40px;
   height: 40px;
   object-fit: contain;
-}
+} */
 
 /* .skill-preview-icon {
   width: 40px;
@@ -395,20 +395,20 @@ a {
   background: var(--grey-05);
 }
 
-.config-options {
+/* .config-options {
   margin-top: 48px;
   padding: 1% 1% 1% 2%;
   font-weight: 700;
   font-size: 12px;
   border: 2px solid var(--grey-15);
-}
-.new-tag {
+} */
+/* .new-tag {
   font-size: 14px;
   padding: 2px 4px;
   background: var(--dark-green);
   color: white;
-}
-.actions {
+} */
+/* .actions {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
 }
@@ -428,16 +428,16 @@ a {
 
 .actions .data input {
   flex: 1;
-}
+} */
 
 @media only screen and (max-width: 1199px) {
-  .section-title {
+  /* .section-title {
     font-size: 18px;
     margin: 2% 0% !important;
   }
   .inputField {
     font-size: 10px;
-  }
+  } */
   /* .icon {
     width: 20px;
     height: 20px;
@@ -445,15 +445,15 @@ a {
   .checkbox {
     font-size: 12px;
   }
-  .button {
+  /* .button {
     width: 60%;
     margin: 2% 0%;
     font-size: 14px;
-  }
+  } */
   /* .badgeImage {
     height: 15px;
   } */
-  .heading {
+  /* .heading {
     font-size: 18px;
   }
   .footer {
@@ -464,17 +464,17 @@ a {
       auto-fill,
       minmax(min(calc(10% + 20vmin), 100%), 1fr)
     );
-  }
-  .github-button {
+  } */
+  /* .github-button {
     font-size: 10px !important;
     padding: 2% 1% !important;
     width: 140px;
-  }
+  } */
   .logo {
     width: 20px;
     height: 20px;
   }
-  .skills {
+  /* .skills {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
   }
@@ -482,15 +482,15 @@ a {
     margin-left: 12%;
     width: 25px;
     height: 25px;
-  }
+  } */
   /* .skill-preview-icon {
     width: 20px;
     height: 20px;
     margin: 1%;
   } */
-  .hide-on-mobile {
+  /* .hide-on-mobile {
     display: none;
-  }
+  } */
   /* #markdown-content {
     word-break: break-all;
   } */
@@ -518,14 +518,14 @@ a {
   /* .top-languages-card > img{
     width: 80%;
   } */
-  .skills-category-title {
+  /* .skills-category-title {
     font-size: 14px;
   }
 
   .actions {
     grid-template-columns: 1fr;
     flex-direction: column;
-  }
+  } */
 }
 
 
diff --git a/src/pages/index.js b/src/pages/index.js
index 34f332a..277378e 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -164,7 +164,7 @@ const IndexPage = () => {
 			duration: 0.5,
 			ease: "Linear.easeNone",
 		})
-		tl.set(".form", { display: "none" })
+		tl.set("#form", { display: "none" });
 		setDisplayLoader(true)
 		setTimeout(() => {
 			setDisplayLoader(false)
@@ -320,7 +320,7 @@ const IndexPage = () => {
 	const handleBackToEdit = () => {
 		setGeneratePreview(false)
 		setGenerateMarkdown(false)
-		gsap.set(".form", {
+		gsap.set("#form", {
 			display: "",
 		})
 		gsap.to(".generate", {
@@ -416,10 +416,9 @@ const IndexPage = () => {
 
 	return (
 		<Layout>
-			<>
+			<div className="m-4 sm:p-4">
 				<SEO title="GitHub Profile Readme Generator" />
-
-				<div className="form">
+				<div id="form">
 					<Title
 						data={data}
 						prefix={prefix}
@@ -481,7 +480,7 @@ const IndexPage = () => {
 								""
 							)}
 					</div>
-					<div className="submit">
+					<div className="flex items-center justify-center w-full">
 						<div
 							className="text-xs sm:text-xl font-medium border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 sm:py-2 px-2 sm:px-4 generate"
 							tabIndex="0"
@@ -489,14 +488,14 @@ const IndexPage = () => {
 							onClick={handleGenerate}
 						>
 							Generate README
-            </div>
+            			</div>
 					</div>
 				</div>
 
 				{displayLoader ? <Loader /> : ""}
 
 				{generateMarkdown || generatePreview ? (
-					<div className="markdown-section">
+					<div className="markdown-section p-4 sm:py-4 sm:px-10">
 						<div className="w-full flex justify-between items-center">
 							<div
 								className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
@@ -569,7 +568,7 @@ const IndexPage = () => {
 						</div>
 
 						<div className="w-full flex justify-center items-center">
-							<div className="w-full text-sm text-gray-900 shadow-lg mt-2 p-4 bg-gray-100 border-2 border-solid border-gray-800" id="markdown-box">
+							<div className="w-full text-sm text-gray-900 shadow-xl mt-2 p-4 bg-gray-100 border-2 border-solid border-gray-800" id="markdown-box">
 								{generatePreview ? (
 									<MarkdownPreview
 										prefix={prefix}
@@ -638,7 +637,7 @@ const IndexPage = () => {
 						<div className="text-sm sm:text-lg text-gray-700">* Press reset to reset the form.</div>
 					</div>
 				</div>
-			</>
+			</div>
 		</Layout>
 	)
 }
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index a489223..1bdc31c 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -4,4 +4,104 @@
 
 @tailwind utilities;
 
-@tailwind @screens;
\ No newline at end of file
+@tailwind @screens;
+
+.markdown {
+  @apply leading-relaxed text-sm;
+}
+
+@screen sm {
+  .markdown {
+    @apply text-base;
+  }
+}
+
+@screen lg {
+  .markdown {
+    @apply text-lg;
+  }
+}
+
+.text-shadow {
+    text-shadow: 1px 1px 1px rgba(0,0,0,0.55);
+}
+
+/* Headers */
+.markdown h1,
+.markdown h2 {
+  @apply text-xl my-4 font-semibold;
+}
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  @apply text-lg my-1 font-semibold;
+}
+
+@screen sm {
+  .markdown h1,
+  .markdown h2 {
+    @apply text-2xl;
+  }
+  .markdown h3,
+  .markdown h4,
+  .markdown h5,
+  .markdown h6 {
+    @apply text-xl;
+  }
+}
+
+/* Links */
+.markdown a {
+  @apply text-blue-800 my-1;
+}
+.markdown a:hover {
+  @apply underline;
+}
+/* Paragraph */
+.markdown p {
+  @apply mb-2;
+}
+/* Lists */
+.markdown ul,
+.markdown ol {
+  @apply mb-2 ml-8;
+}
+.markdown li > p,
+.markdown li > ul,
+.markdown li > ol {
+  @apply mb-0;
+}
+.markdown ol {
+  @apply list-decimal;
+}
+.markdown ul {
+  @apply list-disc;
+}
+/* Blockquotes */
+.markdown blockquote {
+  @apply p-2 mx-6 bg-gray-100 mb-4 border-l-4 border-gray-400 italic;
+}
+.markdown blockquote > p {
+  @apply mb-0;
+}
+/* Tables */
+.markdown td,
+.markdown th {
+  @apply px-2 py-1 border border-gray-400;
+}
+.markdown tr:nth-child(odd) {
+  @apply bg-gray-100;
+}
+.markdown table {
+  @apply mb-6;
+}
+
+/* Wrap any inline highlights `that are really long`, but don't modify
+     the setting for codeblocks (inside ```), which are rendered in as:
+     <pre><code>...
+  */
+.markdown :not(pre) > code.language-text {
+  white-space: pre-line;
+}
+/* purgecss end ignore */
diff --git a/src/templates/blogTemplate.js b/src/templates/blogTemplate.js
index 828ecbb..5c0005e 100644
--- a/src/templates/blogTemplate.js
+++ b/src/templates/blogTemplate.js
@@ -1,7 +1,8 @@
 import React from "react"
 import { graphql } from "gatsby"
-import Header from '../components/header'
-import Footer from '../components/footer'
+// import Header from '../components/header'
+// import Footer from '../components/footer'
+import Layout from "../components/layout";
 
 export default function Template({
     data, // this prop will be injected by the GraphQL query below.
@@ -9,20 +10,20 @@ export default function Template({
     const { markdownRemark } = data // data.markdownRemark holds your post data
     const { frontmatter, html } = markdownRemark
     return (
-        <>
-            <Header heading="GitHub Profile README Generator" />
-            <div className="blog-post-container">
+        <Layout>
+            {/* <Header heading="GitHub Profile README Generator" /> */}
+            <div className="m-4 p-10">
                 <div className="blog-post">
-                    <h1>{frontmatter.title}</h1>
+                    <h1 className="text-4xl font-bold">{frontmatter.title}</h1>
                     {/* <h2>{frontmatter.date}</h2> */}
                     <div
-                        className="blog-post-content"
+                        className="markdown"
                         dangerouslySetInnerHTML={{ __html: html }}
                     />
                 </div>
             </div>
-            <Footer />
-        </>
+            {/* <Footer /> */}
+        </Layout>
     )
 }