final clean of code

Author: jsvigneshkanna

pages/components/alert.js

@@ -15,7 +15,7 @@ const Alert = () => {
       </Head>
       <Navbar />
       <div className="codepen_page font-poppins">
-        <p className="codepen_brief bg-sky-200 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
+        <p className="codepen_brief bg-sky-200 text-blue-700 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
           Alerts are used in website due user actions 💭
         </p>
         {alertCollections.map((alert, index) => {

pages/components/badges.js

@@ -15,7 +15,7 @@ const Badge = () => {
       </Head>
       <Navbar />
       <div className="codepen_page font-poppins">
-        <p className="codepen_brief bg-sky-200 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
+        <p className="codepen_brief bg-sky-200 text-blue-700 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
           How cool is to have coloured and meaningfull badges near your image/
           cards/ testimonials. Sounds interesting, then why waiting to check
           inside 😎

pages/components/buttons.js

@@ -16,7 +16,7 @@ const Buttons = () => {
       <Navbar />
 
       <div className="codepen_page font-poppins">
-        <p className="codepen_brief bg-sky-200 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
+        <p className="codepen_brief bg-sky-200 text-blue-700 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
           Buttons, widely called CTAs in tech are backbones for engineers to
           make user interact easily and navigate different section with a click
           👆

pages/components/contact_forms.js

@@ -16,7 +16,7 @@ const contactForms = () => {
       <Navbar />
 
       <div className="codepen_page font-poppins">
-        <p className="codepen_brief bg-sky-200 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
+        <p className="codepen_brief bg-sky-200 text-blue-700 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
           As someone in facebook posted &apos;Helps you connect and share with
           people using contact forms&apos;, we are helping you with best
           designed contact forms in tailwindCSS 🍽️

pages/components/feature_card.js

@@ -16,7 +16,7 @@ const FeatureCards = () => {
       <Navbar />
 
       <div className="codepen_page font-poppins">
-        <p className="codepen_brief bg-sky-200 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
+        <p className="codepen_brief bg-sky-200 text-blue-700 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
           In late 90s, we do have visiting cards to showcase our portfolio. But
           now, we are in 20th century where 240px X 240px of div is enough for
           showcasing our portfolio 💳

pages/components/forms.js

@@ -15,7 +15,7 @@ const Forms = () => {
       </Head>
       <Navbar />
       <div className="codepen_page font-poppins">
-        <p className="codepen_brief bg-sky-200 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
+        <p className="codepen_brief bg-sky-200 text-blue-700 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
           Forms are vital in website/ apps where these helps end users to
           interact with the website smoothly and increase user experience 📝
         </p>

pages/components/navbars.js

@@ -16,10 +16,14 @@ const NavbarComponent = () => {
       <Navbar />
 
       <div className="codepen_page font-poppins">
-        <p className="codepen_brief bg-sky-200 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
+        <p className="codepen_brief bg-sky-200 text-blue-700 md:mx-44 mx-4 px-4 mb-2 text-center py-4 rounded-2xl">
           Guess, IRL where no navbars in website which has 20 pages. This would
           rather increase the memory power in memorizing all the URLs 🤪
         </p>
+        <p className="codepen_brief bg-rose-400 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl text-white">
+          NOTE: Kindly make the codepen result screen view port to 0.5x in
+          mobile devices
+        </p>
         {navbarCollections.map((navbar, index) => {
           return (
             <div key={index} className="codepen_container">

pages/components/pricing_cards.js

@@ -16,7 +16,7 @@ const PricingCards = () => {
       <Navbar />
 
       <div className="codepen_page font-poppins">
-        <p className="codepen_brief bg-sky-200 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
+        <p className="codepen_brief bg-sky-200 text-blue-700 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
           Have cool product (Not having? believe you have) but not sure how can
           you sell/ market those pricings. Our developers have designed the best
           pricing templates, Just tweak the text and you are good to go 💰

pages/components/store_buttons.js

@@ -15,7 +15,7 @@ const Forms = () => {
       </Head>
       <Navbar />
       <div className="codepen_page font-poppins">
-        <p className="codepen_brief bg-sky-200 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
+        <p className="codepen_brief bg-sky-200 text-blue-700 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
           These components can be used in footer and contact pages to showcase
           your social/ company cards 😎
         </p>

pages/components/testimonial_card.js

@@ -15,7 +15,7 @@ const TestimonialCards = () => {
       </Head>
       <Navbar />
       <div className="codepen_page font-poppins">
-        <p className="codepen_brief bg-sky-200 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
+        <p className="codepen_brief bg-sky-200 text-blue-700 md:mx-44 mx-4 px-4 mb-12 text-center py-4 rounded-2xl">
           Still Guessing how can you showcase your testimonials(You do have 🤪).
           Dont worry if don&apos;t have testimonials or have no idea how to
           design it, click this card