Odio incidunt nam itaque sed eius modi error totam sit illum. Voluptas doloribus asperiores quaerat aperiam. Quidem harum omnis beatae ipsum soluta!
<!--
add this to your stylesheet
@layer components {
.navbar-active .hamburger div:first-child {
@apply rotate-45 translate-y-1.5;
}
.navbar-active .hamburger div:last-child {
@apply -rotate-45 -translate-y-1;
}
.navbar-active div:first-child div:first-child div:last-child{
@apply block lg:flex
}
}
-->
<header>
<input type="checkbox" name="hbr" id="hbr" class="hbr peer" hidden aria-hidden="true">
<nav class="fixed z-20 w-full bg-white/80 dark:bg-gray-900/80 backdrop-blur navbar shadow-md shadow-gray-600/5 peer-checked:navbar-active md:relative md:bg-transparent dark:shadow-none">
<div class="xl:container m-auto px-6 md:px-12">
<div class="flex flex-wrap items-center justify-between gap-6 md:py-3 md:gap-0">
<div class="w-full flex justify-between lg:w-auto">
<a href="#" aria-label="logo" class="flex space-x-2 items-center">
<div aria-hidden="true" class="flex space-x-1">
<div class="h-4 w-4 rounded-full bg-gray-900 dark:bg-gray-200"></div>
<div class="h-6 w-2 bg-primary dark:bg-primaryLight"></div>
</div>
<span class="text-base font-bold text-gray-600 dark:text-white">SASS</span>
</a>
<label for="hbr" class="peer-checked:hamburger block relative z-20 p-6 -mr-6 cursor-pointer lg:hidden">
<div aria-hidden="true" class="m-auto h-0.5 w-6 rounded bg-gray-900 dark:bg-gray-300 transition duration-300"></div>
<div aria-hidden="true" class="m-auto mt-2 h-0.5 w-6 rounded bg-gray-900 dark:bg-gray-300 transition duration-300"></div>
</label>
</div>
<div class="navmenu hidden w-full flex-wrap justify-end items-center mb-16 space-y-8 p-6 border border-gray-100 rounded-3xl shadow-2xl shadow-gray-300/20 bg-white dark:bg-gray-800 lg:space-y-0 lg:p-0 lg:m-0 lg:flex md:flex-nowrap lg:bg-transparent lg:w-7/12 lg:shadow-none dark:shadow-none dark:border-gray-700 lg:border-0">
<div class="text-gray-600 dark:text-gray-300 lg:pr-4">
<ul class="space-y-6 tracking-wide font-medium text-base lg:text-sm lg:flex lg:space-y-0">
<li>
<a href="#" class="block md:px-4 transition hover:text-primary dark:hover:text-primaryLight">
<span>Home</span>
</a>
</li>
<li>
<a href="#" class="block md:px-4 transition hover:text-primary dark:hover:text-primaryLight">
<span>Portfolio</span>
</a>
</li>
<li>
<a href="#" class="block md:px-4 transition hover:text-primary dark:hover:text-primaryLight">
<span>Services</span>
</a>
</li>
</ul>
</div>
<div class="w-full space-y-2 border-primary/10 dark:border-gray-700 flex flex-col -ml-1 sm:flex-row lg:space-y-0 md:w-max lg:border-l">
<a href="#" class="relative flex h-9 ml-auto items-center justify-center sm:px-6 before:absolute before:inset-0 before:rounded-full focus:before:bg-primary/10 dark:focus:before:bg-primaryLight/10 before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95">
<span class="relative text-sm font-semibold text-primary dark:text-primaryLight">Sign Up</span>
</a>
<a href="#" class="relative flex h-9 ml-auto items-center justify-center sm:px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary dark:before:bg-primaryLight before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95">
<span class="relative text-sm font-semibold text-white dark:text-gray-900">Login</span>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>
<div class="pt-32 md:py-12 xl:container m-auto px-6 md:px-12">
<div aria-hidden="true" class="absolute inset-0 my-auto w-96 h-32 rotate-45 bg-gradient-to-r from-primaryLight to-secondaryLight blur-3xl opacity-50 dark:opacity-20"></div>
<div class="relative lg:flex lg:items-center lg:gap-12">
<div class="text-center lg:text-left md:mt-12 lg:mt-0 sm:w-10/12 md:w-2/3 sm:mx-auto lg:mr-auto lg:w-6/12">
<h1 class="text-gray-900 font-bold text-4xl md:text-6xl lg:text-5xl xl:text-6xl dark:text-white">Build in your way but with our experts <span class="text-primary dark:text-primaryLight">Support.</span></h1>
<p class="mt-8 text-gray-600 dark:text-gray-300">Odio incidunt nam itaque sed eius modi error totam sit illum. Voluptas doloribus asperiores quaerat aperiam. Quidem harum omnis beatae ipsum soluta!</p>
<div>
<form action="" class="w-full mt-12">
<div class="relative flex items-center px-2 p-1 rounded-full bg-white dark:bg-gray-900 border dark:border-gray-700 border-primary/10 shadow-md md:p-2 lg:pr-3">
<div class="pl-6 py-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 m-auto fill-blue-900/60 dark:fill-gray-400" viewBox="0 0 20 20" fill="currentColor">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
</svg>
</div>
<input autocomplete="email" placeholder="Your mail address" class="w-full p-4 rounded-full placeholder-gray-600 dark:placeholder-white bg-transparent" type="email">
<div class="md:pr-1.5 lg:pr-0">
<button type="button" title="Start buying" class="relative h-12 w-20 sm:w-auto ml-auto sm:px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary dark:before:bg-primaryLight before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95">
<span class="relative hidden w-max text-white dark:text-gray-900 font-semibold md:block">
Get Started
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="relative h-6 w-6 mx-auto text-white dark:text-gray-900 md:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</div>
</div>
</form>
</div>
<div class="mt-12 flex gap-6 lg:gap-12 justify-between grayscale dark:grayscale-0">
<img src="./images/clients/airbnb.svg" class="h-8 sm:h-10 w-auto lg:h-12" alt="" />
<img src="./images/clients/ge.svg" class="h-8 sm:h-10 w-auto lg:h-12" alt="" />
<img src="./images/clients/coty.svg" class="h-8 sm:h-10 w-auto lg:h-12" alt="" />
<img src="./images/clients/microsoft.svg" class="h-8 sm:h-10 w-auto lg:h-12" alt="" />
</div>
</div>
<div class="overflow-hidden w-full lg:w-7/12 lg:-mr-16">
<img src="images/project.svg" alt="project illustration" height="" width="">
</div>
</div>
</div>
The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<!--
add this to your stylesheet
@layer components {
.navbar-active .hamburger div:first-child {
@apply rotate-45 translate-y-1.5;
}
.navbar-active .hamburger div:last-child {
@apply -rotate-45 -translate-y-1;
}
.navbar-active div:first-child div:first-child div:last-child{
@apply block lg:flex
}
}
-->
<header>
<input type="checkbox" name="hbr" id="hbr" class="hbr peer" hidden aria-hidden="true">
<nav class="fixed z-20 w-full bg-white/90 dark:bg-gray-900/80 backdrop-blur navbar shadow-2xl shadow-gray-600/5 border-b border-gray-100 dark:border-gray-800 peer-checked:navbar-active dark:shadow-none">
<div class="xl:container m-auto px-6 md:px-12 lg:px-6">
<div class="flex flex-wrap items-center justify-between gap-6 md:py-3 md:gap-0 lg:py-5">
<div class="w-full items-center flex justify-between lg:w-auto">
<a class="relative z-10" href="#" aria-label="logo">
<svg class="h-9 text-primary dark:text-primaryLight" viewBox="0 0 942 272" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="text-blue-900 dark:text-white" d="M392.603 62.008V102.536H420.075V130.552H392.603V192.024C392.603 197.827 393.963 202.088 396.683 204.808C399.403 207.347 403.664 208.616 409.467 208.616C413.093 208.616 416.72 208.253 420.347 207.528V233.64C415.632 235.635 409.195 236.632 401.035 236.632C388.704 236.632 379.003 233.187 371.931 226.296C364.859 219.224 361.323 209.523 361.323 197.192V130.552H336.843V102.536H343.643C350.352 102.536 355.429 100.632 358.875 96.824C362.32 93.016 364.043 88.0293 364.043 81.864V62.008H392.603ZM432.359 199.096C432.359 187.853 435.986 178.877 443.239 172.168C450.674 165.277 460.375 160.925 472.343 159.112L506.343 153.944C512.871 153.037 516.135 149.864 516.135 144.424C516.135 138.44 514.05 133.635 509.879 130.008C505.709 126.2 499.453 124.296 491.111 124.296C483.133 124.296 476.786 126.563 472.071 131.096C467.357 135.448 464.637 141.16 463.911 148.232L435.079 141.704C436.349 129.736 442.061 119.581 452.215 111.24C462.37 102.717 475.245 98.456 490.839 98.456C510.061 98.456 524.205 103.08 533.271 112.328C542.519 121.576 547.143 133.453 547.143 147.96V213.784C547.143 222.488 547.687 229.56 548.775 235H519.399C518.493 232.28 518.039 226.659 518.039 218.136C509.335 232.099 495.735 239.08 477.239 239.08C463.821 239.08 452.941 235.181 444.599 227.384C436.439 219.405 432.359 209.976 432.359 199.096ZM483.223 214.328C493.015 214.328 500.903 211.699 506.887 206.44C513.053 201 516.135 192.205 516.135 180.056V174.072L481.591 179.24C469.805 181.235 463.911 187.219 463.911 197.192C463.911 201.907 465.634 205.987 469.079 209.432C472.525 212.696 477.239 214.328 483.223 214.328ZM604.325 235H573.045V102.536H604.325V235ZM574.133 70.44C570.144 66.4507 568.149 61.6453 568.149 56.024C568.149 50.4027 570.144 45.5973 574.133 41.608C578.122 37.4373 582.928 35.352 588.549 35.352C594.352 35.352 599.248 37.3467 603.237 41.336C607.226 45.3253 609.221 50.2213 609.221 56.024C609.221 61.6453 607.226 66.4507 603.237 70.44C599.248 74.4293 594.352 76.424 588.549 76.424C582.928 76.424 578.122 74.4293 574.133 70.44ZM664.341 235H632.789V38.072H664.341V235ZM778.227 220.312C775.144 226.115 770.067 230.648 762.995 233.912C756.104 237.176 748.669 238.808 740.691 238.808C725.277 238.808 713.037 233.821 703.971 223.848C695.085 213.875 690.643 201.272 690.643 186.04V102.536H722.195V180.328C722.195 189.213 724.371 196.467 728.723 202.088C733.075 207.709 739.784 210.52 748.851 210.52C757.736 210.52 764.536 207.8 769.251 202.36C774.147 196.92 776.595 189.757 776.595 180.872V102.536H808.147V210.792C808.147 218.771 808.6 226.84 809.507 235H779.315C778.589 231.011 778.227 226.115 778.227 220.312ZM825.051 199.096L852.523 191.48C853.067 197.827 855.696 203.176 860.411 207.528C865.126 211.88 871.472 214.056 879.451 214.056C885.616 214.056 890.422 212.605 893.867 209.704C897.494 206.803 899.307 203.176 899.307 198.824C899.307 191.208 894.139 186.312 883.803 184.136L864.219 179.784C852.795 177.245 844 172.531 837.835 165.64C831.67 158.749 828.587 150.589 828.587 141.16C828.587 129.555 833.302 119.581 842.731 111.24C852.16 102.717 863.675 98.456 877.275 98.456C885.979 98.456 893.686 99.7253 900.395 102.264C907.104 104.803 912.272 108.157 915.899 112.328C919.707 116.317 922.608 120.216 924.603 124.024C926.598 127.832 927.867 131.64 928.411 135.448L901.755 143.064C901.03 137.987 898.672 133.453 894.683 129.464C890.875 125.293 885.072 123.208 877.275 123.208C871.835 123.208 867.302 124.749 863.675 127.832C860.048 130.733 858.235 134.269 858.235 138.44C858.235 145.875 862.678 150.499 871.563 152.312L891.691 156.392C904.022 159.112 913.451 164.008 919.979 171.08C926.507 178.152 929.771 186.675 929.771 196.648C929.771 207.709 925.328 217.592 916.443 226.296C907.739 234.819 895.499 239.08 879.723 239.08C870.656 239.08 862.496 237.72 855.243 235C848.171 232.28 842.55 228.835 838.379 224.664C834.39 220.312 831.216 216.051 828.859 211.88C826.683 207.528 825.414 203.267 825.051 199.096Z" fill="currentColor"/>
<circle cx="126.5" cy="135.5" r="49" stroke="none" stroke-width="11" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M157.616 38.7183C137.547 27.9866 113.297 28.3356 93.5 39.7654L60.0914 59.0538C39.6709 70.8436 27.0914 92.632 27.0914 116.212V154.788C27.0914 178.368 39.6709 200.156 60.0914 211.946L93.5 231.235C113.92 243.024 139.08 243.024 159.5 231.235L192.909 211.946C213.329 200.156 225.909 178.368 225.909 154.788V116.212C225.909 99.106 219.289 82.9431 207.857 70.8562C214.603 65.9281 219.348 58.424 220.644 49.7914C239.072 66.6422 249.909 90.6554 249.909 116.212V154.788C249.909 186.942 232.755 216.654 204.909 232.731L171.5 252.019C143.654 268.096 109.346 268.096 81.5 252.019L48.0914 232.731C20.2453 216.654 3.09137 186.942 3.09137 154.788V116.212C3.09137 84.0576 20.2453 54.3462 48.0914 38.2692L81.5 18.9808C109.138 3.02371 143.143 2.90471 170.876 18.6237C164.141 23.2603 159.27 30.4096 157.616 38.7183Z" fill="currentColor"/>
<circle cx="189" cy="45" r="21" fill="currentColor"/>
</svg>
</a>
<label for="hbr" class="peer-checked:hamburger block relative z-20 p-6 -mr-6 cursor-pointer lg:hidden">
<div aria-hidden="true" class="m-auto h-0.5 w-5 rounded bg-gray-900 dark:bg-gray-300 transition duration-300"></div>
<div aria-hidden="true" class="m-auto mt-2 h-0.5 w-5 rounded bg-gray-900 dark:bg-gray-300 transition duration-300"></div>
</label>
</div>
<div class="navmenu hidden w-full flex-wrap justify-end items-center mb-16 space-y-8 p-6 border border-gray-100 rounded-3xl shadow-2xl shadow-gray-300/20 bg-white dark:bg-gray-800 lg:space-y-0 lg:p-0 lg:m-0 lg:flex md:flex-nowrap lg:bg-transparent lg:w-7/12 lg:shadow-none dark:shadow-none dark:border-gray-700 lg:border-0">
<div class="text-gray-600 dark:text-gray-300 lg:pr-4">
<ul class="space-y-6 tracking-wide font-medium text-base lg:text-sm lg:flex lg:space-y-0">
<li>
<a href="#" class="block md:px-4 transition hover:text-primary dark:hover:text-primaryLight">
<span>Home</span>
</a>
</li>
<li>
<a href="#" class="block md:px-4 transition hover:text-primary dark:hover:text-primaryLight">
<span>Portfolio</span>
</a>
</li>
<li>
<a href="#" class="block md:px-4 transition hover:text-primary dark:hover:text-primaryLight">
<span>Services</span>
</a>
</li>
</ul>
</div>
<div class="w-full space-y-2 border-primary/10 dark:border-gray-700 flex flex-col -ml-1 sm:flex-row lg:space-y-0 md:w-max lg:border-l">
<a href="#" class="relative flex h-9 ml-auto items-center justify-center sm:px-6 before:absolute before:inset-0 before:rounded-full focus:before:bg-primary/10 dark:focus:before:bg-primaryLight/10 before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95">
<span class="relative text-sm font-semibold text-primary dark:text-primaryLight">Sign Up</span>
</a>
<a href="#" class="relative flex h-9 ml-auto items-center justify-center sm:px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary dark:before:bg-primaryLight before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95">
<span class="relative text-sm font-semibold text-white dark:text-gray-900">Login</span>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>
<div class="relative pt-40 pb-20 lg:pt-44">
<div class="relative xl:container m-auto px-6 md:px-12 lg:px-6">
<h1 class="sm:mx-auto sm:w-10/12 md:w-2/3 font-black text-blue-900 text-4xl text-center sm:text-5xl md:text-6xl lg:w-auto lg:text-left xl:text-7xl dark:text-white">Run successful remote and <br class="lg:block hidden"> <span class="relative text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary dark:from-primaryLight dark:to-secondaryLight">Hybrid teams</span>.</h1>
<div class="lg:flex">
<div class="relative mt-8 md:mt-16 space-y-8 sm:w-10/12 md:w-2/3 lg:ml-0 sm:mx-auto text-center lg:text-left lg:mr-auto lg:w-7/12">
<p class="sm:text-lg text-gray-700 dark:text-gray-300 lg:w-11/12">
DailyBot takes chat and collaboration to the next level: daily standups, team check-ins, surveys, kudos, best companion bot for your virtual watercooler, 1:1 intros, motivation tracking and more.
</p>
<span class="block font-semibold text-gray-500 dark:text-gray-400">The best companion bot for your chat app.</span>
<div class="grid grid-cols-3 space-x-4 md:space-x-6 md:flex md:justify-center lg:justify-start">
<a aria-label="add to slack" href="#" class="p-4 border border-gray-200 dark:bg-gray-800 dark:border-gray-700 rounded-full duration-300 hover:border-cyan-400 hover:shadow-lg hover:shadow-cyan-600/20 dark:hover:border-cyan-300/30">
<div class="flex justify-center space-x-4">
<img class="w-6 h-6" src="images/slack.png" alt="slack logo" loading="lazy" width="128" height="128">
<span class="hidden font-medium md:block dark:text-white">Slack</span>
</div>
</a>
<a aria-label="add to chat" href="#" class="p-4 border border-gray-200 dark:bg-gray-800 dark:border-gray-700 rounded-full duration-300 hover:border-green-400 hover:shadow-lg hover:shadow-lime-600/20 dark:hover:border-green-300/30">
<div class="flex justify-center space-x-4">
<img class="w-6 h-6" src="images/chat.png" alt="chat logo" loading="lazy" width="128" height="128">
<span class="hidden font-medium md:block dark:text-white">Google Chat</span>
</div>
</a>
<a aria-label="add to zoom" href="#" class="p-4 border border-gray-200 dark:bg-gray-800 dark:border-gray-700 rounded-full duration-300 hover:border-blue-400 hover:shadow-lg hover:shadow-blue-600/20 dark:hover:border-blue-300/30">
<div class="flex justify-center space-x-4">
<img class="w-6 h-6" src="images/zoom.png" alt="chat logo" loading="lazy" width="128" height="128">
<span class="hidden font-medium md:block dark:text-white">Zoom</span>
</div>
</a>
</div>
<div class="dark:text-gray-300">
🔥🌟
<span>Other integrations :</span>
<a href="#" class="font-semibold text-gray-700 dark:text-gray-200">Discord,</a>
<a href="#" class="font-semibold text-gray-700 dark:text-gray-200">Telegram</a>
</div>
<div class="pt-12 flex gap-6 lg:gap-12 justify-between grayscale lg:w-2/3">
<img src="./images/clients/airbnb.svg" class="h-8 sm:h-10 w-auto lg:h-12" alt="" />
<img src="./images/clients/ge.svg" class="h-8 sm:h-10 w-auto lg:h-12" alt="" />
<img src="./images/clients/coty.svg" class="h-8 sm:h-10 w-auto lg:h-12" alt="" />
<img src="./images/clients/microsoft.svg" class="h-8 sm:h-10 w-auto lg:h-12" alt="" />
</div>
</div>
<div class="mt-12 md:mt-0 lg:absolute -right-10 lg:w-7/12">
<div class="relative w-full">
<div aria-hidden="true" class="absolute scale-75 md:scale-110 inset-0 m-auto w-full h-full md:w-96 md:h-96 rounded-full rotate-45 bg-gradient-to-r from-primaryLight to-secondaryLight blur-3xl"></div>
<img src="images/globalization-cuate.svg" class="relative w-full" alt="wath illustration" loading="lazy" width="320" height="280">
</div>
</div>
</div>
</div>
</div>
The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<body class="bg-white dark:bg-darker">
<nav class="fixed z-10 w-full bg-white dark:bg-transparent md:absolute md:bg-transparent">
<div class="container m-auto px-2 md:px-12 lg:px-7">
<div class="flex flex-wrap items-center justify-between py-3 gap-6 md:py-4 md:gap-0">
<input type="checkbox" name="toggle_nav" id="toggle_nav" class="peer hidden">
<div class="w-full px-6 flex justify-between lg:w-max md:px-0 z-30">
<a href="#" aria-label="logo" class="flex space-x-2 items-center">
<img src="images/icon.png" class="w-12" alt="tailus logo" width="144" height="133">
<span class="text-2xl font-bold text-yellow-900 dark:text-white">Tailus <span class="text-yellow-700 dark:text-yellow-300">Feedus</span></span>
</a>
<div class="flex items-center lg:hidden max-h-10">
<label role="button" for="toggle_nav" aria-label="humburger" id="hamburger" class="relative w-10 h-auto p-2">
<div id="line"
class="m-auto h-0.5 w-6 rounded bg-yellow-900 dark:bg-white transition duration-300"></div>
<div id="line2"
class="m-auto mt-2 h-0.5 w-6 rounded bg-yellow-900 dark:bg-white transition duration-300">
</div>
</label>
</div>
</div>
<label role="button" for="toggle_nav" class="hidden peer-checked:block fixed w-full h-full left-0 top-0 z-10 bg-yellow-200 dark:bg-black dark:bg-opacity-80 bg-opacity-30 backdrop-blur backdrop-filter"></label>
<div class="hidden peer-checked:flex w-full flex-col lg:flex lg:flex-row justify-end z-30 items-center gap-y-6 p-6 rounded-xl bg-white dark:bg-gray-900 lg:gap-y-0 lg:p-0 md:flex-nowrap lg:bg-transparent lg:w-7/12">
<div class="text-gray-600 lg:pr-4 w-full">
<ul class="tracking-wide font-medium text-sm
flex flex-col gap-y-6 lg:gap-y-0 lg:flex-row w-full">
<li>
<a href="#" class="block md:px-4 transition dark:text-gray-300 dark:hover:text-yellow-300 hover:text-yellow-700">
<span>I've a restaurant</span>
</a>
</li>
<li>
<a href="#" class="block md:px-4 transition dark:text-gray-300 dark:hover:text-yellow-300 hover:text-yellow-700">
<span>Wishlist</span>
</a>
</li>
<li>
<a href="#" class="block md:px-4 transition dark:text-gray-300 dark:hover:text-yellow-300 hover:text-yellow-700">
<span>Cart</span>
</a>
</li>
</ul>
</div>
<div class="w-full min-w-max space-y-2
border-yellow-200 lg:space-y-0 sm:w-max lg:border-l dark:lg:border-gray-700">
<button type="button" title="Start buying" class="w-full py-3 px-6 text-center rounded-full transition active:bg-yellow-200 dark:active:bg-gray-700 dark:focus:bg-gray-800 focus:bg-yellow-100 sm:w-max">
<span class="block text-yellow-800 dark:text-white font-semibold text-sm">
Sign up
</span>
</button>
<button type="button" title="Start buying" class="w-full py-3 px-6 text-center rounded-full transition bg-yellow-300 hover:bg-yellow-100 active:bg-yellow-400 focus:bg-yellow-300 sm:w-max">
<span class="block text-yellow-900 font-semibold text-sm">
Login
</span>
</button>
</div>
</div>
</div>
</div>
</nav>
<div class="relative bg-yellow-50 dark:bg-gray-900">
<div class="container m-auto px-6 pt-32 md:px-12 lg:pt-[4.8rem] lg:px-7">
<div class="flex items-center flex-wrap px-2 md:px-0">
<div class="relative lg:w-6/12 lg:py-24 xl:py-32">
<h1 class="font-bold text-4xl text-yellow-900 dark:text-yellow-50 md:text-5xl lg:w-10/12">Your favorite dishes, right at your door</h1>
<form action="" class="w-full mt-12">
<div class="relative flex p-1 rounded-full bg-white dark:bg-gray-800 dark:border-gray-600 border border-yellow-200 shadow-md md:p-2">
<div id="categories" class="hidden p-3 rounded-full bg-transparent w-80 relative md:p-4 md:flex justify-between items-center select-none">
<input type="text" name="catName" id="catName" value="FastFood" class="pl-3 w-full bg-white text-base font-medium cursor-pointer dark:bg-transparent dark:text-gray-50" readonly>
<input type="checkbox" name="toggleLstCat" id="toggleLstCat" class="peer hidden outline-none">
<label role="button" for="toggleLstCat" class="absolute top-0 left-0 w-full h-full"></label>
<span class="min-w-max">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-gray-700 dark:fill-gray-200" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</span>
<div id="categorieLst" class="absolute transition-all duration-500 ease-in-out translate-y-10 opacity-0 invisible peer-checked:opacity-100 peer-checked:visible peer-checked:translate-y-1 top-full left-0 w-full bg-white border border-yellow-200 shadow-md rounded-lg py-2">
<ul class="flex flex-col w-full">
<li class="cursor-pointer transition hover:bg-gray-100 hover:bg-opacity-80 flex px-5 py-2">FastFood</li>
<li class="cursor-pointer transition hover:bg-gray-100 hover:bg-opacity-80 flex px-5 py-2">Restaurant</li>
<li class="cursor-pointer transition hover:bg-gray-100 hover:bg-opacity-80 flex px-5 py-2">Marketing</li>
</ul>
</div>
</div>
<input placeholder="Your favorite food" class="w-full p-4 rounded-full outline-none bg-transparent dark:text-white dark:placeholder-gray-300" type="text">
<button type="button" title="Start buying" class="ml-auto py-3 px-6 rounded-full text-center transition bg-gradient-to-b from-yellow-200 to-yellow-300 hover:to-red-300 active:from-yellow-400 focus:from-red-400 md:px-12">
<span class="hidden text-yellow-900 font-semibold md:block">
Search
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 mx-auto text-yellow-900 md:hidden" fill="currentColor" class="bi bi-search" 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>
</form>
<p class="mt-8 text-gray-700 dark:text-gray-200 lg:w-10/12">Sit amet consectetur adipisicing elit. <a href="#" class="text-yellow-700 dark:text-yellow-300">connection</a> tenetur nihil quaerat suscipit, sunt dignissimos.</p>
</div>
<div class="ml-auto -mb-24 lg:-mb-56 lg:w-6/12">
<img src="images/food.webp" class="relative w-full h-auto" alt="food illustration" loading="lazy" width="100" height="450">
</div>
</div>
</div>
</div>
</body>
The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<body class="bg-white dark:bg-gray-900">
<div class="relative w-full">
<nav class="absolute w-full">
<div class="container m-auto px-6 md:px-12 lg:px-7">
<div class="flex flex-wrap items-center justify-between py-6 gap-6 md:py-4 md:gap-0 relative">
<input type="checkbox" name="toggle_nav" id="toggle_nav" class="peer hidden">
<div class="w-full flex justify-between md:w-max md:px-0">
<a href="#" aria-label="logo">
<img src="images/logo.svg" class="w-36 grayscale dark:contrast-50 contrast-200" alt="tailus logo" width="144" height="68">
</a>
<div class="flex items-center md:hidden max-h-10">
<label role="button" for="toggle_nav" aria-label="humburger" id="hamburger" class="relative z-40 px-2 py-3 sm:-mr-6">
<div id="line"
class="m-auto h-0.5 w-6 rounded bg-sky-900 dark:bg-gray-300 transition duration-300"></div>
<div id="line2"
class="m-auto mt-2 h-0.5 w-6 rounded bg-sky-900 dark:bg-gray-300 transition duration-300">
</div>
</label>
</div>
</div>
<label role="button" for="toggle_nav" class="fixed w-full z-30 h-full top-0 left-0 bg-gray-700 bg-opacity-40 hidden peer-checked:block md:peer-checked:hidden"></label>
<div class="flex z-50 flex-col md:flex-row justify-between
items-center gap-y-4 p-6 bg-white dark:bg-gray-800 md:w-8/12
md:gap-y-4 md:p-0
md:bg-transparent lg:w-7/12 fixed top-0 -left-full transition-all duration-500 peer-checked:left-0 max-w-sm h-full
md:left-0 md:h-auto w-4/5 md:max-w-none md:relative lg:first-letter:top-0">
<div class="flex md:hidden w-full pb-5">
<a href="#" aria-label="logo">
<img src="images/logo.svg" class="w-36 grayscale contrast-200" alt="tailus logo" width="144" height="68">
</a>
</div>
<div class="block w-full h-full md:h-auto">
<ul class="space-y-8 tracking-wide font-medium md:flex md:space-y-0">
<li>
<a href="#" class="block md:px-3">
<div class="relative text-yellow-800 dark:text-yellow-300
before:absolute before:-inset-2 before:w-full before:h-0.5 before:origin-left dark:before:bg-yelloe-500 before:mx-auto before:mt-auto before:rounded-full before:bg-yellow-800">
<span>Nike</span>
</div>
</a>
</li>
<li>
<a href="#" class="block md:px-3 group">
<div class="relative text-gray-600
before:absolute before:-inset-2 before:w-full before:h-0.5 before:origin-left dark:before:bg-yelloe-500 before:mx-auto before:mt-auto before:rounded-full before:bg-yellow-800 before:transition before:scale-x-0 group-hover:before:scale-x-100">
<span class="transition group-hover:text-yellow-700 dark:text-gray-300 dark:group-hover:text-yellow-300">Adiddas</span>
</div>
</a>
</li>
<li>
<a href="#" class="block md:px-3 group">
<div class="relative text-gray-600
before:absolute before:-inset-2 before:w-full before:h-0.5 before:origin-left dark:before:bg-yelloe-500 before:mx-auto before:mt-auto before:rounded-full before:bg-yellow-800 before:transition before:scale-x-0 group-hover:before:scale-x-100">
<span class="transition group-hover:text-yellow-700 dark:text-gray-300 dark:group-hover:text-yellow-300">Cart</span>
</div>
</a>
</li>
</ul>
</div>
<div class="w-full gap-y-4 md:w-max md:gap-y-0 md:gap-x-4 flex md:flex-row flex-col">
<button type="button" title="Start buying" class="group w-full py-3 px-6 text-center transition dark:active:bg-yellow-800 dark:focus:bg-yellow-900 active:bg-yellow-200 focus:bg-yellow-100 sm:w-max">
<span class="block text-gray-700 dark:text-gray-300 font-semibold group-focus:text-yellow-700 dark:group-focus:text-yellow-100">
Login
</span>
</button>
<button type="button" title="Start buying" class="w-full py-3 px-6 text-center transition dark:bg-gray-700 bg-gray-900 hover:bg-gray-800 active:bg-gray-700 focus:bg-gray-800 md:w-max">
<span class="block text-white font-semibold">
Shop now
</span>
</button>
</div>
</div>
</div>
</div>
</nav>
<div class="min-h-screen flex">
<div class="container m-auto px-6 py-40 md:px-12 lg:py-0 lg:px-7">
<div class="flex items-center flex-wrap gap-12 lg:gap-0">
<div class="lg:w-5/12 space-y-8">
<span class="flex space-x-2">
<span class="block w-14 mb-2 border-b-2 border-gray-600"></span>
<span class="font-medium text-gray-600 dark:text-gray-400">New this summer</span>
</span>
<h1 class="text-4xl font-bold md:text-6xl dark:text-white">The New <br> Way To Discover</h1>
<p class="text-xl text-gray-700 dark:text-gray-300">Booking Company-Wide Savings, Invoicing and reporting docs.</p>
<div class="flex space-x-4">
<button type="button" title="Start buying" class="w-full py-3 px-6 text-center transition bg-gray-900 dark:bg-gray-700 hover:bg-gray-800 active:bg-gray-700 focus:bg-gray-800 sm:w-max">
<span class="block text-white font-semibold">
Shop now
</span>
</button>
<button type="button" title="Start buying" class="group w-full py-3 px-6 text-center transition dark:active:bg-yellow-800 dark:focus:bg-yellow-900 active:bg-yellow-200 focus:bg-yellow-100 sm:w-max">
<span class="block text-gray-700 dark:text-white font-semibold group-focus:text-yellow-700 dark:group-focus:text-yellow-100">
Our showreel
</span>
</button>
</div>
</div>
<div class="hidden relative md:block lg:w-7/12">
<div aria-hidden="true" class="absolute inset-0 m-auto w-[30rem] h-[30rem] rounded-full bg-yellow-200">
</div>
<img src="images/shoes.png" class="relative ml-auto" alt="">
</div>
</div>
</div>
<div class="absolute bottom-8 w-full">
<div class="container m-auto px-6 flex items-end justify-between md:px-12 lg:px-7">
<a href="" class="hidden space-x-4 md:flex md:items-center">
<img class="w-14 h-14 rounded-full object-cover" src="images/user.png" alt="">
<div class="text-gray-600 dark:text-gray-400">
<span class="text-sm">Question ?</span>
<p class="font-semibold text-gray-700 dark:text-gray-300">Talk to our assistant</p>
</div>
</a>
<div>
<a href="#" class="hover:text-yellow-700 dark:text-gray-300 dark:hover:text-red-400">Facebook /</a>
<a href="#" class="hover:text-yellow-700 dark:text-gray-300 dark:hover:text-red-400">YouTube / </a>
<a href="#" class="hover:text-yellow-700 dark:text-gray-300 dark:hover:text-red-400">Twitter</a>
</div>
</div>
</div>
</div>
</div>
</body>
The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<body class="bg-white dark:bg-gray-900">
<header>
<nav class="fixed z-40 w-full border-b dark:border-gray-700 bg-white dark:bg-gray-800 md:absolute md:bg-transparent">
<div class="container m-auto px-2 md:px-12 lg:px-7">
<div class="flex px-6 md:px-0 z-20 flex-wrap items-center justify-between py-3 gap-6 md:py-4 md:gap-0">
<input type="checkbox" name="" id="toggleNav" class="peer hidden">
<label for="toggleNav" role="overlaynav" class="fixed left-0 top-0 transition-all
md:peer-checked:hidden md:hidden opacity-0 hidden peer-checked:z-0
peer-checked:opacity-75 peer-checked:block w-full h-screen
bg-gray-200 bg-opacity-75 dark:bg-darker dark:opacity-80"></label>
<div class="relative z-40">
<a href="#" aria-label="logo">
<img src="images/logo.svg" class="w-32 sm:w-36 dark:hidden" alt="tailus logo" width="144" height="68">
<img src="images/logo-white.svg" class="w-32 sm:w-36 hidden dark:block" alt="tailus logo" width="144" height="68">
</a>
</div>
<div id="navlinks"
class="fixed h-full w-4/5 max-w-sm top-0 -left-full peer-checked:-left-0 md:relative md:top-0 md:left-0 transition-all z-30 md:flex items-center p-8 bg-white dark:bg-gray-800 md:space-y-0 md:p-0 md:flex-nowrap md:bg-transparent md:w-max">
<div class="z-20 flex gap-8 md:gap-0 flex-col md:flex-row md:items-center w-full">
<ul class="pt-28 lg:pt-0 gap-8 tracking-wide font-medium flex-col flex md:flex-row md:gap-0">
<li class="max-w-max">
<a href="#" class="block md:px-3">
<div
class="relative text-cyan-800 dark:text-white
before:absolute before:-bottom-2 md:before:-bottom-7 before:w-full before:h-0.5 before:mx-auto before:mt-auto before:rounded-full before:bg-cyan-800 dark:before:bg-cyan-400">
<span>Nike</span>
</div>
</a>
</li>
<li class="max-w-max">
<a href="#" class="block md:px-3 group">
<div
class="relative text-gray-600 dark:text-gray-300
before:absolute before:-bottom-2 md:before:-bottom-7 before:origin-left before:w-full before:h-0.5 before:mx-auto before:mt-auto before:rounded-full before:bg-cyan-800 dark:before:bg-cyan-400 before:transition before:scale-x-0 group-hover:before:scale-x-100">
<span class="transition group-hover:text-cyan-700 dark:group-hover:text-cyan-400">Adiddas</span>
</div>
</a>
</li>
<li class="max-w-max">
<a href="#" class="block md:px-3 group">
<div
class="relative text-gray-600 dark:text-gray-300
before:absolute before:-bottom-2 md:before:-bottom-7 before:origin-left before:w-full before:h-0.5 before:mx-auto before:mt-auto before:rounded-full before:bg-cyan-800 dark:before:bg-cyan-400 before:transition before:scale-x-0 group-hover:before:scale-x-100">
<span class="transition group-hover:text-cyan-700 dark:group-hover:text-cyan-400">Cart</span>
</div>
</a>
</li>
</ul>
<div class="flex sm:hidden pt-4 w-full">
<button type="button" title="Start buying"
class=" flex justify-center items-center w-full py-3 px-6 text-center rounded-full transition bg-gray-900 dark:bg-gray-700 hover:bg-cyan-500 active:bg-cyan-600 focus:bg-cyan-800">
<span class="block text-white text-sm">
Shop now
</span>
</button>
</div>
</div>
</div>
<div class="block-endnav w-max flex items-center gap-4">
<button type="button" title="Start buying"
class="hidden sm:block w-full py-3 px-6 text-center rounded-full transition bg-gray-900 dark:bg-gray-700 hover:bg-cyan-500 active:bg-cyan-600 focus:bg-cyan-800 sm:w-max">
<span class="block text-white text-sm">
Shop now
</span>
</button>
<div class="flex items-center md:hidden max-h-10">
<label role="button" for="toggleNav" aria-label="humburger" id="hamburger" class="relative p-6 -mr-6">
<div role="hidden" id="line"
class="m-auto h-0.5 w-6 rounded bg-sky-900 dark:bg-gray-200 transition duration-300"></div>
<div role="hidden" id="line2"
class="m-auto mt-2 h-0.5 w-6 rounded bg-sky-900 dark:bg-gray-200 transition duration-300">
</div>
</label>
</div>
</div>
</div>
</div>
</nav>
</header>
<div class="border-b dark:border-gray-700">
<div class="container m-auto px-6 pt-24 md:px-12 lg:pt-[4.8rem] lg:px-7">
<div class="grid lg:grid-cols-2 items-center gap-12 px-2 md:px-0">
<div class="col-span-1">
<div class="relative w-full">
<img src="images/shoes2.jpg" alt="shoes" loading="lazy" width="100%" height="640">
<div class="absolute bottom-2 right-2 bg-white dark:bg-gray-800">
<div class="flex p-1">
<button aria-label="button-left" class="p-3 border-r dark:border-gray-600">
<svg class="fill-gray-800 dark:fill-white" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
class="rotate-180" fill="currentColor" class="bi bi-chevron-right"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
</svg>
</button>
<button aria-label="button-right" class="p-3">
<svg class="fill-gray-800 dark:fill-white" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="relative col-span-1">
<h1 class="font-bold text-5xl sm:text-6xl md:text-7xl xl:text-8xl dark:text-white">A Look for every <span
class="text-cyan-800 dark:text-cyan-400">mood</span>.</h1>
<div class="mt-8 lg:mt-16 space-y-8">
<p class="text-gray-700 dark:text-gray-300">Sit amet consectetur adipisicing elit. eligendi tenetur nihil
quaerat suscipit, sunt dignissimos.</p>
<div class="flex space-x-4 mt-6">
<button type="button" title="Start buying"
class="w-full py-3 px-6 text-center rounded-full transition duration-300 bg-gray-900 dark:bg-gray-700 hover:bg-cyan-500 active:bg-cyan-600 focus:bg-cyan-800 sm:w-max">
<span class="block text-white text-sm">
Shop now
</span>
</button>
<button type="button" title="Start buying"
class="w-full py-3 px-6 text-center rounded-full transition border border-gray-200 dark:border-gray-700 sm:w-max">
<span class="block text-gray-800 text-sm dark:text-white">
View store
</span>
</button>
</div>
</div>'
</div>
</div>
</div>
</div>
</body>