diff --git a/dist/tailshape.css b/dist/tailshape.css
index 2a3ba60..c931d89 100755
--- a/dist/tailshape.css
+++ b/dist/tailshape.css
@@ -2074,9 +2074,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-red-800 {
+.bg-cyan-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
+  background-color: rgb(165 243 252 / var(--tw-bg-opacity));
+}
+
+.bg-green-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
 }
 
 .bg-gray-50 {
@@ -2208,11 +2213,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));
 }
 
-.bg-green-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
-}
-
 .bg-indigo-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(67 56 202 / var(--tw-bg-opacity));
@@ -2303,21 +2303,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: rgb(96 165 250 / var(--tw-bg-opacity));
 }
 
-.bg-cyan-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(21 94 117 / var(--tw-bg-opacity));
-}
-
-.bg-cyan-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(34 211 238 / var(--tw-bg-opacity));
-}
-
-.bg-cyan-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(165 243 252 / var(--tw-bg-opacity));
-}
-
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -5240,6 +5225,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     flex-direction: row;
   }
 
+  .sm\:flex-col {
+    flex-direction: column;
+  }
+
+  .sm\:flex-wrap {
+    flex-wrap: wrap;
+  }
+
   .sm\:items-start {
     align-items: flex-start;
   }
@@ -5536,6 +5529,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     margin-right: 0.25rem;
   }
 
+  .md\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .md\:mr-2 {
     margin-right: 0.5rem;
   }
@@ -5772,6 +5770,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     max-width: 72rem;
   }
 
+  .md\:max-w-7xl {
+    max-width: 80rem;
+  }
+
   .md\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
@@ -5972,6 +5974,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding: 0px;
   }
 
