Responsive Tailwind CSS Hero Section and Adaptive Navbar
Responsive Tailwind CSS Hero Section and Adaptive Navbar
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Tailwind CSS Hero Section and Adaptive Navbar</title>
<!-- google font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<style>
body {
font-family: Poppins, sans-serif;
}
</style>
</head>
<body class="bg-[#f8f9ff] max-w-[1920px] mx-auto">
<div class="bg-[#f8f9ff] text-black text-[15px]">
<header class="py-4 px-4 sm:px-10 z-50 min-h-[70px]">
<div class="relative flex flex-wrap items-center gap-4">
<a href="javascript:void(0)"><img src="https://docsallover.com/static/images/logo-landscape.png" alt="logo" class="w-36" />
</a>
<div id="collapseMenu"
class="max-lg:hidden lg:!block max-lg:fixed max-lg:before:fixed max-lg:before:bg-black max-lg:before:opacity-50 max-lg:before:inset-0 max-lg:before:z-50 z-50">
<button id="toggleClose" class="lg:hidden fixed top-2 right-4 z-[100] rounded-full bg-white p-3">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 fill-black" viewBox="0 0 320.591 320.591">
<path
d="M30.391 318.583a30.37 30.37 0 0 1-21.56-7.288c-11.774-11.844-11.774-30.973 0-42.817L266.643 10.665c12.246-11.459 31.462-10.822 42.921 1.424 10.362 11.074 10.966 28.095 1.414 39.875L51.647 311.295a30.366 30.366 0 0 1-21.256 7.288z"
data-original="#000000"></path>
<path
d="M287.9 318.583a30.37 30.37 0 0 1-21.257-8.806L8.83 51.963C-2.078 39.225-.595 20.055 12.143 9.146c11.369-9.736 28.136-9.736 39.504 0l259.331 257.813c12.243 11.462 12.876 30.679 1.414 42.922-.456.487-.927.958-1.414 1.414a30.368 30.368 0 0 1-23.078 7.288z"
data-original="#000000"></path>
</svg>
</button>
<ul
class="lg:ml-12 lg:flex gap-x-6 max-lg:space-y-3 max-lg:fixed max-lg:bg-white max-lg:w-1/2 max-lg:min-w-[300px] max-lg:top-0 max-lg:left-0 max-lg:p-6 max-lg:h-full max-lg:shadow-md max-lg:overflow-auto z-50">
<li class="mb-6 hidden max-lg:block">
<a href="javascript:void(0)"><img src="https://docsallover.com/static/images/logo-landscape.png" alt="logo" class="w-36" />
</a>
</li>
<li class="max-lg:border-b max-lg:py-3 px-3">
<a href="javascript:void(0)"
class="hover:text-blue-600 text-blue-600 block font-semibold transition-all">Home</a>
</li>
<li class="max-lg:border-b max-lg:py-3 px-3"><a href="javascript:void(0)"
class="hover:text-blue-600 block font-semibold transition-all">Team</a>
</li>
<li class="max-lg:border-b max-lg:py-3 px-3"><a href="javascript:void(0)"
class="hover:text-blue-600 block font-semibold transition-all">Feature</a>
</li>
<li class="max-lg:border-b max-lg:py-3 px-3"><a href="javascript:void(0)"
class="hover:text-blue-600 block font-semibold transition-all">Blog</a>
</li>
<li class="max-lg:border-b max-lg:py-3 px-3"><a href="javascript:void(0)"
class="hover:text-blue-600 block font-semibold transition-all">About</a>
</li>
</ul>
</div>
<div class="flex ml-auto">
<button class="px-6 py-3 rounded-xl text-white bg-blue-600 transition-all hover:bg-blue-500">Login</button>
<button id="toggleOpen" class="lg:hidden ml-7">
<svg class="w-7 h-7" fill="#000" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"></path>
</svg>
</button>
</div>
</div>
</header>
<div class="relative">
<div class="px-4 sm:px-10">
<div class="mt-16 max-w-4xl mx-auto text-center relative z-10">
<h1 class="md:text-6xl text-4xl font-extrabold mb-6 md:!leading-[75px]">Bulid your website faster and easier with ready made code snippets.</h1>
<p class="text-base">Your one-stop solution for a curated collection of ready-to-use HTML, CSS, and JavaScript code snippets. Quickly find and implement code snippets to streamline your web development process.</p>
<div class="mt-10">
<button class="px-6 py-3 rounded-xl text-white bg-blue-600 transition-all hover:bg-blue-500">Get started
today</button>
</div>
</div>
<hr class="my-12 border-gray-300" />
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 items-center">
<svg id="logo-a" class="w-28 mx-auto" width="132" height="35" viewBox="0 0 132 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M38.51 11.26H41.72V24.26H38.51V11.26ZM43 19.37C43 16.15 45 14.22 48 14.22C51 14.22 53 16.15 53 19.37C53 22.59 51.07 24.54 48 24.54C44.93 24.54 43 22.66 43 19.37ZM49.82 19.37C49.82 17.6 49.13 16.56 48.03 16.56C46.93 16.56 46.25 17.56 46.25 19.37C46.25 21.18 46.93 22.17 48.03 22.17C49.13 22.17 49.84 21.18 49.84 19.38L49.82 19.37ZM54.28 24.93H57.38C57.5211 25.2637 57.7676 25.5422 58.0818 25.7227C58.396 25.9033 58.7606 25.9761 59.12 25.93C60.35 25.93 60.99 25.27 60.99 24.29V22.49H61C60.7351 23.0505 60.3067 23.5176 59.7713 23.83C59.2358 24.1424 58.6183 24.2853 58 24.24C55.65 24.24 54.09 22.45 54.09 19.37C54.09 16.29 55.58 14.37 58.09 14.37C58.7241 14.3361 59.3532 14.4996 59.8904 14.8381C60.4277 15.1766 60.8468 15.6734 61.09 16.26H61V14.45H64.18V24.19C64.18 26.54 62.1 28.01 59.04 28.01C56.26 28 54.48 26.73 54.3 24.94L54.28 24.93ZM61 19.37C61 17.8 60.28 16.81 59.14 16.81C58 16.81 57.3 17.81 57.3 19.37C57.3 20.93 57.99 21.85 59.14 21.85C60.29 21.85 61 21 61 19.37ZM65.45 19.37C65.45 16.15 67.45 14.22 70.45 14.22C73.45 14.22 75.45 16.15 75.45 19.37C75.45 22.59 73.51 24.54 70.45 24.54C67.39 24.54 65.47 22.66 65.47 19.37H65.45ZM72.27 19.37C72.27 17.6 71.57 16.56 70.48 16.56C69.39 16.56 68.7 17.56 68.7 19.37C68.7 21.18 69.38 22.17 70.48 22.17C71.58 22.17 72.29 21.18 72.29 19.38L72.27 19.37ZM76.75 12.08C76.736 11.753 76.8202 11.4293 76.9917 11.1506C77.1632 10.8718 77.4142 10.6508 77.7124 10.5159C78.0106 10.3809 78.3423 10.3383 78.6649 10.3935C78.9875 10.4486 79.2862 10.599 79.5226 10.8253C79.759 11.0517 79.9223 11.3435 79.9915 11.6634C80.0606 11.9833 80.0325 12.3166 79.9107 12.6203C79.7889 12.9241 79.579 13.1845 79.308 13.368C79.037 13.5515 78.7173 13.6497 78.39 13.65C78.1809 13.6553 77.9727 13.619 77.7777 13.5433C77.5827 13.4675 77.4046 13.3537 77.2539 13.2086C77.1032 13.0635 76.9828 12.8899 76.8998 12.6978C76.8167 12.5058 76.7726 12.2992 76.77 12.09L76.75 12.08ZM76.75 14.44H80V24.3H76.8L76.75 14.44ZM91.69 19.37C91.69 22.58 90.25 24.44 87.8 24.44C87.1728 24.4787 86.5488 24.3239 86.0123 23.9967C85.4758 23.6694 85.0527 23.1854 84.8 22.61H84.74V27.47H81.53V14.47H84.72V16.23H84.78C85.024 15.6433 85.443 15.146 85.9798 14.806C86.5167 14.466 87.1453 14.2998 87.78 14.33C90.3 14.31 91.75 16.16 91.75 19.38L91.69 19.37ZM88.42 19.37C88.42 17.81 87.69 16.8 86.56 16.8C85.43 16.8 84.72 17.8 84.71 19.37C84.7 20.94 85.43 21.93 86.56 21.93C87.69 21.93 88.48 21 88.48 19.38L88.42 19.37ZM97.17 14.21C99.86 14.21 101.53 15.48 101.55 17.52H98.62C98.62 16.81 98.03 16.37 97.15 16.37C96.27 16.37 95.85 16.71 95.85 17.22C95.85 17.73 96.22 17.89 96.96 18.04L99.02 18.46C101.02 18.88 101.82 19.68 101.82 21.17C101.82 23.17 99.97 24.53 97.22 24.53C94.47 24.53 92.68 23.21 92.55 21.2H95.66C95.75 21.93 96.33 22.36 97.27 22.36C98.21 22.36 98.65 22.06 98.65 21.53C98.65 21 98.35 20.91 97.58 20.75L95.72 20.36C93.79 19.95 92.78 18.94 92.78 17.43C92.84 15.47 94.52 14.22 97.23 14.22L97.17 14.21ZM112.57 24.29H109.46V22.44H109.4C109.226 23.0571 108.847 23.5964 108.325 23.969C107.803 24.3417 107.17 24.5254 106.53 24.49C106.047 24.5057 105.565 24.4191 105.118 24.2357C104.671 24.0524 104.267 23.7765 103.934 23.4262C103.6 23.0758 103.345 22.6589 103.184 22.2029C103.023 21.7469 102.96 21.2619 103 20.78V14.45H106.21V20.09C106.21 21.25 106.82 21.88 107.82 21.88C108.055 21.8782 108.286 21.8261 108.499 21.7273C108.712 21.6284 108.901 21.485 109.053 21.3068C109.206 21.1286 109.319 20.9197 109.384 20.6943C109.448 20.4688 109.464 20.2321 109.43 20V14.45H112.63L112.57 24.29ZM114.12 14.44H117.24V16.34H117.31C117.482 15.7313 117.852 15.197 118.36 14.8206C118.869 14.4443 119.488 14.2471 120.12 14.26C120.755 14.2048 121.388 14.3884 121.894 14.7749C122.401 15.1614 122.745 15.7231 122.86 16.35H123C123.2 15.7197 123.602 15.1731 124.145 14.7952C124.687 14.4172 125.34 14.2291 126 14.26C126.439 14.2433 126.877 14.3195 127.284 14.4836C127.692 14.6476 128.06 14.8959 128.365 15.2122C128.67 15.5284 128.904 15.9055 129.053 16.3187C129.203 16.7319 129.263 17.1719 129.23 17.61V24.3H126V18.43C126 17.43 125.53 16.87 124.62 16.87C124.418 16.8667 124.218 16.9071 124.033 16.9883C123.848 17.0696 123.684 17.1899 123.55 17.3409C123.416 17.492 123.316 17.6701 123.257 17.8633C123.199 18.0565 123.183 18.26 123.21 18.46V24.3H120.15V18.4C120.15 17.4 119.66 16.87 118.78 16.87C118.576 16.8684 118.374 16.9104 118.188 16.9932C118.001 17.0761 117.835 17.1978 117.699 17.3503C117.564 17.5028 117.463 17.6825 117.403 17.8773C117.342 18.0722 117.324 18.2777 117.35 18.48V24.3H114.14L114.12 14.44Z"
class="ccustom" fill="#394149"></path>
<path
d="M32.16 12.11C32.1601 10.1197 31.5591 8.17576 30.4357 6.53282C29.3123 4.88988 27.7188 3.62453 25.8641 2.90253C24.0094 2.18052 21.9798 2.03552 20.0413 2.48651C18.1027 2.9375 16.3456 3.96346 15 5.43H2.52002V31.77H28.87V19.46C29.9042 18.535 30.7318 17.4023 31.2987 16.1358C31.8656 14.8693 32.1591 13.4976 32.16 12.11V12.11ZM27.09 12.11C27.092 13.0637 26.811 13.9966 26.2826 14.7906C25.7541 15.5845 25.0021 16.2039 24.1215 16.5702C23.2409 16.9366 22.2715 17.0335 21.3358 16.8486C20.4002 16.6638 19.5404 16.2055 18.8653 15.5318C18.1902 14.8581 17.7302 13.9993 17.5434 13.064C17.3566 12.1288 17.4515 11.1591 17.816 10.2778C18.1805 9.39646 18.7983 8.64309 19.5911 8.11302C20.384 7.58295 21.3163 7.30001 22.27 7.3C23.5466 7.3 24.7711 7.80645 25.6747 8.70821C26.5784 9.60997 27.0874 10.8334 27.09 12.11V12.11ZM23.8 26.7H7.59002V10.5H12.53C12.4346 11.0315 12.3844 11.5701 12.38 12.11C12.3827 14.7322 13.4255 17.2462 15.2797 19.1004C17.1338 20.9545 19.6478 21.9974 22.27 22C22.7827 21.9973 23.2943 21.9538 23.8 21.87V26.7Z"
class="ccustom" fill="#394149"></path>
</svg>
<svg id="logo-b" class="w-28 mx-auto" width="132" height="35" viewBox="0 0 132 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M38.51 11.26H41.72V24.26H38.51V11.26ZM43 19.37C43 16.15 45 14.22 48 14.22C51 14.22 53 16.15 53 19.37C53 22.59 51.07 24.54 48 24.54C44.93 24.54 43 22.66 43 19.37ZM49.82 19.37C49.82 17.6 49.13 16.56 48.03 16.56C46.93 16.56 46.25 17.56 46.25 19.37C46.25 21.18 46.93 22.17 48.03 22.17C49.13 22.17 49.84 21.18 49.84 19.38L49.82 19.37ZM54.28 24.93H57.38C57.5211 25.2637 57.7676 25.5422 58.0818 25.7227C58.396 25.9033 58.7606 25.9761 59.12 25.93C60.35 25.93 60.99 25.27 60.99 24.29V22.49H61C60.7351 23.0505 60.3067 23.5176 59.7713 23.83C59.2358 24.1424 58.6183 24.2853 58 24.24C55.65 24.24 54.09 22.45 54.09 19.37C54.09 16.29 55.58 14.37 58.09 14.37C58.7241 14.3361 59.3532 14.4996 59.8904 14.8381C60.4277 15.1766 60.8468 15.6734 61.09 16.26H61V14.45H64.18V24.19C64.18 26.54 62.1 28.01 59.04 28.01C56.26 28 54.48 26.73 54.3 24.94L54.28 24.93ZM61 19.37C61 17.8 60.28 16.81 59.14 16.81C58 16.81 57.3 17.81 57.3 19.37C57.3 20.93 57.99 21.85 59.14 21.85C60.29 21.85 61 21 61 19.37ZM65.45 19.37C65.45 16.15 67.45 14.22 70.45 14.22C73.45 14.22 75.45 16.15 75.45 19.37C75.45 22.59 73.51 24.54 70.45 24.54C67.39 24.54 65.47 22.66 65.47 19.37H65.45ZM72.27 19.37C72.27 17.6 71.57 16.56 70.48 16.56C69.39 16.56 68.7 17.56 68.7 19.37C68.7 21.18 69.38 22.17 70.48 22.17C71.58 22.17 72.29 21.18 72.29 19.38L72.27 19.37ZM76.75 12.08C76.736 11.753 76.8202 11.4293 76.9917 11.1506C77.1632 10.8718 77.4142 10.6508 77.7124 10.5159C78.0106 10.3809 78.3423 10.3383 78.6649 10.3935C78.9875 10.4486 79.2862 10.599 79.5226 10.8253C79.759 11.0517 79.9223 11.3435 79.9915 11.6634C80.0606 11.9833 80.0325 12.3166 79.9107 12.6203C79.7889 12.9241 79.579 13.1845 79.308 13.368C79.037 13.5515 78.7173 13.6497 78.39 13.65C78.1809 13.6553 77.9727 13.619 77.7777 13.5433C77.5827 13.4675 77.4046 13.3537 77.2539 13.2086C77.1032 13.0635 76.9828 12.8899 76.8998 12.6978C76.8167 12.5058 76.7726 12.2992 76.77 12.09L76.75 12.08ZM76.75 14.44H80V24.3H76.8L76.75 14.44ZM91.69 19.37C91.69 22.58 90.25 24.44 87.8 24.44C87.1728 24.4787 86.5488 24.3239 86.0123 23.9967C85.4758 23.6694 85.0527 23.1854 84.8 22.61H84.74V27.47H81.53V14.47H84.72V16.23H84.78C85.024 15.6433 85.443 15.146 85.9798 14.806C86.5167 14.466 87.1453 14.2998 87.78 14.33C90.3 14.31 91.75 16.16 91.75 19.38L91.69 19.37ZM88.42 19.37C88.42 17.81 87.69 16.8 86.56 16.8C85.43 16.8 84.72 17.8 84.71 19.37C84.7 20.94 85.43 21.93 86.56 21.93C87.69 21.93 88.48 21 88.48 19.38L88.42 19.37ZM97.17 14.21C99.86 14.21 101.53 15.48 101.55 17.52H98.62C98.62 16.81 98.03 16.37 97.15 16.37C96.27 16.37 95.85 16.71 95.85 17.22C95.85 17.73 96.22 17.89 96.96 18.04L99.02 18.46C101.02 18.88 101.82 19.68 101.82 21.17C101.82 23.17 99.97 24.53 97.22 24.53C94.47 24.53 92.68 23.21 92.55 21.2H95.66C95.75 21.93 96.33 22.36 97.27 22.36C98.21 22.36 98.65 22.06 98.65 21.53C98.65 21 98.35 20.91 97.58 20.75L95.72 20.36C93.79 19.95 92.78 18.94 92.78 17.43C92.84 15.47 94.52 14.22 97.23 14.22L97.17 14.21ZM112.57 24.29H109.46V22.44H109.4C109.226 23.0571 108.847 23.5964 108.325 23.969C107.803 24.3417 107.17 24.5254 106.53 24.49C106.047 24.5057 105.565 24.4191 105.118 24.2357C104.671 24.0524 104.267 23.7765 103.934 23.4262C103.6 23.0758 103.345 22.6589 103.184 22.2029C103.023 21.7469 102.96 21.2619 103 20.78V14.45H106.21V20.09C106.21 21.25 106.82 21.88 107.82 21.88C108.055 21.8782 108.286 21.8261 108.499 21.7273C108.712 21.6284 108.901 21.485 109.053 21.3068C109.206 21.1286 109.319 20.9197 109.384 20.6943C109.448 20.4688 109.464 20.2321 109.43 20V14.45H112.63L112.57 24.29ZM114.12 14.44H117.24V16.34H117.31C117.482 15.7313 117.852 15.197 118.36 14.8206C118.869 14.4443 119.488 14.2471 120.12 14.26C120.755 14.2048 121.388 14.3884 121.894 14.7749C122.401 15.1614 122.745 15.7231 122.86 16.35H123C123.2 15.7197 123.602 15.1731 124.145 14.7952C124.687 14.4172 125.34 14.2291 126 14.26C126.439 14.2433 126.877 14.3195 127.284 14.4836C127.692 14.6476 128.06 14.8959 128.365 15.2122C128.67 15.5284 128.904 15.9055 129.053 16.3187C129.203 16.7319 129.263 17.1719 129.23 17.61V24.3H126V18.43C126 17.43 125.53 16.87 124.62 16.87C124.418 16.8667 124.218 16.9071 124.033 16.9883C123.848 17.0696 123.684 17.1899 123.55 17.3409C123.416 17.492 123.316 17.6701 123.257 17.8633C123.199 18.0565 123.183 18.26 123.21 18.46V24.3H120.15V18.4C120.15 17.4 119.66 16.87 118.78 16.87C118.576 16.8684 118.374 16.9104 118.188 16.9932C118.001 17.0761 117.835 17.1978 117.699 17.3503C117.564 17.5028 117.463 17.6825 117.403 17.8773C117.342 18.0722 117.324 18.2777 117.35 18.48V24.3H114.14L114.12 14.44Z"
class="ccustom" fill="#394149"></path>
<path
d="M32.16 12.11C32.1601 10.1197 31.5591 8.17576 30.4357 6.53282C29.3123 4.88988 27.7188 3.62453 25.8641 2.90253C24.0094 2.18052 21.9798 2.03552 20.0413 2.48651C18.1027 2.9375 16.3456 3.96346 15 5.43H2.52002V31.77H28.87V19.46C29.9042 18.535 30.7318 17.4023 31.2987 16.1358C31.8656 14.8693 32.1591 13.4976 32.16 12.11V12.11ZM27.09 12.11C27.092 13.0637 26.811 13.9966 26.2826 14.7906C25.7541 15.5845 25.0021 16.2039 24.1215 16.5702C23.2409 16.9366 22.2715 17.0335 21.3358 16.8486C20.4002 16.6638 19.5404 16.2055 18.8653 15.5318C18.1902 14.8581 17.7302 13.9993 17.5434 13.064C17.3566 12.1288 17.4515 11.1591 17.816 10.2778C18.1805 9.39646 18.7983 8.64309 19.5911 8.11302C20.384 7.58295 21.3163 7.30001 22.27 7.3C23.5466 7.3 24.7711 7.80645 25.6747 8.70821C26.5784 9.60997 27.0874 10.8334 27.09 12.11V12.11ZM23.8 26.7H7.59002V10.5H12.53C12.4346 11.0315 12.3844 11.5701 12.38 12.11C12.3827 14.7322 13.4255 17.2462 15.2797 19.1004C17.1338 20.9545 19.6478 21.9974 22.27 22C22.7827 21.9973 23.2943 21.9538 23.8 21.87V26.7Z"
class="ccustom" fill="#394149"></path>
</svg>
<svg id="logo-c" class="w-28 mx-auto" width="132" height="35" viewBox="0 0 132 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M38.51 11.26H41.72V24.26H38.51V11.26ZM43 19.37C43 16.15 45 14.22 48 14.22C51 14.22 53 16.15 53 19.37C53 22.59 51.07 24.54 48 24.54C44.93 24.54 43 22.66 43 19.37ZM49.82 19.37C49.82 17.6 49.13 16.56 48.03 16.56C46.93 16.56 46.25 17.56 46.25 19.37C46.25 21.18 46.93 22.17 48.03 22.17C49.13 22.17 49.84 21.18 49.84 19.38L49.82 19.37ZM54.28 24.93H57.38C57.5211 25.2637 57.7676 25.5422 58.0818 25.7227C58.396 25.9033 58.7606 25.9761 59.12 25.93C60.35 25.93 60.99 25.27 60.99 24.29V22.49H61C60.7351 23.0505 60.3067 23.5176 59.7713 23.83C59.2358 24.1424 58.6183 24.2853 58 24.24C55.65 24.24 54.09 22.45 54.09 19.37C54.09 16.29 55.58 14.37 58.09 14.37C58.7241 14.3361 59.3532 14.4996 59.8904 14.8381C60.4277 15.1766 60.8468 15.6734 61.09 16.26H61V14.45H64.18V24.19C64.18 26.54 62.1 28.01 59.04 28.01C56.26 28 54.48 26.73 54.3 24.94L54.28 24.93ZM61 19.37C61 17.8 60.28 16.81 59.14 16.81C58 16.81 57.3 17.81 57.3 19.37C57.3 20.93 57.99 21.85 59.14 21.85C60.29 21.85 61 21 61 19.37ZM65.45 19.37C65.45 16.15 67.45 14.22 70.45 14.22C73.45 14.22 75.45 16.15 75.45 19.37C75.45 22.59 73.51 24.54 70.45 24.54C67.39 24.54 65.47 22.66 65.47 19.37H65.45ZM72.27 19.37C72.27 17.6 71.57 16.56 70.48 16.56C69.39 16.56 68.7 17.56 68.7 19.37C68.7 21.18 69.38 22.17 70.48 22.17C71.58 22.17 72.29 21.18 72.29 19.38L72.27 19.37ZM76.75 12.08C76.736 11.753 76.8202 11.4293 76.9917 11.1506C77.1632 10.8718 77.4142 10.6508 77.7124 10.5159C78.0106 10.3809 78.3423 10.3383 78.6649 10.3935C78.9875 10.4486 79.2862 10.599 79.5226 10.8253C79.759 11.0517 79.9223 11.3435 79.9915 11.6634C80.0606 11.9833 80.0325 12.3166 79.9107 12.6203C79.7889 12.9241 79.579 13.1845 79.308 13.368C79.037 13.5515 78.7173 13.6497 78.39 13.65C78.1809 13.6553 77.9727 13.619 77.7777 13.5433C77.5827 13.4675 77.4046 13.3537 77.2539 13.2086C77.1032 13.0635 76.9828 12.8899 76.8998 12.6978C76.8167 12.5058 76.7726 12.2992 76.77 12.09L76.75 12.08ZM76.75 14.44H80V24.3H76.8L76.75 14.44ZM91.69 19.37C91.69 22.58 90.25 24.44 87.8 24.44C87.1728 24.4787 86.5488 24.3239 86.0123 23.9967C85.4758 23.6694 85.0527 23.1854 84.8 22.61H84.74V27.47H81.53V14.47H84.72V16.23H84.78C85.024 15.6433 85.443 15.146 85.9798 14.806C86.5167 14.466 87.1453 14.2998 87.78 14.33C90.3 14.31 91.75 16.16 91.75 19.38L91.69 19.37ZM88.42 19.37C88.42 17.81 87.69 16.8 86.56 16.8C85.43 16.8 84.72 17.8 84.71 19.37C84.7 20.94 85.43 21.93 86.56 21.93C87.69 21.93 88.48 21 88.48 19.38L88.42 19.37ZM97.17 14.21C99.86 14.21 101.53 15.48 101.55 17.52H98.62C98.62 16.81 98.03 16.37 97.15 16.37C96.27 16.37 95.85 16.71 95.85 17.22C95.85 17.73 96.22 17.89 96.96 18.04L99.02 18.46C101.02 18.88 101.82 19.68 101.82 21.17C101.82 23.17 99.97 24.53 97.22 24.53C94.47 24.53 92.68 23.21 92.55 21.2H95.66C95.75 21.93 96.33 22.36 97.27 22.36C98.21 22.36 98.65 22.06 98.65 21.53C98.65 21 98.35 20.91 97.58 20.75L95.72 20.36C93.79 19.95 92.78 18.94 92.78 17.43C92.84 15.47 94.52 14.22 97.23 14.22L97.17 14.21ZM112.57 24.29H109.46V22.44H109.4C109.226 23.0571 108.847 23.5964 108.325 23.969C107.803 24.3417 107.17 24.5254 106.53 24.49C106.047 24.5057 105.565 24.4191 105.118 24.2357C104.671 24.0524 104.267 23.7765 103.934 23.4262C103.6 23.0758 103.345 22.6589 103.184 22.2029C103.023 21.7469 102.96 21.2619 103 20.78V14.45H106.21V20.09C106.21 21.25 106.82 21.88 107.82 21.88C108.055 21.8782 108.286 21.8261 108.499 21.7273C108.712 21.6284 108.901 21.485 109.053 21.3068C109.206 21.1286 109.319 20.9197 109.384 20.6943C109.448 20.4688 109.464 20.2321 109.43 20V14.45H112.63L112.57 24.29ZM114.12 14.44H117.24V16.34H117.31C117.482 15.7313 117.852 15.197 118.36 14.8206C118.869 14.4443 119.488 14.2471 120.12 14.26C120.755 14.2048 121.388 14.3884 121.894 14.7749C122.401 15.1614 122.745 15.7231 122.86 16.35H123C123.2 15.7197 123.602 15.1731 124.145 14.7952C124.687 14.4172 125.34 14.2291 126 14.26C126.439 14.2433 126.877 14.3195 127.284 14.4836C127.692 14.6476 128.06 14.8959 128.365 15.2122C128.67 15.5284 128.904 15.9055 129.053 16.3187C129.203 16.7319 129.263 17.1719 129.23 17.61V24.3H126V18.43C126 17.43 125.53 16.87 124.62 16.87C124.418 16.8667 124.218 16.9071 124.033 16.9883C123.848 17.0696 123.684 17.1899 123.55 17.3409C123.416 17.492 123.316 17.6701 123.257 17.8633C123.199 18.0565 123.183 18.26 123.21 18.46V24.3H120.15V18.4C120.15 17.4 119.66 16.87 118.78 16.87C118.576 16.8684 118.374 16.9104 118.188 16.9932C118.001 17.0761 117.835 17.1978 117.699 17.3503C117.564 17.5028 117.463 17.6825 117.403 17.8773C117.342 18.0722 117.324 18.2777 117.35 18.48V24.3H114.14L114.12 14.44Z"
class="ccustom" fill="#394149"></path>
<path
d="M32.16 12.11C32.1601 10.1197 31.5591 8.17576 30.4357 6.53282C29.3123 4.88988 27.7188 3.62453 25.8641 2.90253C24.0094 2.18052 21.9798 2.03552 20.0413 2.48651C18.1027 2.9375 16.3456 3.96346 15 5.43H2.52002V31.77H28.87V19.46C29.9042 18.535 30.7318 17.4023 31.2987 16.1358C31.8656 14.8693 32.1591 13.4976 32.16 12.11V12.11ZM27.09 12.11C27.092 13.0637 26.811 13.9966 26.2826 14.7906C25.7541 15.5845 25.0021 16.2039 24.1215 16.5702C23.2409 16.9366 22.2715 17.0335 21.3358 16.8486C20.4002 16.6638 19.5404 16.2055 18.8653 15.5318C18.1902 14.8581 17.7302 13.9993 17.5434 13.064C17.3566 12.1288 17.4515 11.1591 17.816 10.2778C18.1805 9.39646 18.7983 8.64309 19.5911 8.11302C20.384 7.58295 21.3163 7.30001 22.27 7.3C23.5466 7.3 24.7711 7.80645 25.6747 8.70821C26.5784 9.60997 27.0874 10.8334 27.09 12.11V12.11ZM23.8 26.7H7.59002V10.5H12.53C12.4346 11.0315 12.3844 11.5701 12.38 12.11C12.3827 14.7322 13.4255 17.2462 15.2797 19.1004C17.1338 20.9545 19.6478 21.9974 22.27 22C22.7827 21.9973 23.2943 21.9538 23.8 21.87V26.7Z"
class="ccustom" fill="#394149"></path>
</svg>
<svg id="logo-d" class="w-28 mx-auto" width="132" height="35" viewBox="0 0 132 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M38.51 11.26H41.72V24.26H38.51V11.26ZM43 19.37C43 16.15 45 14.22 48 14.22C51 14.22 53 16.15 53 19.37C53 22.59 51.07 24.54 48 24.54C44.93 24.54 43 22.66 43 19.37ZM49.82 19.37C49.82 17.6 49.13 16.56 48.03 16.56C46.93 16.56 46.25 17.56 46.25 19.37C46.25 21.18 46.93 22.17 48.03 22.17C49.13 22.17 49.84 21.18 49.84 19.38L49.82 19.37ZM54.28 24.93H57.38C57.5211 25.2637 57.7676 25.5422 58.0818 25.7227C58.396 25.9033 58.7606 25.9761 59.12 25.93C60.35 25.93 60.99 25.27 60.99 24.29V22.49H61C60.7351 23.0505 60.3067 23.5176 59.7713 23.83C59.2358 24.1424 58.6183 24.2853 58 24.24C55.65 24.24 54.09 22.45 54.09 19.37C54.09 16.29 55.58 14.37 58.09 14.37C58.7241 14.3361 59.3532 14.4996 59.8904 14.8381C60.4277 15.1766 60.8468 15.6734 61.09 16.26H61V14.45H64.18V24.19C64.18 26.54 62.1 28.01 59.04 28.01C56.26 28 54.48 26.73 54.3 24.94L54.28 24.93ZM61 19.37C61 17.8 60.28 16.81 59.14 16.81C58 16.81 57.3 17.81 57.3 19.37C57.3 20.93 57.99 21.85 59.14 21.85C60.29 21.85 61 21 61 19.37ZM65.45 19.37C65.45 16.15 67.45 14.22 70.45 14.22C73.45 14.22 75.45 16.15 75.45 19.37C75.45 22.59 73.51 24.54 70.45 24.54C67.39 24.54 65.47 22.66 65.47 19.37H65.45ZM72.27 19.37C72.27 17.6 71.57 16.56 70.48 16.56C69.39 16.56 68.7 17.56 68.7 19.37C68.7 21.18 69.38 22.17 70.48 22.17C71.58 22.17 72.29 21.18 72.29 19.38L72.27 19.37ZM76.75 12.08C76.736 11.753 76.8202 11.4293 76.9917 11.1506C77.1632 10.8718 77.4142 10.6508 77.7124 10.5159C78.0106 10.3809 78.3423 10.3383 78.6649 10.3935C78.9875 10.4486 79.2862 10.599 79.5226 10.8253C79.759 11.0517 79.9223 11.3435 79.9915 11.6634C80.0606 11.9833 80.0325 12.3166 79.9107 12.6203C79.7889 12.9241 79.579 13.1845 79.308 13.368C79.037 13.5515 78.7173 13.6497 78.39 13.65C78.1809 13.6553 77.9727 13.619 77.7777 13.5433C77.5827 13.4675 77.4046 13.3537 77.2539 13.2086C77.1032 13.0635 76.9828 12.8899 76.8998 12.6978C76.8167 12.5058 76.7726 12.2992 76.77 12.09L76.75 12.08ZM76.75 14.44H80V24.3H76.8L76.75 14.44ZM91.69 19.37C91.69 22.58 90.25 24.44 87.8 24.44C87.1728 24.4787 86.5488 24.3239 86.0123 23.9967C85.4758 23.6694 85.0527 23.1854 84.8 22.61H84.74V27.47H81.53V14.47H84.72V16.23H84.78C85.024 15.6433 85.443 15.146 85.9798 14.806C86.5167 14.466 87.1453 14.2998 87.78 14.33C90.3 14.31 91.75 16.16 91.75 19.38L91.69 19.37ZM88.42 19.37C88.42 17.81 87.69 16.8 86.56 16.8C85.43 16.8 84.72 17.8 84.71 19.37C84.7 20.94 85.43 21.93 86.56 21.93C87.69 21.93 88.48 21 88.48 19.38L88.42 19.37ZM97.17 14.21C99.86 14.21 101.53 15.48 101.55 17.52H98.62C98.62 16.81 98.03 16.37 97.15 16.37C96.27 16.37 95.85 16.71 95.85 17.22C95.85 17.73 96.22 17.89 96.96 18.04L99.02 18.46C101.02 18.88 101.82 19.68 101.82 21.17C101.82 23.17 99.97 24.53 97.22 24.53C94.47 24.53 92.68 23.21 92.55 21.2H95.66C95.75 21.93 96.33 22.36 97.27 22.36C98.21 22.36 98.65 22.06 98.65 21.53C98.65 21 98.35 20.91 97.58 20.75L95.72 20.36C93.79 19.95 92.78 18.94 92.78 17.43C92.84 15.47 94.52 14.22 97.23 14.22L97.17 14.21ZM112.57 24.29H109.46V22.44H109.4C109.226 23.0571 108.847 23.5964 108.325 23.969C107.803 24.3417 107.17 24.5254 106.53 24.49C106.047 24.5057 105.565 24.4191 105.118 24.2357C104.671 24.0524 104.267 23.7765 103.934 23.4262C103.6 23.0758 103.345 22.6589 103.184 22.2029C103.023 21.7469 102.96 21.2619 103 20.78V14.45H106.21V20.09C106.21 21.25 106.82 21.88 107.82 21.88C108.055 21.8782 108.286 21.8261 108.499 21.7273C108.712 21.6284 108.901 21.485 109.053 21.3068C109.206 21.1286 109.319 20.9197 109.384 20.6943C109.448 20.4688 109.464 20.2321 109.43 20V14.45H112.63L112.57 24.29ZM114.12 14.44H117.24V16.34H117.31C117.482 15.7313 117.852 15.197 118.36 14.8206C118.869 14.4443 119.488 14.2471 120.12 14.26C120.755 14.2048 121.388 14.3884 121.894 14.7749C122.401 15.1614 122.745 15.7231 122.86 16.35H123C123.2 15.7197 123.602 15.1731 124.145 14.7952C124.687 14.4172 125.34 14.2291 126 14.26C126.439 14.2433 126.877 14.3195 127.284 14.4836C127.692 14.6476 128.06 14.8959 128.365 15.2122C128.67 15.5284 128.904 15.9055 129.053 16.3187C129.203 16.7319 129.263 17.1719 129.23 17.61V24.3H126V18.43C126 17.43 125.53 16.87 124.62 16.87C124.418 16.8667 124.218 16.9071 124.033 16.9883C123.848 17.0696 123.684 17.1899 123.55 17.3409C123.416 17.492 123.316 17.6701 123.257 17.8633C123.199 18.0565 123.183 18.26 123.21 18.46V24.3H120.15V18.4C120.15 17.4 119.66 16.87 118.78 16.87C118.576 16.8684 118.374 16.9104 118.188 16.9932C118.001 17.0761 117.835 17.1978 117.699 17.3503C117.564 17.5028 117.463 17.6825 117.403 17.8773C117.342 18.0722 117.324 18.2777 117.35 18.48V24.3H114.14L114.12 14.44Z"
class="ccustom" fill="#394149"></path>
<path
d="M32.16 12.11C32.1601 10.1197 31.5591 8.17576 30.4357 6.53282C29.3123 4.88988 27.7188 3.62453 25.8641 2.90253C24.0094 2.18052 21.9798 2.03552 20.0413 2.48651C18.1027 2.9375 16.3456 3.96346 15 5.43H2.52002V31.77H28.87V19.46C29.9042 18.535 30.7318 17.4023 31.2987 16.1358C31.8656 14.8693 32.1591 13.4976 32.16 12.11V12.11ZM27.09 12.11C27.092 13.0637 26.811 13.9966 26.2826 14.7906C25.7541 15.5845 25.0021 16.2039 24.1215 16.5702C23.2409 16.9366 22.2715 17.0335 21.3358 16.8486C20.4002 16.6638 19.5404 16.2055 18.8653 15.5318C18.1902 14.8581 17.7302 13.9993 17.5434 13.064C17.3566 12.1288 17.4515 11.1591 17.816 10.2778C18.1805 9.39646 18.7983 8.64309 19.5911 8.11302C20.384 7.58295 21.3163 7.30001 22.27 7.3C23.5466 7.3 24.7711 7.80645 25.6747 8.70821C26.5784 9.60997 27.0874 10.8334 27.09 12.11V12.11ZM23.8 26.7H7.59002V10.5H12.53C12.4346 11.0315 12.3844 11.5701 12.38 12.11C12.3827 14.7322 13.4255 17.2462 15.2797 19.1004C17.1338 20.9545 19.6478 21.9974 22.27 22C22.7827 21.9973 23.2943 21.9538 23.8 21.87V26.7Z"
class="ccustom" fill="#394149"></path>
</svg>
</div>
</div>
<img src="https://readymadeui.com/bg-effect.svg" class="absolute inset-0 w-full h-full" />
</div>
</div>
<script>
var toggleOpen = document.getElementById("toggleOpen");
var toggleClose = document.getElementById("toggleClose");
var collapseMenu = document.getElementById("collapseMenu");
function handleClick() {
if (collapseMenu.style.display === "block") {
collapseMenu.style.display = "none";
} else {
collapseMenu.style.display = "block";
}
}
toggleOpen.addEventListener("click", handleClick);
toggleClose.addEventListener("click", handleClick);
</script>
</body>
</html>
/* Doesn't require any CSS. */
//Doesn't require any JS.
This Tailwind CSS snippet showcases a modern and impactful hero section designed to make a strong first impression with a compelling headline, a descriptive paragraph, and a clear call-to-action, all integrated with a responsive, adaptive navbar.
Key Features
- Responsive Design: The hero section and navbar fluidly adapt their layout to different screen sizes, ensuring optimal viewing and interaction on desktops, tablets, and mobile devices.
- Integrated Adaptive Navbar: The navigation menu is a core part of the design, featuring clean links and a prominent "Login" button, with its layout and behavior changing seamlessly on smaller screens.
- Compelling Hero Content: The main area is focused on a large, bold headline and a clear supporting paragraph, providing a quick and engaging summary of the product or service.
- Clean Aesthetics: The design utilizes Tailwind CSS for a modern, minimalist look, with a subtle background gradient that adds a touch of visual depth without being distracting.
Implementation
- Include Tailwind CSS: Ensure that Tailwind CSS is installed and properly configured in your project.
- Create the HTML Structure: Define the HTML structure for both the navigation bar and the hero section. The hero section typically uses a main container to hold the headline, descriptive text, and call-to-action button.
- Apply Tailwind CSS Classes: Utilize Tailwind CSS utility classes extensively to style the entire snippet. Use classes for flex or grid to manage layout, and apply utility classes for spacing (p-, m-), typography (text-, font-), and coloring (bg-, text-, bg-gradient-to-r).
- Customize as Needed: Easily modify the text content, color scheme, and links by editing the HTML and applying different Tailwind utility classes to match your website's branding.
Latest Snippets
View All
Join Our Community Call-to-Action Banner Section With Tailwind CSS
Bootstrap 5 Responsive Service Pricing Table Block
Owl Carousel Responsive CSS-Only Team Section Showcase
Tailwind CSS Subscribe Container with Integrated Footer
Responsive Bootstrap 5 Detailed Features Section
Responsive CSS-Only Glassmorphism Login Form with background image
Responsive Bootstrap 5 Compact FAQ Accordion Display
Responsive CSS Only Services Section with Hover Effects
Responsive Tailwind CSS Team Members Display Showcase
Responsive Bootstrap 5 Clear Process Flow Component
Responsive Interactive Login & Register Form with CSS & JS Transitions
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
