header completed

Author: snehalgadge

04_REACT/ecommerce-app/src/components/Header.js

@@ -74,9 +74,41 @@ const Header = () => {
         </div>
       </div>
     </header>
-    <header className='py-3 bg-[#232f3e]'>
-      <div className='flex text-white'>
-      <div className='w-[30%]'></div>
+    <header className='py-3 bg-[#232f3e] flex justify-evenly text-white'>
+      <div className='flex justify-evenly  w-[30%] text-white '>
+      <div className='ml-20'><img src='images/menu.svg' alt='menu' className='h-[30px] w-[30px]'/></div>
+      <div className='dropdown flex w-[65%] justify-between relative inline-block text-left '>
+        <button 
+         id="dropdownDefaultButton" 
+         data-dropdown-toggle="dropdown" 
+         class="text-white bg-[#232f3e] uppercase hover:bg-[#232f3e] focus:outline-none  font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center " 
+         type="button">Shop Categories 
+        </button>
+        <svg class="w-4 h-4 mr-5 mt-3" 
+          aria-hidden="true" fill="none" 
+          stroke="currentColor" 
+          viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" 
+          stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+       <div id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
+      <li>
+        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
+      </li>
+      <li>
+        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
+      </li>
+      <li>
+        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
+      </li>
+      <li>
+        <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Sign out</a>
+      </li>
+    </ul>
+</div>
+</div>
+<div className='h-[100%]  bg-white ring-1 ring-gray-100 shadow-2xl'></div>
+      </div>
         <div className='flex justify-start items-center w-[70%]'>
           <NavLink to="/"
           className='px-4 text-[14px] leading-[14px] tracking-[0.3] font-[400] uppercase hover:text-gray-300'>
@@ -91,7 +123,6 @@ const Header = () => {
           className='px-4 text-[14px] leading-[14px] tracking-[0.3] font-[400] uppercase hover:text-gray-300'>
           Contact</NavLink>
         </div>
-      </div>
     </header>
     </>
   )