Custom Class

Author: pktcodes

src/components/Hero.jsx

@@ -4,7 +4,7 @@ import { socialLinks } from "../data";
 const Hero = () => {
   return (
     <section className="bg-emerald-100">
-      <div className="mx-auto grid max-w-7xl gap-y-8 px-8 py-24 md:grid-cols-2 md:items-center">
+      <div className="align-element grid gap-y-8 py-24 md:grid-cols-2 md:items-center">
         {/* Info */}
         <article>
           <h1 className="text-7xl font-bold tracking-wider">{"I'm Praveen"}</h1>

src/components/Navbar.jsx

@@ -3,7 +3,7 @@ import { navLinks } from "../data";
 const Navbar = () => {
   return (
     <nav className="bg-emerald-100">
-      <div className="mx-auto flex max-w-7xl flex-col px-8 py-4 sm:flex-row sm:items-center sm:gap-x-16 sm:py-8">
+      <div className="align-element flex flex-col py-4 sm:flex-row sm:items-center sm:gap-x-16 sm:py-8">
         <h2 className="text-3xl font-bold">
           Web<span className="text-emerald-600">Dev</span>
         </h2>

src/index.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  .align-element {
+    @apply mx-auto max-w-7xl px-8;
+  }
+}