Mirrors/tailShape
1
0
Fork 0
mirror of https://github.com/istiyakaminsanto/tailShape.git synced 2025-12-17 17:27:01 +00:00
Code Issues Projects Releases Wiki Activity

added some idividual header's

Browse Source
This commit is contained in:
merajjahir
2022-02-23 13:48:45 +06:00
parent 69f2592d8f
commit c0eeffa19d
7 changed files with 387 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/componets/accordion/3_accordion.html
View File

@@ -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?

8
public/componets/navs_headers/4_header.html
View File

@@ -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">

30
public/componets/navs_headers/5_header.html
View File

@@ -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>

100
public/componets/navs_headers/6_header.html Normal file
View File

@@ -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>

108
public/componets/navs_headers/7_header.html Normal file
View File

@@ -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>

113
public/componets/navs_headers/8_header.html Normal file
View File

@@ -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>