changes

components/Navbar/Navbar.module.css

@@ -1,3 +1,3 @@
-.container {
+.root {
   @apply flex justify-between items-center flex-row px-6 h-20 relative border-gray-100 border-b;
 }

components/Navbar/Navbar.tsx

@@ -11,22 +11,20 @@ interface Props {
 const Navbar: FunctionComponent<Props> = ({ className }) => {
   const rootClassName = cn(s.root, className);
   return (
-    <div className={rootClassName}>
-      <Container className={s.container}>
-        <Logo />
-        <div className="flex flex-row h-full content-center flex-1">
-          <Searchbar />
-          <nav className="hidden flex-row items-center px-3 lg:flex">
-            <a className="pr-4">All</a>
-            <a className="pr-4">Clothes</a>
-            <a>Accesories</a>
-          </nav>
-        </div>
-        <nav>
-          <Avatar />
+    <Container className={rootClassName}>
+      <Logo />
+      <div className="flex flex-row h-full content-center flex-1">
+        <Searchbar />
+        <nav className="hidden flex-row items-center px-3 lg:flex">
+          <a className="pr-4">All</a>
+          <a className="pr-4">Clothes</a>
+          <a>Accesories</a>
         </nav>
-      </Container>
-    </div>
+      </div>
+      <nav>
+        <Avatar />
+      </nav>
+    </Container>
   );
 };
 

pages/index.tsx

@@ -11,9 +11,9 @@ export default function Home() {
       <Navbar />
       <Container className="px-4 py-5 h-screen">
         <div className="grid grid-cols-1 h-full lg:grid-cols-3 lg:grid-rows-2">
-          <div className="lg:row-span-2 lg:col-span-2 bg-indigo-700 h-full"></div>
+          <div className="lg:row-span-2 lg:col-span-2 bg-violet h-full"></div>
           <div className="lg:row-span-1 lg:col-span-1 bg-black h-full"></div>
-          <div className="lg:row-span-1 lg:col-span-1 bg-red-500"></div>
+          <div className="lg:row-span-1 lg:col-span-1 bg-pink"></div>
         </div>
       </Container>
       <Footer></Footer>