Application Layouts Navbars
Dark header
Open this dark header application navbars example in new window
Copy dark header application navbars code
Close dark header application navbars code
<!-- ========== HEADER ========== -->
<header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-hs2-primary border-b border-gray-700 text-sm py-2.5 sm:py-4">
<nav class="max-w-[85rem] flex basis-full items-center w-full mx-auto px-4 sm:px-6 lg:px-8" aria-label="Global">
<div class="mr-5 md:mr-8">
<a class="flex-none text-xl font-semibold text-white" href="#" aria-label="Brand">
<svg width="68px" height="25px" viewBox="0 0 68 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>hs2-logo</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="hs2-logo" fill="#FFFFFF" fill-rule="nonzero">
<path d="M21.9359377,0.685756649 L21.9359377,9.89250301 L5.01272282,9.89250301 L5.01272282,0.685756649 C5.01272282,0.423964415 4.79936558,0.21314058 4.53442747,0.21314058 L0.478295349,0.21314058 C0.213357239,0.21314058 0,0.423964415 0,0.685756649 L0,24.2146233 C0,24.4764155 0.213357239,24.6872394 0.478295349,24.6872394 L4.53442747,24.6872394 C4.79936558,24.6872394 5.01272282,24.4764155 5.01272282,24.2146233 L5.01272282,14.8480215 L21.9359377,14.8480215 L21.9359377,24.2146233 C21.9359377,24.4764155 22.1492949,24.6872394 22.414233,24.6872394 L26.4703651,24.6872394 C26.7353032,24.6872394 26.9486605,24.4764155 26.9486605,24.2146233 L26.9486605,0.685756649 C26.9486605,0.423964415 26.7353032,0.21314058 26.4703651,0.21314058 L22.414233,0.21314058 C22.1492949,0.21314058 21.9359377,0.423964415 21.9359377,0.685756649 Z" id="Path"></path>
<path d="M54.0356515,6.64210917 L52.1201255,3.13455657 C52.0146192,2.9422667 52.0591663,2.70595867 52.2209427,2.55768696 C52.6500017,2.16152349 53.1517429,1.79084422 53.7074096,1.4479659 C54.3849947,1.03095172 55.1751198,0.681123158 56.0519946,0.410063942 C56.9359032,0.136687981 57.9557977,1.02884165e-16 59.0858877,1.02884165e-16 C60.3566528,1.02884165e-16 61.5195669,0.194606617 62.541806,0.576869614 C63.5687343,0.961449356 64.4549874,1.51051802 65.174775,2.20554166 C65.8969072,2.90288203 66.4596076,3.75312761 66.8441196,4.72847743 C67.2286315,5.70151052 67.4232321,6.78111389 67.4232321,7.94180335 C67.4232321,8.69937911 67.3317933,9.40830322 67.1489156,10.0523584 C66.9683826,10.6940969 66.717512,11.3057177 66.4033376,11.8733204 C66.0915078,12.4386062 65.7163742,12.9899917 65.2896597,13.5158929 C64.869979,14.0325271 64.4080957,14.5514781 63.920422,15.0634788 L59.3508258,19.812807 L67.5217047,19.812807 C67.7866428,19.812807 68,20.0236308 68,20.285423 L68,24.2192568 C68,24.481049 67.7866428,24.6918729 67.5217047,24.6918729 L52.2209427,24.6918729 C51.9560046,24.6918729 51.7426473,24.481049 51.7426473,24.2192568 L51.7426473,21.0522658 C51.7426473,20.8275415 51.8317415,20.6097674 51.9888287,20.4475952 L60.2065993,12.040126 C60.8255698,11.421555 61.2968314,10.7914002 61.6086612,10.1635622 C61.9134572,9.54962469 62.0681998,8.88703549 62.0681998,8.19201186 C62.0681998,7.7147623 61.9884839,7.27689741 61.8290522,6.88536744 C61.6696204,6.4961542 61.4445402,6.15327588 61.1585008,5.86831619 C60.8724615,5.5833565 60.5231183,5.35863219 60.1198497,5.2010935 C59.7118919,5.04123807 59.2500086,4.96015198 58.7482674,4.96015198 C58.2160466,4.96015198 57.7307175,5.0273376 57.3063476,5.15707534 C56.874944,5.28912983 56.4740199,5.46983597 56.1152984,5.69224354 C55.7518877,5.91696784 55.4189567,6.19034381 55.1000931,6.48225373 C54.9852084,6.58650727 54.8773575,6.68149384 54.7741958,6.76953016 C54.5420819,6.96877027 54.1833603,6.90621814 54.0379961,6.63979242 L54.0356515,6.64210917 Z" id="Path"></path>
<path d="M48.7814364,14.2294505 C48.3969245,13.4440738 47.8647037,12.7652674 47.1988415,12.2115652 C46.5400131,11.66713 45.7545771,11.2199981 44.8636348,10.8863868 C43.9844154,10.557409 43.0278247,10.302567 42.0173086,10.1334445 L40.7559218,9.91567047 C40.0970934,9.80446669 39.4828121,9.67936243 38.9271455,9.54035771 C38.3855463,9.40598647 37.9142847,9.2391808 37.5250836,9.04689093 C37.1569838,8.86618478 36.8685998,8.64146048 36.6693101,8.37966824 C36.4817433,8.13640997 36.3903045,7.8421833 36.3903045,7.48308776 C36.3903045,7.08924103 36.4793987,6.7509962 36.6646209,6.44981929 C36.8521877,6.14169215 37.1194704,5.87758317 37.4570906,5.6598091 C37.8064338,5.43508479 38.2331483,5.26132889 38.720822,5.14085812 C39.217874,5.01807061 39.7758853,4.95551849 40.376099,4.95551849 C41.5601145,4.95551849 42.676137,5.14317487 43.6936869,5.51153739 C44.6408992,5.85441572 45.5294969,6.28764711 46.3477571,6.79038087 C46.3477571,6.79038087 46.3501017,6.78806413 46.3501017,6.78574738 C46.427473,6.83439904 46.5189118,6.86219998 46.6173844,6.86219998 C46.8143296,6.86219998 46.9854843,6.74867946 47.0675447,6.58650727 C47.0675447,6.58650727 47.0675447,6.58650727 47.0675447,6.58650727 L48.9549357,3.14382356 C48.9549357,3.14382356 48.9549357,3.14382356 48.9549357,3.14382356 C48.9994828,3.0696877 49.0252732,2.98396812 49.0252732,2.8912983 C49.0252732,2.70827541 48.9244561,2.55073673 48.7767472,2.4627004 C48.1249526,2.06422018 47.4731579,1.70975813 46.8377754,1.41321472 C46.1437782,1.08887035 45.4357135,0.820127884 44.7346826,0.616254286 C44.0359963,0.412380688 43.3091749,0.259475489 42.5753198,0.162172181 C41.8438093,0.0648688722 41.0700962,0.0162172181 40.2776265,0.0162172181 C39.0678206,0.0162172181 37.9002172,0.180706144 36.805296,0.50736725 C35.7056856,0.834028357 34.7233045,1.32517839 33.8862876,1.96691688 C33.042237,2.61328885 32.3599628,3.43341674 31.8605661,4.40413307 C31.3564804,5.38179965 31.1009206,6.51932166 31.1009206,7.78658141 C31.1009206,8.89166898 31.2814536,9.78361598 31.6378306,10.5921601 C31.9942075,11.403021 32.4959487,12.0980447 33.1313312,12.6563803 C33.75968,13.2077657 34.5099472,13.6595311 35.3657208,13.9954592 C36.2074268,14.3267538 37.1405717,14.579279 38.1463986,14.7507182 L39.562528,14.9870262 C40.3292073,15.1190807 41.0114816,15.2627189 41.5882495,15.4109906 C42.1556391,15.5569456 42.6339344,15.7307015 43.0114126,15.9276249 C43.3677895,16.1129645 43.6350722,16.3330553 43.8085715,16.5855806 C43.9750371,16.8265221 44.0570975,17.1902511 44.0570975,17.5308127 C44.0570975,17.9339264 43.9633141,18.274488 43.7710582,18.5733482 C43.5717684,18.883792 43.2927628,19.1525345 42.9363859,19.3749421 C42.5706306,19.6042999 42.1298486,19.7780558 41.6257629,19.8938931 C41.1122987,20.0120471 40.5519429,20.0722825 39.9564183,20.0722825 C39.2553874,20.0722825 38.5660794,20.0027801 37.907251,19.8684089 C37.2437334,19.7317209 36.6083509,19.548698 36.01986,19.3262904 C35.4313692,19.1015661 34.8780471,18.8374571 34.3739613,18.538597 C33.9495914,18.2883885 33.5650795,18.0242795 33.2227701,17.755537 C33.2227701,17.755537 33.2227701,17.7578538 33.2227701,17.7601705 C33.0234803,17.6049486 32.7350964,17.6142155 32.5498742,17.7972384 C32.5240837,17.8227226 32.5029825,17.8482068 32.4842258,17.8760078 C32.4842258,17.8760078 32.4842258,17.8760078 32.4842258,17.8760078 L30.381133,21.3210082 C30.381133,21.3210082 30.381133,21.3210082 30.381133,21.3210082 C30.2639037,21.5132981 30.2873496,21.7681401 30.4561597,21.932629 C30.4842947,21.96043 30.5124297,21.9812807 30.5452539,22.0021314 C31.1079543,22.4562135 31.731614,22.8709109 32.409199,23.225373 C33.1594663,23.6192197 33.9566252,23.9505143 34.7795745,24.2123066 C35.6001793,24.4740988 36.460642,24.6710221 37.3304831,24.8030766 C38.2003241,24.9328144 39.0771989,25 39.935317,25 C41.1545013,25 42.3408613,24.8378278 43.4592284,24.5181169 C44.5869738,24.1960893 45.5974899,23.7026226 46.4649864,23.0516171 C47.3395166,22.3936614 48.0475813,21.5573163 48.5657346,20.5634325 C49.0862325,19.5625985 49.348826,18.3741081 49.348826,17.028079 C49.348826,15.9646928 49.1542254,15.0240942 48.7673689,14.2317672 L48.7814364,14.2294505 Z" id="Path"></path>
</g>
</g>
</svg>
</a>
</div>
<div class="w-full flex items-center justify-end ml-auto sm:justify-between sm:gap-x-3 sm:order-3">
<div class="sm:hidden">
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium hover:bg-white/[.2] text-white align-middle focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-900 transition-all text-xs">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
</button>
</div>
<div class="hidden mx-auto sm:block">
<label for="icon" class="sr-only">Search</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pointer-events-none z-20 pl-4">
<svg class="h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
</div>
<input type="text" id="icon" name="icon" class="py-2 px-4 pl-11 pr-20 block w-92 md:w-96 bg-transparent border-white shadow-sm rounded-md text-sm text-white focus:z-10 focus:border-white focus:ring-white placeholder:text-white" placeholder="Search">
<div class="absolute inset-y-0 right-0 flex items-center pointer-events-none z-20 pr-4">
<span class="text-white">Ctrl + /</span>
</div>
</div>
</div>
<div class="flex flex-row items-center justify-end gap-2">
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium hover:bg-white/[.2] text-white align-middle focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-900 transition-all text-xs">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" />
</svg>
</button>
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium hover:bg-white/[.2] text-white align-middle focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-900 transition-all text-xs" data-hs-offcanvas="#hs-offcanvas-right">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M5.5 2A3.5 3.5 0 0 0 2 5.5v5A3.5 3.5 0 0 0 5.5 14h5a3.5 3.5 0 0 0 3.5-3.5V8a.5.5 0 0 1 1 0v2.5a4.5 4.5 0 0 1-4.5 4.5h-5A4.5 4.5 0 0 1 1 10.5v-5A4.5 4.5 0 0 1 5.5 1H8a.5.5 0 0 1 0 1H5.5z" />
<path d="M16 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
</svg>
</button>
<div class="hs-dropdown relative inline-flex" data-hs-dropdown-placement="bottom-right">
<button id="hs-dropdown-with-header" type="button" class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium hover:bg-white/[.2] text-white align-middle focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-900 transition-all text-xs">
<img class="inline-block h-[2.375rem] w-[2.375rem] rounded-full" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-[15rem] z-10 bg-white shadow-md rounded-lg p-2 " aria-labelledby="hs-dropdown-with-header">
<div class="py-3 px-5 -m-2 bg-gray-100 rounded-t-lg ">
<p class="text-sm text-gray-500 ">Signed in as</p>
<p class="text-sm font-medium text-gray-800 ">james@site.com</p>
</div>
<div class="mt-2 py-2 first:pt-0 last:pb-0">
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 " href="#">
<svg class="flex-none" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" />
</svg>
Newsletter
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 " href="#">
<svg class="flex-none" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z" />
<path d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z" />
</svg>
Purchases
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 " href="#">
<svg class="flex-none" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path fill-rule="evenodd" d="M7.646 10.854a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 9.293V5.5a.5.5 0 0 0-1 0v3.793L6.354 8.146a.5.5 0 1 0-.708.708l2 2z" />
<path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z" />
</svg>
Downloads
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 " href="#">
<svg class="flex-none" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" />
</svg>
Team Account
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<!-- ========== END HEADER ========== -->
<!-- ========== MAIN CONTENT ========== -->
<main id="content" role="main">
<!-- Nav -->
<nav class="sticky -top-px bg-white text-sm font-medium text-black ring-1 ring-gray-900 ring-opacity-5 border-t shadow-sm shadow-gray-100 pt-6 md:pb-6 -mt-px " aria-label="Jump links">
<div class="max-w-7xl snap-x w-full flex items-center overflow-x-auto scrollbar-x px-4 sm:px-6 lg:px-8 pb-4 md:pb-0 mx-auto ">
<div class="snap-center shrink-0 pr-5 sm:pr-8 sm:last-pr-0">
<a class="inline-flex items-center gap-x-2 hover:text-gray-500 " href="#">Dashboard</a>
</div>
<div class="snap-center shrink-0 pr-5 sm:pr-8 sm:last:pr-0">
<a class="inline-flex items-center gap-x-2 hover:text-gray-500 " href="#">Users</a>
</div>
<div class="snap-center shrink-0 pr-5 sm:pr-8 sm:last:pr-0">
<a class="inline-flex items-center gap-x-2 hover:text-gray-500 " href="#">Account</a>
</div>
<div class="snap-center shrink-0 pr-5 sm:pr-8 sm:last:pr-0">
<a class="inline-flex items-center gap-x-2 hover:text-gray-500 " href="#">Projects</a>
</div>
<div class="snap-center shrink-0 pr-5 sm:pr-8 sm:last:pr-0">
<a class="inline-flex items-center gap-x-2 hover:text-gray-500 " href="#">Calendar</a>
</div>
<div class="snap-center shrink-0 pr-5 sm:pr-8 sm:last:pr-0">
<a class="inline-flex items-center gap-x-2 hover:text-gray-500 " href="#">
Documentation
<span class="inline bg-gray-100 text-xs text-gray-500 font-semibold rounded-full py-1 px-2 ">v12.7</span>
</a>
</div>
</div>
</nav>
<!-- End Nav -->
<div class="max-w-7xl mx-auto py-10 px-4 sm:px-6 lg:px-8 min-h-[25rem]">
<!-- Page Heading -->
<header class="max-w-3xl">
<p class="mb-2 text-sm font-semibold text-hs2-secondary">Starter Pages & Examples</p>
<h1 class="block text-2xl font-bold text-hs2-primary sm:text-3xl ">Dark Application Layout: Navbar/Header</h1>
<p class="mt-2 text-lg text-hs2-text ">This is a simple application layout with header only example.</p>
<div class="mt-5 flex flex-col items-center gap-2 sm:flex-row sm:gap-3">
<a class="w-full sm:w-auto inline-flex justify-center items-center gap-x-3 text-center bg-hs2-primary hover:bg-hs2-primary-600 border border-transparent text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 focus:ring-offset-white transition py-3 px-4 " href="#" target="_blank">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
Get the source code
</a>
<a class="w-full sm:w-auto inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold text-hs2-link hover:text-hs2-hover-state focus:outline-none focus:ring-2 ring-offset-white focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm py-3 px-4 " href="#">
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M11.2792 1.64001L5.63273 7.28646C5.43747 7.48172 5.43747 7.79831 5.63273 7.99357L11.2792 13.64" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
Back to examples
</a>
</div>
</header>
<!-- End Page Heading -->
</div>
</main>
<!-- ========== END MAIN CONTENT ========== -->
<!-- ========== SECONDARY CONTENT ========== -->
<div id="hs-offcanvas-right" class="hs-offcanvas hs-offcanvas-open:translate-x-0 translate-x-full fixed top-0 right-0 transition-all duration-300 transform h-full max-w-xs w-full w-full z-[60] bg-white border-l " tabindex="-1">
<div class="flex justify-between items-center py-3 px-4 border-b ">
<h3 class="font-bold text-gray-800 ">
Offcanvas title
</h3>
<button type="button" class="hs-dropdown-toggle inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-gray-500 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white text-sm " data-hs-offcanvas="#hs-offcanvas-right">
<span class="sr-only">Close modal</span>
<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor" />
</svg>
</button>
</div>
<div class="p-4">
<p class="text-gray-800 ">
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
</div>
<!-- ========== END SECONDARY CONTENT ========== -->Header
Open this header application navbars example in new window
Copy header application navbars code
Close header application navbars code
<body class="bg-gray-50 ">
<!-- ========== HEADER ========== -->
<header class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-white border-b text-sm py-2.5 sm:py-4 ">
<nav class="max-w-7xl flex basis-full items-center w-full mx-auto px-4 sm:px-6 lg:px-8" aria-label="Global">
<div class="mr-5 md:mr-8">
<a class="flex-none text-xl text-hs2-primary font-semibold " href="#" aria-label="Brand">
<svg width="68px" height="25px" viewBox="0 0 68 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>hs2-logo</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="hs2-logo" fill="#1E3773" fill-rule="nonzero">
<path d="M21.9359377,0.685756649 L21.9359377,9.89250301 L5.01272282,9.89250301 L5.01272282,0.685756649 C5.01272282,0.423964415 4.79936558,0.21314058 4.53442747,0.21314058 L0.478295349,0.21314058 C0.213357239,0.21314058 0,0.423964415 0,0.685756649 L0,24.2146233 C0,24.4764155 0.213357239,24.6872394 0.478295349,24.6872394 L4.53442747,24.6872394 C4.79936558,24.6872394 5.01272282,24.4764155 5.01272282,24.2146233 L5.01272282,14.8480215 L21.9359377,14.8480215 L21.9359377,24.2146233 C21.9359377,24.4764155 22.1492949,24.6872394 22.414233,24.6872394 L26.4703651,24.6872394 C26.7353032,24.6872394 26.9486605,24.4764155 26.9486605,24.2146233 L26.9486605,0.685756649 C26.9486605,0.423964415 26.7353032,0.21314058 26.4703651,0.21314058 L22.414233,0.21314058 C22.1492949,0.21314058 21.9359377,0.423964415 21.9359377,0.685756649 Z" id="Path"></path>
<path d="M54.0356515,6.64210917 L52.1201255,3.13455657 C52.0146192,2.9422667 52.0591663,2.70595867 52.2209427,2.55768696 C52.6500017,2.16152349 53.1517429,1.79084422 53.7074096,1.4479659 C54.3849947,1.03095172 55.1751198,0.681123158 56.0519946,0.410063942 C56.9359032,0.136687981 57.9557977,1.02884165e-16 59.0858877,1.02884165e-16 C60.3566528,1.02884165e-16 61.5195669,0.194606617 62.541806,0.576869614 C63.5687343,0.961449356 64.4549874,1.51051802 65.174775,2.20554166 C65.8969072,2.90288203 66.4596076,3.75312761 66.8441196,4.72847743 C67.2286315,5.70151052 67.4232321,6.78111389 67.4232321,7.94180335 C67.4232321,8.69937911 67.3317933,9.40830322 67.1489156,10.0523584 C66.9683826,10.6940969 66.717512,11.3057177 66.4033376,11.8733204 C66.0915078,12.4386062 65.7163742,12.9899917 65.2896597,13.5158929 C64.869979,14.0325271 64.4080957,14.5514781 63.920422,15.0634788 L59.3508258,19.812807 L67.5217047,19.812807 C67.7866428,19.812807 68,20.0236308 68,20.285423 L68,24.2192568 C68,24.481049 67.7866428,24.6918729 67.5217047,24.6918729 L52.2209427,24.6918729 C51.9560046,24.6918729 51.7426473,24.481049 51.7426473,24.2192568 L51.7426473,21.0522658 C51.7426473,20.8275415 51.8317415,20.6097674 51.9888287,20.4475952 L60.2065993,12.040126 C60.8255698,11.421555 61.2968314,10.7914002 61.6086612,10.1635622 C61.9134572,9.54962469 62.0681998,8.88703549 62.0681998,8.19201186 C62.0681998,7.7147623 61.9884839,7.27689741 61.8290522,6.88536744 C61.6696204,6.4961542 61.4445402,6.15327588 61.1585008,5.86831619 C60.8724615,5.5833565 60.5231183,5.35863219 60.1198497,5.2010935 C59.7118919,5.04123807 59.2500086,4.96015198 58.7482674,4.96015198 C58.2160466,4.96015198 57.7307175,5.0273376 57.3063476,5.15707534 C56.874944,5.28912983 56.4740199,5.46983597 56.1152984,5.69224354 C55.7518877,5.91696784 55.4189567,6.19034381 55.1000931,6.48225373 C54.9852084,6.58650727 54.8773575,6.68149384 54.7741958,6.76953016 C54.5420819,6.96877027 54.1833603,6.90621814 54.0379961,6.63979242 L54.0356515,6.64210917 Z" id="Path"></path>
<path d="M48.7814364,14.2294505 C48.3969245,13.4440738 47.8647037,12.7652674 47.1988415,12.2115652 C46.5400131,11.66713 45.7545771,11.2199981 44.8636348,10.8863868 C43.9844154,10.557409 43.0278247,10.302567 42.0173086,10.1334445 L40.7559218,9.91567047 C40.0970934,9.80446669 39.4828121,9.67936243 38.9271455,9.54035771 C38.3855463,9.40598647 37.9142847,9.2391808 37.5250836,9.04689093 C37.1569838,8.86618478 36.8685998,8.64146048 36.6693101,8.37966824 C36.4817433,8.13640997 36.3903045,7.8421833 36.3903045,7.48308776 C36.3903045,7.08924103 36.4793987,6.7509962 36.6646209,6.44981929 C36.8521877,6.14169215 37.1194704,5.87758317 37.4570906,5.6598091 C37.8064338,5.43508479 38.2331483,5.26132889 38.720822,5.14085812 C39.217874,5.01807061 39.7758853,4.95551849 40.376099,4.95551849 C41.5601145,4.95551849 42.676137,5.14317487 43.6936869,5.51153739 C44.6408992,5.85441572 45.5294969,6.28764711 46.3477571,6.79038087 C46.3477571,6.79038087 46.3501017,6.78806413 46.3501017,6.78574738 C46.427473,6.83439904 46.5189118,6.86219998 46.6173844,6.86219998 C46.8143296,6.86219998 46.9854843,6.74867946 47.0675447,6.58650727 C47.0675447,6.58650727 47.0675447,6.58650727 47.0675447,6.58650727 L48.9549357,3.14382356 C48.9549357,3.14382356 48.9549357,3.14382356 48.9549357,3.14382356 C48.9994828,3.0696877 49.0252732,2.98396812 49.0252732,2.8912983 C49.0252732,2.70827541 48.9244561,2.55073673 48.7767472,2.4627004 C48.1249526,2.06422018 47.4731579,1.70975813 46.8377754,1.41321472 C46.1437782,1.08887035 45.4357135,0.820127884 44.7346826,0.616254286 C44.0359963,0.412380688 43.3091749,0.259475489 42.5753198,0.162172181 C41.8438093,0.0648688722 41.0700962,0.0162172181 40.2776265,0.0162172181 C39.0678206,0.0162172181 37.9002172,0.180706144 36.805296,0.50736725 C35.7056856,0.834028357 34.7233045,1.32517839 33.8862876,1.96691688 C33.042237,2.61328885 32.3599628,3.43341674 31.8605661,4.40413307 C31.3564804,5.38179965 31.1009206,6.51932166 31.1009206,7.78658141 C31.1009206,8.89166898 31.2814536,9.78361598 31.6378306,10.5921601 C31.9942075,11.403021 32.4959487,12.0980447 33.1313312,12.6563803 C33.75968,13.2077657 34.5099472,13.6595311 35.3657208,13.9954592 C36.2074268,14.3267538 37.1405717,14.579279 38.1463986,14.7507182 L39.562528,14.9870262 C40.3292073,15.1190807 41.0114816,15.2627189 41.5882495,15.4109906 C42.1556391,15.5569456 42.6339344,15.7307015 43.0114126,15.9276249 C43.3677895,16.1129645 43.6350722,16.3330553 43.8085715,16.5855806 C43.9750371,16.8265221 44.0570975,17.1902511 44.0570975,17.5308127 C44.0570975,17.9339264 43.9633141,18.274488 43.7710582,18.5733482 C43.5717684,18.883792 43.2927628,19.1525345 42.9363859,19.3749421 C42.5706306,19.6042999 42.1298486,19.7780558 41.6257629,19.8938931 C41.1122987,20.0120471 40.5519429,20.0722825 39.9564183,20.0722825 C39.2553874,20.0722825 38.5660794,20.0027801 37.907251,19.8684089 C37.2437334,19.7317209 36.6083509,19.548698 36.01986,19.3262904 C35.4313692,19.1015661 34.8780471,18.8374571 34.3739613,18.538597 C33.9495914,18.2883885 33.5650795,18.0242795 33.2227701,17.755537 C33.2227701,17.755537 33.2227701,17.7578538 33.2227701,17.7601705 C33.0234803,17.6049486 32.7350964,17.6142155 32.5498742,17.7972384 C32.5240837,17.8227226 32.5029825,17.8482068 32.4842258,17.8760078 C32.4842258,17.8760078 32.4842258,17.8760078 32.4842258,17.8760078 L30.381133,21.3210082 C30.381133,21.3210082 30.381133,21.3210082 30.381133,21.3210082 C30.2639037,21.5132981 30.2873496,21.7681401 30.4561597,21.932629 C30.4842947,21.96043 30.5124297,21.9812807 30.5452539,22.0021314 C31.1079543,22.4562135 31.731614,22.8709109 32.409199,23.225373 C33.1594663,23.6192197 33.9566252,23.9505143 34.7795745,24.2123066 C35.6001793,24.4740988 36.460642,24.6710221 37.3304831,24.8030766 C38.2003241,24.9328144 39.0771989,25 39.935317,25 C41.1545013,25 42.3408613,24.8378278 43.4592284,24.5181169 C44.5869738,24.1960893 45.5974899,23.7026226 46.4649864,23.0516171 C47.3395166,22.3936614 48.0475813,21.5573163 48.5657346,20.5634325 C49.0862325,19.5625985 49.348826,18.3741081 49.348826,17.028079 C49.348826,15.9646928 49.1542254,15.0240942 48.7673689,14.2317672 L48.7814364,14.2294505 Z" id="Path"></path>
</g>
</g>
</svg>
</a>
</div>
<div class="w-full flex items-center justify-end ml-auto sm:justify-between sm:gap-x-3 sm:order-3">
<div class="sm:hidden">
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium bg-white text-gray-700 align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-xs ">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
</button>
</div>
<div class="hidden sm:block">
<label for="icon" class="sr-only">Search</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pointer-events-none z-20 pl-4">
<svg class="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
</div>
<input type="text" id="icon" name="icon" class="py-2 px-4 pl-11 block w-full border-gray-200 shadow-sm rounded-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary " placeholder="Search">
</div>
</div>
<div class="flex flex-row items-center justify-end gap-2">
<button type="button" class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium bg-white text-gray-700 align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-xs ">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" />
</svg>
</button>
<button type="button" class="hs-dropdown-toggle inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium bg-white text-gray-700 align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-xs " data-hs-offcanvas="#hs-offcanvas-right">
<svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M5.5 2A3.5 3.5 0 0 0 2 5.5v5A3.5 3.5 0 0 0 5.5 14h5a3.5 3.5 0 0 0 3.5-3.5V8a.5.5 0 0 1 1 0v2.5a4.5 4.5 0 0 1-4.5 4.5h-5A4.5 4.5 0 0 1 1 10.5v-5A4.5 4.5 0 0 1 5.5 1H8a.5.5 0 0 1 0 1H5.5z" />
<path d="M16 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
</svg>
</button>
<div class="hs-dropdown relative inline-flex" data-hs-dropdown-placement="bottom-right">
<button id="hs-dropdown-with-header" type="button" class="hs-dropdown-toggle inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium bg-white text-gray-700 align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-xs ">
<img class="inline-block h-[2.375rem] w-[2.375rem] rounded-full ring-2 ring-white " src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-[15rem] z-10 bg-white shadow-md rounded-lg p-2 " aria-labelledby="hs-dropdown-with-header">
<div class="py-3 px-5 -m-2 bg-gray-100 rounded-t-lg ">
<p class="text-sm text-gray-500 ">Signed in as</p>
<p class="text-sm font-medium text-gray-800 ">james@site.com</p>
</div>
<div class="mt-2 py-2 first:pt-0 last:pb-0">
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-hs2-primary " href="#">
<svg class="flex-none" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" />
</svg>
Newsletter
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-hs2-primary " href="#">
<svg class="flex-none" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z" />
<path d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z" />
</svg>
Purchases
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-hs2-primary " href="#">
<svg class="flex-none" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path fill-rule="evenodd" d="M7.646 10.854a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 9.293V5.5a.5.5 0 0 0-1 0v3.793L6.354 8.146a.5.5 0 1 0-.708.708l2 2z" />
<path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z" />
</svg>
Downloads
</a>
<a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-hs2-primary " href="#">
<svg class="flex-none" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" />
</svg>
Team Account
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<!-- ========== END HEADER ========== -->
<!-- ========== MAIN CONTENT ========== -->
<main id="content" role="main">
<!-- Nav -->
<nav class="sticky -top-px bg-white text-sm font-medium text-black ring-1 ring-gray-900 ring-opacity-5 border-t shadow-sm shadow-gray-100 pt-6 md:pb-6 -mt-px " aria-label="Jump links">
<div class="max-w-7xl snap-x w-full flex items-center overflow-x-auto scrollbar-x px-4 sm:px-6 lg:px-8 pb-4 md:pb-0 mx-auto ">
<div class="snap-center shrink-0 pr-5 sm:pr-8 sm:last-pr-0">
<a class="inline-flex items-center gap-x-2 hover:text-gray-500 " href="#">Dashboard</a>
</div>
<div class="snap-center shrink-0 pr-5 sm:pr-8 sm:last:pr-0">
<a class="inline-flex items-center gap-x-2 hover:text-gray-500 " href="#">Users</a>
</div>
<div class="snap-center shrink-0 pr-5 sm:pr-8 sm:last:pr-0">
<a class="inline-flex items-center gap-x-2 hover:text-gray-500 " href="#">Account</a>
</div>
<div class="snap-center shrink-0 pr-5 sm:pr-8 sm:last:pr-0">
<a class="inline-flex items-center gap-x-2 hover:text-gray-500 " href="#">Projects</a>
</div>
<div class="snap-center shrink-0 pr-5 sm:pr-8 sm:last:pr-0">
<a class="inline-flex items-center gap-x-2 hover:text-gray-500 " href="#">Calendar</a>
</div>
<div class="snap-center shrink-0 pr-5 sm:pr-8 sm:last:pr-0">
<a class="inline-flex items-center gap-x-2 hover:text-gray-500 " href="#">
Documentation
<span class="inline bg-gray-100 text-xs text-gray-500 font-semibold rounded-full py-1 px-2 ">v12.7</span>
</a>
</div>
</div>
</nav>
<!-- End Nav -->
<div class="max-w-7xl mx-auto py-10 px-4 sm:px-6 lg:px-8 min-h-[25rem]">
<!-- Page Heading -->
<header class="max-w-3xl">
<p class="mb-2 text-sm font-semibold text-hs2-secondary">Starter Pages & Examples</p>
<h1 class="block text-2xl font-bold text-hs2-primary-500 sm:text-3xl ">Application Layout: Header</h1>
<p class="mt-2 text-lg text-hs2-text ">This is a simple application layout with header only example.</p>
<div class="mt-5 flex flex-col items-center gap-2 sm:flex-row sm:gap-3">
<a class="w-full sm:w-auto inline-flex justify-center items-center gap-x-3 text-center bg-hs2-primary hover:bg-hs2-primary-600 border border-transparent text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 focus:ring-offset-white transition py-3 px-4 " href="#" target="_blank">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
Get the source code
</a>
<a class="w-full sm:w-auto inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold text-hs2-link hover:text-hs2-hover-state focus:outline-none focus:ring-2 ring-offset-white focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm py-3 px-4 " href="#">
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M11.2792 1.64001L5.63273 7.28646C5.43747 7.48172 5.43747 7.79831 5.63273 7.99357L11.2792 13.64" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
Back to examples
</a>
</div>
</header>
<!-- End Page Heading -->
</div>
</main>
<!-- ========== END MAIN CONTENT ========== -->
<!-- ========== SECONDARY CONTENT ========== -->
<div id="hs-offcanvas-right" class="hs-offcanvas hs-offcanvas-open:translate-x-0 translate-x-full fixed top-0 right-0 transition-all duration-300 transform h-full max-w-xs w-full w-full z-[60] bg-white border-l " tabindex="-1">
<div class="flex justify-between items-center py-3 px-4 border-b ">
<h3 class="font-bold text-gray-800 ">
Offcanvas title
</h3>
<button type="button" class="hs-dropdown-toggle inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-gray-500 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white text-sm " data-hs-offcanvas="#hs-offcanvas-right">
<span class="sr-only">Close modal</span>
<svg class="w-3.5 h-3.5" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor" />
</svg>
</button>
</div>
<div class="p-4">
<p class="text-gray-800 ">
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
</div>
</div>
<!-- ========== END SECONDARY CONTENT ========== -->
</body>