+  .md\:p-4 {
+    padding: 1rem;
+  }
+
   .md\:px-24 {
     padding-left: 6rem;
     padding-right: 6rem;
diff --git a/public/componets/accordion/3_accordion.html b/public/componets/accordion/3_accordion.html
index 2575f3b..b600625 100644
--- a/public/componets/accordion/3_accordion.html
+++ b/public/componets/accordion/3_accordion.html
@@ -29,9 +29,9 @@
     
         <div class="mx-auto text-gray-600 rounded-lg shadow-md dark:bg-gray-800 max-w-lg">
             <ul class="w-full transition ">
-                <li aria-expanded="true" class="border-b border-gray-200 group" v-for="i in 5">
+                <li aria-expanded="true" class="border-b border-gray-200 group bg-green-400">
 
-                    <button class="flex w-full justify-center py-2 px-2 bg-gray-100 hover:bg-gray-200">
+                    <button class="flex w-full justify-center py-2 px-2 ">
                         What is term?  
                         <span class="">   
                             <svg class="h-6 fill-current text-gray-500 transform -rotate-90" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"></path></svg>
@@ -46,7 +46,7 @@
    
         <div class=" max-w-lg mx-auto text-gray-600 rounded-lg shadow-md dark:bg-gray-800">
             <ul class="w-full transition ">
-                <li aria-expanded="true" class="border-b border-gray-200 group" v-for="i in 5">
+                <li aria-expanded="true" class="border-b border-gray-200 group" >
 
                     <button class="flex w-full justify-center py-2 px-2 bg-gray-100 hover:bg-gray-200">
                         What is term?  
@@ -63,7 +63,7 @@
    
         <div class="max-w-lg mx-auto text-gray-600 rounded-lg shadow-md dark:bg-gray-800">
             <ul class="w-full transition ">
-                <li aria-expanded="true" class="border-b border-gray-200 group" v-for="i in 5">
+                <li aria-expanded="true" class="border-b border-gray-200 group">
 
                     <button class="flex w-full justify-center py-2 px-2 bg-gray-100 hover:bg-gray-200">
                         What is term?  
diff --git a/public/componets/navs_headers/4_header.html b/public/componets/navs_headers/4_header.html
index d31a0bc..6fa6bc5 100644
--- a/public/componets/navs_headers/4_header.html
+++ b/public/componets/navs_headers/4_header.html
@@ -43,7 +43,7 @@
         </header>
         <!-- Header Menu Center -->
         <header class="w-full mt-5 text-gray-700 bg-white dark:bg-gray-800 border-t border-gray-100 shadow-sm body-font">
-            <div class="container flex flex-col items-start justify-between p-6 mx-auto md:flex-row">
+            <div class="container flex flex-col flex-wrap items-center justify-between  p-6 mx-auto md:flex-row">
                 <a class="flex items-center mb-4 font-medium text-gray-900 title-font md:mb-0">
                     <svg class="w-auto h-5 text-gray-900 dark:text-gray-300 fill-current" viewBox="0 0 202 69"
                         xmlns="http://www.w3.org/2000/svg">
@@ -51,7 +51,7 @@
                             d="M57.44.672s6.656 1.872 6.656 5.72c0 0-1.56 2.6-3.744 6.552 8.424 1.248 16.744 1.248 23.816-1.976-1.352 7.904-12.688 8.008-26.208 6.136-7.696 13.624-19.656 36.192-19.656 42.848 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C56.608 53.088 42.152 69 36.432 69c-4.472 0-8.216-5.928-8.216-10.4 0-6.552 11.752-28.08 20.28-42.952-9.984-1.664-20.176-3.64-27.976-3.848-13.936 0-16.64 3.536-17.576 6.032-.104.312-.52.52-.832.312-3.744-7.072-1.456-14.56 14.144-14.56 9.36 0 22.048 4.576 34.944 7.592C54.736 5.04 57.44.672 57.44.672zm46.124 41.08c1.144-1.456 4.264.728 3.016 2.392C100.236 53.088 85.78 69 80.06 69c-4.576 0-8.32-5.928-8.32-10.4v-.208C67.58 64.32 63.524 69 61.34 69c-4.472 0-8.944-4.992-8.944-11.856 0-10.608 15.704-33.072 24.96-33.072 4.992 0 7.384 2.392 8.528 4.576l2.6-4.576s6.656 1.976 6.656 5.824c0 0-13.312 24.336-13.312 30.056 0 .208 0 .624.52.624 4.472 0 17.888-14.352 21.216-18.824zm-40.56 18.72c2.184 0 11.752-13.312 17.368-22.048l4.16-7.488c-8.008-7.904-27.248 29.536-21.528 29.536zm57.564-38.168c-2.184 0-4.992-2.808-4.992-4.784 0-2.912 5.824-14.872 7.28-14.872 2.6 0 6.136 2.808 6.136 6.344 0 2.08-7.176 12.064-8.424 13.312zm-17.68 46.592c-4.472 0-8.216-5.928-8.216-10.4 0-6.656 16.744-34.528 16.744-34.528s6.552 1.976 6.552 5.824c0 0-13.312 24.336-13.312 30.056 0 .208.104.624.624.624 4.472 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392-6.448 8.944-20.904 24.856-26.624 24.856zM147.244.672s6.656 1.872 6.656 5.72c0 0-25.792 43.784-25.792 53.56 0 .416.208.624.52.624 4.576 0 17.888-14.352 21.112-18.824 1.144-1.456 4.264.728 3.12 2.392C146.412 53.088 131.956 69 126.236 69c-4.472 0-8.216-5.928-8.216-10.4 0-10.4 29.224-57.928 29.224-57.928zM169.7 60.16c3.848-2.392 7.904-6.864 10.816-10.92 6.656-9.464 11.544-20.696 10.504-27.352-.312-3.432-.104-4.056 3.12-2.704 5.2 2.392 11.336 8.632 2.184 22.88-5.2 8.008-12.48 15.288-19.344 19.76-2.704 1.768-6.344 3.328-9.984 4.16-.52.416-1.04.728-1.456.936-1.872 1.352-4.264 2.08-7.592 2.08-14.664 0-16.848-12.272-16.848-16.016 0-2.392 3.224-4.68 4.784-3.744.208.104.312.416.312.624 0 2.808 1.872 13.104 9.984 13.104 7.904 0 3.432-18.304 2.288-27.144-1.456 2.288-3.432 4.992-5.616 8.32-2.6 3.744-5.72 1.456-4.784 0 5.824-8.424 9.152-13.832 11.856-18.616 1.248-2.08 3.328-3.328 6.448-3.328 2.704 0 5.824 3.016 6.864 4.784.312.52 0 1.04-.52 1.144a5.44 5.44 0 00-4.368 5.408c0 6.968 2.6 17.16 1.664 24.856l-.312 1.768z"
                             fill-rule="nonzero" /></svg>
                 </a>
-                <nav class="flex flex-wrap items-center dark:text-gray-300 justify-center pl-24 text-base md:ml-auto md:mr-auto">
+                <nav class="flex flex-wrap items-center dark:text-gray-300 justify-center text-base md:ml-auto md:mr-auto">
                     <a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">Home</a>
                     <a href="#_" class="mr-5 font-medium hover:text-gray-900 dark:hover:text-gray-500">About</a>
                     <a href="#_" class="font-medium hover:text-gray-900 dark:hover:text-gray-500">Contact</a>
@@ -67,7 +67,7 @@
         </header>
         <!-- Header Menu Right -->
         <header class="w-full mt-5 text-gray-700 bg-white dark:bg-gray-800 shadow-sm body-font">
-            <div class="container flex flex-col items-start p-6 mx-auto md:flex-row">
+            <div class="container flex flex-col items-center  sm:items-center p-6 mx-auto md:flex-row">
                 <a class="flex items-center mb-4 font-medium text-gray-900 title-font md:mb-0">
                     <svg class="w-auto h-5 text-gray-900 dark:text-gray-300 fill-current" viewBox="0 0 202 69"
                         xmlns="http://www.w3.org/2000/svg">
@@ -91,7 +91,7 @@
         </header>
         <!-- Header Menu Left -->
         <header class="w-full mt-5 text-gray-700 bg-white dark:bg-gray-800 border-t border-gray-100 shadow-sm body-font">
-            <div class="container flex flex-col items-start justify-between p-6 mx-auto md:flex-row">
+            <div class="container flex flex-col items-center justify-between  p-6 mx-auto md:flex-row">
                 <a class="flex items-center mb-4 font-medium text-gray-900  title-font md:mb-0">
                     <svg class="w-auto h-5 text-gray-900 dark:text-gray-300 fill-current" viewBox="0 0 202 69"
                         xmlns="http://www.w3.org/2000/svg">
diff --git a/public/componets/navs_headers/5_header.html b/public/componets/navs_headers/5_header.html
index e69de29..bb900a8 100644
--- a/public/componets/navs_headers/5_header.html
+++ b/public/componets/navs_headers/5_header.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../../../dist/tailshape.css">
+    <title>Header 5</title>
+</head>
+<body>
+    
+    
+    <!-- header 5 start -->
+        
+    <section class="section_divider">
+        <div>Header 5</div>
+    </section>
+    <header class=" bg-white dark:bg-gray-800 shadow">
+        <div class="flex items-center justify-between p-4 mx-auto max-w-7xl">
+          <span class="inline-block w-32 p-3 bg-gray-400 dark:ring-2 dark:rign-sky-300 dark:bg-gray-700 rounded-lg text-center text-white"> Logo </span>
+          <button class="p-2 rounded bg-gray-300 text-cyan-800 font-semibold dark:text-cyan-600">Contact Us</button>
+        </div>
+    </header>
+
+<!-- header 5 end -->
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/navs_headers/6_header.html b/public/componets/navs_headers/6_header.html
new file mode 100644
index 0000000..a4150d4
--- /dev/null
+++ b/public/componets/navs_headers/6_header.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../../../dist/tailshape.css">
+    <title>Header 6</title>
+</head>
+<body>
+    
+    
+    <!-- header 6 start -->
+    
+    <section class="section_divider">
+        <div>Header 6</div>
+    </section>
+    <header class="z-30 w-full px-2 py-4 bg-white sm:px-4 dark:bg-gray-800">
+        <div class="flex items-center justify-between mx-auto max-w-7xl">
+          <a href="/" title="Kutty Home Page" class="flex items-center">
+            <svg class="w-auto h-6 dark:fill-white fill-black" width="86" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 335 93">
+              <path
+                d="M134.71 45.7599c1.32-1.44 2.67-2.94 4.05-4.5 1.44-1.56 2.82-3.09 4.14-4.59 1.32-1.56 2.55-3.03 3.69-4.41 1.2-1.38 2.22-2.58 3.06-3.6h15.93c-3.18 3.66-6.3 7.17-9.36 10.53-3 3.3-6.3 6.72-9.9 10.26 1.8 1.62 3.66 3.57 5.58 5.85 1.92 2.22 3.78 4.53 5.58 6.93 1.8 2.4 3.45 4.8 4.95 7.2 1.5 2.4 2.76 4.59 3.78 6.57h-15.39c-.96-1.56-2.07-3.27-3.33-5.13-1.2-1.92-2.49-3.81-3.87-5.67-1.38-1.92-2.85-3.75-4.41-5.49-1.5-1.74-3-3.21-4.5-4.41v20.7H121.3V8.31991l13.41-2.16V45.7599zM209.35 74.3799c-2.28.66-5.22 1.26-8.82 1.8-3.6.6-7.38.9-11.34.9-4.02 0-7.38-.54-10.08-1.62-2.64-1.08-4.74-2.58-6.3-4.5-1.56-1.98-2.67-4.32-3.33-7.02-.66-2.7-.99-5.67-.99-8.91v-26.37h13.41v24.75c0 4.32.57 7.44 1.71 9.36 1.14 1.92 3.27 2.88 6.39 2.88.96 0 1.98-.03 3.06-.09 1.08-.12 2.04-.24 2.88-.36v-36.54h13.41v45.72zM217.888 16.8699l13.41-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.89 10.44c-1.62.66-3.42 1.23-5.4 1.71-1.98.48-4.41.72-7.29.72-3.66 0-6.69-.48-9.09-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.46-3.96-3.06-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM254.279 16.8699l13.409-2.16v13.95h16.11v11.16h-16.11v16.65c0 2.82.48 5.07 1.44 6.75 1.02 1.68 3.03 2.52 6.03 2.52 1.44 0 2.91-.12 4.41-.36 1.56-.3 2.97-.69 4.23-1.17l1.891 10.44c-1.62.66-3.421 1.23-5.401 1.71s-4.409.72-7.289.72c-3.66 0-6.691-.48-9.091-1.44-2.4-1.02-4.32-2.4-5.76-4.14-1.44-1.8-2.459-3.96-3.059-6.48-.54-2.52-.81-5.31-.81-8.37v-39.78zM334.028 28.6599c-2.7 9.12-5.52 17.67-8.46 25.65-2.94 7.98-6.15 15.72-9.63 23.22-1.26 2.7-2.52 4.98-3.78 6.84-1.26 1.92-2.64 3.48-4.14 4.68-1.5 1.26-3.21 2.16-5.13 2.7-1.86.6-4.05.9-6.57.9-2.1 0-4.05-.21-5.85-.63-1.74-.36-3.18-.78-4.32-1.26l2.34-10.71c1.38.48 2.61.81 3.69.99 1.08.18 2.22.27 3.42.27 2.4 0 4.23-.66 5.49-1.98 1.32-1.26 2.43-3.03 3.33-5.31-3.06-6-6.12-12.72-9.18-20.16-3.06-7.5-5.94-15.9-8.64-25.2h14.22c.6 2.34 1.29 4.89 2.07 7.65.84 2.7 1.71 5.46 2.61 8.28.9 2.76 1.8 5.46 2.7 8.1.96 2.64 1.86 5.04 2.7 7.2.78-2.16 1.59-4.56 2.43-7.2.84-2.64 1.65-5.34 2.43-8.1.84-2.82 1.62-5.58 2.34-8.28.78-2.76 1.47-5.31 2.07-7.65h13.86z"
+                fill=""
+              />
+              <path
+                d="M5.61825.4114C24.3953-2.95442 43.4551 21.1695 51.21 34.8757v29.6906c-4.8347 14.2497-12.952 19.1401-20.8473 19.362-12.7347.358-22.758-14.27-17.6881-25.9574 2.926-6.7451 8.905-10.1655 13.0016-11.2189C5.61473 45.9161.32294 23.2628.01461 7.98884-.05756 4.41366 2.09844 1.04233 5.61825.4114z"
+                fill="#9E58E9"
+              />
+              <path
+                d="M96.8018.4114C78.0247-2.95442 58.9649 21.1695 51.21 34.8757v29.6906c4.8347 14.2497 12.952 19.1401 20.8474 19.362 12.7346.358 22.7579-14.27 17.688-25.9574-2.9259-6.7451-8.905-10.1655-13.0015-11.2189 20.0614-.8359 25.3531-23.4892 25.6611-38.76316.073-3.57518-2.083-6.94651-5.6032-7.57744z"
+                fill="#7629C8"
+              />
+            </svg>
+            <span class="sr-only">Kutty</span>
+          </a>
+          <div class="flex items-center space-x-1">
+            <div class="hidden space-x-1 md:inline-flex mr-5">
+              <a href="#f" class=" rounded-lg  font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Features</a>
+              <a href="#fd" class=" rounded-lg font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Pricing</a>
+              <a href="#f" class=" rounded-lg font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Blog</a>
+              <a href="#f" class=" rounded-lg font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Company</a>
+              <a href="#f" class=" rounded-lg font-medium dark:text-cyan-300 dark:hover:text-gray-800 hover:bg-gray-300 focus:bg-gray-300 focus:ring-2 focus:ring-blue-500 transition p-1 text-center text-xs">Sign in</a>
+            </div>
+            <a href="#d" class="p-1 rounded ring-2 bg-blue-600 text-white text-sm hover:bg-blue-700">Get Started</a>
+            <div class="inline-flex md:hidden" x-data="{ open: false }">
+              <button class="flex-none px-2 btn btn-link btn-sm" @click="open = true">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                  class="w-5 h-5"
+                >
+                  <line x1="3" y1="12" x2="21" y2="12"></line>
+                  <line x1="3" y1="6" x2="21" y2="6"></line>
+                  <line x1="3" y1="18" x2="21" y2="18"></line>
+                </svg>
+                <span class="sr-only">Open Menu</span>
+              </button>
+              <div class="absolute top-0 left-0 right-0 z-50 flex flex-col p-2 pb-4 m-2 space-y-3 bg-white rounded shadow" x-show.transition="open" @click.away="open = false" x-cloak>
+                <button class="self-end flex-none px-2 ml-2 btn btn-link btn-icon" @click="open = false">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                  </svg>
+                  <span class="sr-only">Close Menu</span>
+                </button>
+                <a href="#" class="w-full font-semibold hover:bg-gray-600">Features</a>
+                <a href="#" class="w-full btn btn-link">Pricing</a>
+                <a href="#" class="w-full btn btn-link">Blog</a>
+                <a href="#" class="w-full btn btn-link">Company</a>
+                <a href="#" class="w-full btn btn-link">Sign in</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+
+<!-- header 6 end -->
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/navs_headers/7_header.html b/public/componets/navs_headers/7_header.html
new file mode 100644
index 0000000..f354276
--- /dev/null
+++ b/public/componets/navs_headers/7_header.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../../../dist/tailshape.css">
+    <title>Header 7</title>
+</head>
+<body>
+    
+    
+
+    <!-- header 7 start -->
+    <section class="section_divider">
+        <div>Header 7</div>
+      </section>
+      <section class=" dark:bg-gray-800 ">
+  
+        <div class="px-4 py-6 mx-auto lg:py-8 sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
+          <div class="relative flex items-center justify-between lg:justify-center lg:space-x-16">
+            <ul class="flex items-center space-x-8 lg:flex">
+              <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Product</a></li>
+              <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Features</a></li>
+              <li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Pricing</a></li>
+            </ul>
+            <a href="#" aria-label="Company" title="Company" class="inline-flex items-center">
+              <svg class="w-8 text-purple-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+                <rect x="3" y="1" width="7" height="12"></rect>
+                <rect x="3" y="17" width="7" height="6"></rect>
+                <rect x="14" y="1" width="7" height="6"></rect>
+                <rect x="14" y="11" width="7" height="12"></rect>
+              </svg>
+              <span class="ml-2 text-xl font-bold tracking-wide dark:text-gray-300 text-gray-800 uppercase">Company</span>
+            </a>
+            <ul class="flex items-center space-x-8 lg:flex">
+              <li><a href="#" aria-label="About us" title="About us" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">About us</a></li>
+              <li><a href="#" aria-label="Sign in" title="Sign in" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Sign in</a></li>
+              <li><a href="#" aria-label="Sign up" title="Sign up" class="font-medium tracking-wide dark:text-cyan-500 text-gray-700 transition-colors duration-200 hover:text-purple-400">Sign up</a></li>
+            </ul>
+            <!-- Mobile menu -->
+            <div class="lg:hidden">
+              <button aria-label="Open Menu" title="Open Menu" class="p-2 -mr-1 transition duration-200 rounded focus:outline-none focus:shadow-outline hover:bg-deep-purple-50 focus:bg-deep-purple-50">
+                <svg class="w-5 text-gray-600" viewBox="0 0 24 24">
+                  <path fill="currentColor" d="M23,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path>
+                  <path fill="currentColor" d="M23,6H1C0.4,6,0,5.6,0,5s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,6,23,6z"></path>
+                  <path fill="currentColor" d="M23,20H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,20,23,20z"></path>
+                </svg>
+              </button>
+              <!-- Mobile menu dropdown  -->
+              <div class="absolute top-0 left-0 w-full">
+                <div class="p-5 bg-white border rounded shadow-sm">
+                  <div class="flex items-center justify-between mb-4">
+                    <div>
+                      <a href="#" aria-label="Company" title="Company" class="inline-flex items-center">
+                        <svg class="w-8 text-deep-purple-accent-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+                          <rect x="3" y="1" width="7" height="12"></rect>
+                          <rect x="3" y="17" width="7" height="6"></rect>
+                          <rect x="14" y="1" width="7" height="6"></rect>
+                          <rect x="14" y="11" width="7" height="12"></rect>
+                        </svg>
+                        <span class="ml-2 text-xl font-bold tracking-wide text-gray-800 uppercase">Company</span>
+                      </a>
+                    </div>
+                    <div>
+                      <button aria-label="Close Menu" title="Close Menu" class="p-2 -mt-2 -mr-2 transition duration-200 rounded hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
+                        <svg class="w-5 text-gray-600" viewBox="0 0 24 24">
+                          <path
+                            fill="currentColor"
+                            d="M19.7,4.3c-0.4-0.4-1-0.4-1.4,0L12,10.6L5.7,4.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l6.3,6.3l-6.3,6.3 c-0.4,0.4-0.4,1,0,1.4C4.5,19.9,4.7,20,5,20s0.5-0.1,0.7-0.3l6.3-6.3l6.3,6.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L13.4,12l6.3-6.3C20.1,5.3,20.1,4.7,19.7,4.3z"
+                          ></path>
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                  <nav>
+                    <ul class="space-y-4">
+                      <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Product</a></li>
+                      <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Features</a></li>
+                      <li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Pricing</a></li>
+                      <li><a href="#" aria-label="About us" title="About us" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">About us</a></li>
+                      <li><a href="#" aria-label="Sign in" title="Sign in" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Sign in</a></li>
+                      <li>
+                        <a
+                          href="#"
+                          class="inline-flex items-center justify-center w-full h-12 px-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-400 hover:bg-purple-700 focus:shadow-outline focus:outline-none"
+                          aria-label="Sign up"
+                          title="Sign up"
+                        >
+                          Sign up
+                        </a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+            
+            </div>
+          </div>
+        </div>
+      </section>
+      
+      <!-- header 7 end -->
+  
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/componets/navs_headers/8_header.html b/public/componets/navs_headers/8_header.html
new file mode 100644
index 0000000..83bd5bc
--- /dev/null
+++ b/public/componets/navs_headers/8_header.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../../../dist/tailshape.css">
+    <title>Header 8</title>
+</head>
+<body>
+    
+    
+    <!-- header 8 start -->
+    <section class="section_divider">
+        <div>Header 8</div>
+      </section>
+  
+      <div class="bg-gray-900">
+        <div class="px-4 py-5 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
+          <div class="relative flex items-center justify-between">
+            <a href="#" aria-label="Company" title="Company" class="inline-flex items-center">
+              <svg class="w-8 text-teal-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+                <rect x="3" y="1" width="7" height="12"></rect>
+                <rect x="3" y="17" width="7" height="6"></rect>
+                <rect x="14" y="1" width="7" height="6"></rect>
+                <rect x="14" y="11" width="7" height="12"></rect>
+              </svg>
+              <span class="ml-2 text-xl font-bold tracking-wide text-gray-100 uppercase">Company</span>
+            </a>
+            <ul class="flex items-center space-x-8 lg:flex">
+              <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-100 transition-colors duration-200 hover:text-teal-400">Product</a></li>
+              <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-100 transition-colors duration-200 hover:text-teal-400">Features</a></li>
+              <li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide text-gray-100 transition-colors duration-200 hover:text-teal-400">Pricing</a></li>
+              <li><a href="#" aria-label="About us" title="About us" class="font-medium tracking-wide text-gray-100 transition-colors duration-200 hover:text-teal-400">About us</a></li>
+              <li>
+                <a
+                  href="#"
+                  class="inline-flex items-center justify-center h-8 px-4 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-400 hover:bg-purple-700 focus:shadow-outline focus:outline-none"
+                  aria-label="Sign up"
+                  title="Sign up"
+                >
+                  Sign up
+                </a>
+              </li>
+            </ul>
+            <!-- Mobile menu -->
+            <div class="lg:hidden">
+              <button aria-label="Open Menu" title="Open Menu" class="p-2 -mr-1 transition duration-200 rounded focus:outline-none focus:shadow-outline">
+                <svg class="w-5 text-gray-600" viewBox="0 0 24 24">
+                  <path fill="currentColor" d="M23,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path>
+                  <path fill="currentColor" d="M23,6H1C0.4,6,0,5.6,0,5s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,6,23,6z"></path>
+                  <path fill="currentColor" d="M23,20H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,20,23,20z"></path>
+                </svg>
+              </button>
+              <div class="absolute top-0 left-0 w-full">
+                <div class="p-5 bg-white border rounded shadow-sm">
+                  <div class="flex items-center justify-between mb-4">
+                    <div>
+                      <a href="#" aria-label="Company" title="Company" class="inline-flex items-center">
+                        <svg class="w-8 text-deep-purple-accent-400" viewBox="0 0 24 24" stroke-linejoin="round" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke="currentColor" fill="none">
+                          <rect x="3" y="1" width="7" height="12"></rect>
+                          <rect x="3" y="17" width="7" height="6"></rect>
+                          <rect x="14" y="1" width="7" height="6"></rect>
+                          <rect x="14" y="11" width="7" height="12"></rect>
+                        </svg>
+                        <span class="ml-2 text-xl font-bold tracking-wide text-gray-800 uppercase">Company</span>
+                      </a>
+                    </div>
+                    <div>
+                      <button aria-label="Close Menu" title="Close Menu" class="p-2 -mt-2 -mr-2 transition duration-200 rounded hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
+                        <svg class="w-5 text-gray-600" viewBox="0 0 24 24">
+                          <path
+                            fill="currentColor"
+                            d="M19.7,4.3c-0.4-0.4-1-0.4-1.4,0L12,10.6L5.7,4.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l6.3,6.3l-6.3,6.3 c-0.4,0.4-0.4,1,0,1.4C4.5,19.9,4.7,20,5,20s0.5-0.1,0.7-0.3l6.3-6.3l6.3,6.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L13.4,12l6.3-6.3C20.1,5.3,20.1,4.7,19.7,4.3z"
+                          ></path>
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                  <nav>
+                    <ul class="space-y-4">
+                      <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Product</a></li>
+                      <li><a href="#" aria-label="Our product" title="Our product" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Features</a></li>
+                      <li><a href="#" aria-label="Product pricing" title="Product pricing" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">Pricing</a></li>
+                      <li><a href="#" aria-label="About us" title="About us" class="font-medium tracking-wide text-gray-700 transition-colors duration-200 hover:text-purple-400">About us</a></li>
+                      <li>
+                        <a
+                        href="#"
+                          class="inline-flex items-center justify-center w-full h-12 px-6 font-medium tracking-wide text-white transition duration-200 rounded shadow-md bg-purple-400 hover:bg-purple-700 focus:shadow-outline focus:outline-none"
+                          aria-label="Sign up"
+                          title="Sign up"
+                        >
+                          Sign up
+                        </a>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              </div>
+             
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      
+      <!-- header 8 end -->
+  
+      
+
+
+</body>
+</html>
\ No newline at end of file