Improved on responsivness for the header

src/components/Header/TopHeader.tsx

@@ -3,19 +3,36 @@ import styles from "./header.module.css";
 
 const TopHeader = () => {
   return (
-    <div className={styles.top_header}>
-      <div className="container flex justify-between w-full text-white font-medium">
-        <ul className="flex gap-8 items-center px-4">
-          {top_header_data.map(({ id, name }) => (
-            <li key={id}>{name}</li>
+    <>
+      <div className="flex flex-col sm:hidden bg-[#5c2684]">
+        <ul className="flex flex-col justify-center items-center py-[0.4rem] text-[13px] font-light">
+          {["Open An Account", "Internet Banking", "Contact Us"].map((text) => (
+            <li key={text}>
+              <a href="#" className={`p-[10px] cursor-pointer text-white`}>
+                {text}
+              </a>
+            </li>
           ))}
         </ul>
-        <div className="flex gap-2">
-          <p className="uppercase">Today's Share price:</p>
-          <span className="text-[#F8B51F]">$ 4.00</span>
+      </div>
+      <div className={styles.top_header}>
+        <div className="containerMode flex justify-between w-full text-white font-medium text-[11px] md:text-[13px]">
+          <ul className="flex items-center py-[0.4rem]">
+            {top_header_data.map(({ id, name }) => (
+              <li key={id}>
+                <a href="#" className={`py-[11px] px-[15px]`}>
+                  {name}
+                </a>
+              </li>
+            ))}
+          </ul>
+          <div className="hidden sm:flex gap-2 items-center bg-[#74449E] px-2 text-[11px] md:text-[13px]">
+            <p className="uppercase">Today's Share price:</p>
+            <span className="text-[#F8B51F] text-base md:text-lg">$ 4.00</span>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };