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.
<header>
<nav id="header_" class="fixed top-0 left-0 z-20 w-full transition-all ease-in">
<div class="container m-auto px-6 md:px-12 lg:px-6">
<div class="flex flex-wrap items-center justify-between py-6 md:py-4 md:gap-0">
<div class="w-full flex items-center justify-between lg:w-auto">
<a href="#" aria-label="logo">
<img src="images/logo.svg" class="w-36" alt="tailus logo" width="144" height="48">
</a>
<div class="block max-w-max">
<button aria-label="humburger" id="hamburger" class="block relative h-auto lg:hidden">
<div aria-hidden="true" id="line" class="m-auto h-0.5 w-6 rounded bg-gray-100 transition duration-300"></div>
<div aria-hidden="true" id="line2" class="m-auto mt-2 h-0.5 w-6 rounded bg-gray-100 transition duration-300"></div>
</button>
</div>
</div>
<div id="navbar" class="flex h-0 lg:h-auto overflow-hidden lg:flex lg:pt-0 w-full md:space-y-0 lh:p-0 md:bg-transparent lg:w-auto transition-all duration-300">
<div id="navBox" class="w-full p-6 lg:p-0 bg-white bg-opacity-40 backdrop-blur-md lg:items-center flex flex-col lg:flex-row lg:bg-transparent transition-all ease-in">
<ul class="space-y-6 pb-6 tracking-wide font-medium text-gray-800 lg:text-gray-100 lg:pb-0 lg:pr-6 lg:items-center lg:flex lg:space-y-0">
<li>
<a href="#" class="block md:px-3">
<span>Product</span>
</a>
</li>
<li>
<a href="#" class="block md:px-3">
<span>Use Cases</span>
</a>
</li>
<li>
<a href="#" class="block md:px-3">
<span>Integrations</span>
</a>
</li>
<li>
<a href="#" class="block md:px-3">
<span>Pricing</span>
</a>
</li>
<li>
<a href="#" class="block md:px-3">
<span>Blog</span>
</a>
</li>
</ul>
<ul class="border-t w-full lg:w-max gap-3 pt-2 lg:pt-0 lg:pl-2 lg:border-t-0 lg:border-l flex flex-col lg:gap-0 lg:items-center lg:flex-row">
<li class="flex w-full lg:max-w-max justify-center">
<button type="button" title="Start buying" class="flex w-full py-3 px-6 rounded-md text-center transition border border-purple-600 bg-white bg-opacity-40 backdrop-blur-md lg:backdrop-blur-none lg:bg-opacity-0 lg:bg-transparent lg:border-transparent active:border-purple-400 justify-center max-w-lg lg:max-w-max">
<span class="block text-gray-700 lg:text-white font-semibold">
Login
</span>
</button>
</li>
<li class="flex w-full lg:max-w-max justify-center">
<button type="button" title="Start buying" class="flex w-full py-3 px-6 rounded-lg text-center transition bg-purple-600 lg:bg-white active:bg-purple-700 lg:active:bg-purple-200 focus:bg-purple-500 lg:focus:bg-purple-100 justify-center max-w-lg lg:max-w-max">
<span class="block text-sm text-white lg:text-purple-600 font-semibold">
Sign In
</span>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>
<div class="relative">
<img class="absolute inset-0 w-full h-full object-cover object-top" src="images/background2.webp" width="400" height="500" alt="hero background image">
<div aria-hidden="true" class="absolute inset-0 w-full h-full bg-purple-900 bg-opacity-30 backdrop-blur-sm"></div>
<div class="relative container m-auto px-6 md:px-12 lg:px-6">
<div class="mb-12 pt-40 space-y-16 md:mb-20 md:pt-56 lg:w-8/12 lg:mx-auto">
<h1 class="text-white text-center text-3xl font-bold sm:text-4xl md:text-5xl">
Don't look again for your next freelance projects, you got them.
</h1>
<form action="" class="w-full">
<div class="relative flex p-1 rounded-xl bg-white shadow-2xl md:p-2">
<div id="catJobBox" class="hidden text-gray-600 relative md:flex justify-between items-center min-w-max select-none">
<input type="checkbox" name="" id="toggleJobLstCat" class="peer hidden outline-none">
<input type="text" name="" id="catJobName" value="Design" class="pl-3 w-full bg-white text-base font-medium cursor-pointer" readonly>
<label for="toggleJobLstCat" 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" 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="catJobLst" 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 bg-opacity-80 rounded-lg py-2">
<ul class="flex flex-col w-full">
<li class="cursor-default transition hover:bg-gray-100 hover:bg-opacity-80 flex px-5 py-2">Design</li>
<li class="cursor-default transition hover:bg-gray-100 hover:bg-opacity-80 flex px-5 py-2">Development</li>
<li class="cursor-default transition hover:bg-gray-100 hover:bg-opacity-80 flex px-5 py-2">Marketing</li>
</ul>
</div>
</div>
<input placeholder="Your favorite position" class="w-full p-4 outline-none text-gray-600" type="text">
<button type="button" title="Start buying" class="ml-auto py-3 px-6 rounded-lg text-center transition bg-gradient-to-br from-pink-500 to-purple-500 hover:to-purple-600 active:from-pink-700 focus:from-pink-600 md:px-12">
<span class="hidden text-white font-semibold md:block">
Search
</span>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 mx-auto text-white 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>
</div>
<div class="pb-16">
<div class="md:px-12">
<span class="block text-center font-medium text-pink-50">Trusted by your favorite giants</span>
<div class="mt-8 -mx-6 px-6 overflow-x-auto md:overflow-x-hidden">
<div class="w-max flex justify-center flex-wrap items-center gap-4 md:w-auto md:gap-6 lg:gap-8">
<div class="flex items-center">
<img class="w-36 grayscale contrast-200 brightness-200" src="images/clients/microsoft.png" alt="client logo" loading="lazy" width="100" height="122">
</div>
<div class="flex items-center">
<img class="w-28 grayscale contrast-200 brightness-200" src="images/clients/grabyo.png" alt="client logo" loading="lazy" width="100" height="219">
</div>
<div class="flex items-center">
<img class="w-32 grayscale contrast-200 brightness-200" src="images/clients/lifegroups.png" alt="client logo" loading="lazy" width="100" height="219">
</div>
<div class="flex items-center">
<img class="w-24 grayscale contrast-200 brightness-200" src="images/clients/lilly.png" alt="client logo" loading="lazy" width="100" height="219">
</div>
<div class="flex items-center">
<img class="w-28 grayscale contrast-200 brightness-200" src="images/clients/grabyo.png" alt="client logo" loading="lazy" width="100" height="219">
</div>
<div class="flex items-center">
<img class="w-32 grayscale contrast-200 brightness-200" src="images/clients/lifegroups.png" alt="client logo" loading="lazy" width="100" height="219">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ==================js script================== -->
/*
window.addEventListener('scroll', e => {
const header = document.querySelector('#header_')
e.preventDefault()
header.classList.toggle('sticky-nav', window.scrollY > 0);
})
const toggleMobileMenu = document.querySelector('#hamburger')
const navbar = document.querySelector('#navbar')
toggleMobileMenu.addEventListener('click', e => {
e.preventDefault()
toggleMobileMenu.querySelector('#line').classList.toggle('rotate-45')
toggleMobileMenu.querySelector('#line').classList.toggle('translate-y-1.5')
toggleMobileMenu.querySelector('#line2').classList.toggle('-rotate-45')
toggleMobileMenu.querySelector('#line2').classList.toggle('-translate-y-1')
if (navbar.clientHeight === 0) {
navbar.style.paddingTop = '20px'
navbar.style.paddingBottom = '20px'
navbar.style.height = `${parseInt(navbar.scrollHeight) + 60}px`
return
}
navbar.style.height = '0px'
navbar.style.paddingTop = '0px'
navbar.style.paddingBottom = '0px'
})
*/
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 overflow-hidden">
<header class="absolute top-0 left-0 w-full flex justify-center">
<nav class="absolute w-full">
<div class="relative z-30 bg-white dark:bg-gray-900">
<div class="container m-auto md:px-12 lg:py-0 lg:px-10">
<div class="flex flex-wrap items-center justify-between py-4 gap-6 md:gap-0">
<input type="checkbox" name="toggle_nav" id="toggle_nav" class="peer hidden">
<div class="w-full px-6 flex justify-between md:w-max md:px-0 z-30">
<a href="#" aria-label="logo">
<img src="images/logo.svg" class="w-36 dark:hidden" alt="tailus logo" width="144" height="68">
<img src="images/logo-white.svg" class="w-36 hidden dark:block" 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 p-2">
<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 for="toggle_nav" class="hidden peer-checked:block fixed w-full h-full left-0 top-0 z-10 bg-green-200 bg-opacity-30 backdrop-blur backdrop-filter"></label>
<div class="hidden z-40 peer-checked:flex w-11/12 mx-auto md:mx-0 flex-col
justify-end items-center gap-y-8 p-6
rounded-xl bg-white dark:bg-gray-800 md:flex md:w-8/12
md:gap-y-0 md:gap-x-4 md:divide-x md:p-0
md:flex-row md:bg-transparent lg:w-7/12">
<div class="block w-full md:w-max">
<ul class="gap-y-6 tracking-wide
text-gray-500 dark:text-gray-300 font-medium flex flex-col md:flex-row md:gap-y-0">
<li>
<a href="#" class="block md:px-4">
<div class="relative text-green-600 dark:text-green-400
before:absolute before:-bottom-2 md:before:-bottom-7 before:w-full before:h-1 before:mx-auto before:mt-auto before:rounded-t-full before:bg-green-500">
<span>Home</span>
</div>
</a>
</li>
<li>
<a href="#" class="block md:px-4 group">
<div class="relative group
before:absolute before:-bottom-2 md:before:-bottom-7 before:w-full before:h-0.5 before:origin-left before:mt-auto before:rounded-full before:bg-green-800 before:transition before:scale-x-0 group-hover:before:scale-x-100">
<span class="group-hover:text-green-500">Services</span>
</div>
</a>
</li>
<li>
<a href="#" class="block md:px-4 group">
<div class="relative group
before:absolute before:-bottom-2 md:before:-bottom-7 before:w-full before:h-0.5 before:origin-left before:mt-auto before:rounded-full before:bg-green-800 before:transition before:scale-x-0 group-hover:before:scale-x-100">
<span class="group-hover:text-green-500">About</span>
</div>
</a>
</li>
</ul>
</div>
<div class="w-full pl-2
sm:w-max gap-4 flex min-w-max flex-col sm:flex-row">
<button type="button" title="Start buying" class="w-full py-3 px-6 rounded-xl text-center transition dark:active:bg-green-900 dark:focus:bg-gray-800 active:bg-green-200 focus:bg-green-100 sm:w-max">
<span class="block text-green-600 dark:text-green-500 font-semibold">
Login
</span>
</button>
<button type="button" title="Start buying" class="w-full py-3 px-6 rounded-xl text-center transition bg-green-600 hover:bg-green-700 active:bg-green-800 focus:bg-green-500 sm:w-max">
<span class="block text-white font-semibold">
Book Demo
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div aria-hidden="true" class="container h-4 -mt-6 mx-auto bg-green-600/30 dark:bg-green-900/30 blur md:-mt-4"></div>
</nav>
</header>
<div class="min-h-screen flex dark:from-gray-900 bg-gradient-to-b from-white to-green-50">
<div class="container m-auto px-6 py-20 md:pb-0 md:pt-40 md:px-12 lg:py-0 lg:px-10">
<div class="flex flex-wrap gap-12">
<div class="lg:w-6/12 lg:pt-32 lg:pb-20">
<div class="space-y-8 mt-8 lg:-mr-24 xl:-mr-0">
<h1 class="text-4xl text-gray-800 dark:text-white font-bold md:text-5xl lg:leading-tight">Uncompromised Versatility –When it Matters the Most.</h1>
<p class="text-lg text-gray-600 dark:text-gray-300">Quod rerum dolor ab harum facere quo nihil labore necessitatibus tempora?</p>
<div class="flex flex-col sm:flex-row gap-4">
<button type="button" title="Start buying" class="w-full py-3 px-6 rounded-xl text-center transition bg-green-600 hover:bg-green-700 active:bg-green-800 focus:bg-green-500 sm:w-max">
<span class="block text-white font-semibold">
Book Demo
</span>
</button>
<button type="button" title="Start buying" class="w-full py-3 px-6 rounded-xl text-center transition dark:active:bg-green-900 dark:focus:bg-gray-800 active:bg-green-200 focus:bg-green-100 sm:w-max">
<div class="flex justify-center">
<span class="block text-green-700 dark:text-green-400 font-semibold">
Our showreel
</span>
</div>
</button>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-300 dark:border-gray-700">
<h6 class="text-lg text-green-800 dark:text-green-400 font-semibold">Trusted by</h6>
<div class="mt-6 flex gap-6">
<div class="flex items-center">
<img class="-hue-rotate-30 w-auto h-auto dark:grayscale" src="images/clients/grabyo.png" width="50" height="20" alt="logo partener">
</div>
<div class="flex items-center">
<img class="-hue-rotate-30 w-auto h-auto dark:grayscale" src="images/clients/lifegroups.png" width="50" height="20" alt="logo partener">
</div>
<div class="flex items-center">
<img class="-hue-rotate-30 w-auto h-auto dark:grayscale" src="images/clients/lilly.png" width="50" height="20" alt="logo partener">
</div>
<div class="flex items-center">
<img class="-hue-rotate-30 w-auto h-auto dark:grayscale" src="images/clients/microsoft.png" width="50" height="20" alt="logo partener">
</div>
</div>
</div>
</div>
<div class="hidden bottom-0 md:-right-32 md:block md:w-full md:ml-auto lg:absolute lg:-right-32 lg:w-[60%] xl:-right-48">
<img src="images/horse1.png" class="ml-48 lg:ml-0" alt="gril on an horse" loading="lazy" width="1053" height="772">
</div>
</div>
</div>
</div>
</div>
</body>
Once considered a temporary trend in web design, the hero section has since become a key part of any quality website.
<body class="bg-white dark:bg-gray-900">
<header>
<nav class="fixed z-10 w-full dark:bg-gray-900 bg-white 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-4 gap-6 md:py-4 md:gap-0 relative">
<input type="checkbox" name="toggle_nav" id="toggle_nav" class="hidden peer">
<div class="w-full px-6 flex justify-between lg:w-max md:px-0">
<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-white"></div>
<div class="h-6 w-2 bg-teal-500"></div>
</div>
<span class="text-2xl font-bold text-gray-900 dark:text-white">Arceelus</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 p-6 -mr-6">
<div aria-hidden="true" id="line" class="m-auto h-0.5 w-6 rounded bg-sky-900 dark:bg-gray-300 transition duration-300"></div>
<div aria-hidden="true" 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>
<div class="hidden absolute top-full transition translate-y-1 lg:peer-checked:translate-y-0 lg:translate-y-0 left-0
lg:top-0 lg:relative peer-checked:flex w-full
lg:flex lg:flex-row flex-col
flex-wrap justify-end items-center
gap-6 p-6 rounded-xl
bg-white dark:bg-gray-900 lg:gap-0
lg:p-0
lg:bg-transparent lg:w-7/12">
<div class="text-gray-600 dark:text-gray-300 lg:pr-4 lg:w-auto w-full lg:pt-0">
<ul class="
tracking-wide
font-medium
text-sm flex-col flex
lg:flex-row
gap-6 lg:gap-0">
<li>
<a href="#" class="block md:px-4 transition hover:text-teal-700">
<span>Home</span>
</a>
</li>
<li>
<a href="#" class="block md:px-4 transition hover:text-teal-700">
<span>Portfolio</span>
</a>
</li>
<li>
<a href="#" class="block md:px-4 transition hover:text-teal-700">
<span>Services</span>
</a>
</li>
</ul>
</div>
<div class="w-full lg:pl-2 space-y-2 border-teal-200 lg:w-auto lg:space-y-0 sm:w-max lg:border-l">
<button type="button" title="Start buying" class="w-full py-3 px-6 text-center rounded-full transition dark:active:bg-teal-900 dark:focus:bg-gray-800 active:bg-teal-200 focus:bg-teal-100 sm:w-max">
<span class="block text-teal-800 dark:text-teal-300 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-teal-300 hover:bg-teal-100 active:bg-teal-400 focus:bg-teal-300 sm:w-max">
<span class="block text-teal-900 font-semibold text-sm">
Contact Us
</span>
</button>
</div>
</div>
</div>
</div>
</nav>
</header>
<div>
<img class="absolute w-full object-cover object-left-top h-screen inset-0 top-0 hidden dark:block" src="images/bg.webp" alt="image" loading="lazy">
<img class="absolute w-full object-cover object-top h-screen inset-0 top-0 dark:hidden" src="images/bg2.webp" alt="image" loading="lazy">
<div class="relative container m-auto px-6 md:px-12 lg:px-7">
<div class="py-40 lg:py-56 md:w-9/12 lg:w-7/12 dark:lg:w-6/12 ml-auto">
<h1 class="text-gray-900 dark:text-white font-bold text-4xl md:text-6xl lg:text-4xl xl:text-6xl">Shaping a world with <span class="text-teal-600 dark:text-teal-500">reimagination.</span></h1>
<p class="mt-8 text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio incidunt nam itaque sed eius modi error totam sit illum. Voluptas doloribus asperiores quaerat aperiam. Quidem harum omnis beatae ipsum soluta!</p>
<div class="mt-16 space-y-2 lg:space-y-0 md:w-max sm:space-x-6">
<button type="button" title="Start buying" class="w-full py-3 px-6 text-center rounded-full transition bg-teal-300 hover:bg-teal-100 active:bg-teal-400 focus:bg-teal-300 sm:w-max">
<span class="block text-teal-900 font-semibold text-sm">
Contact Us
</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:active:bg-teal-900 dark:focus:bg-gray-800 active:bg-teal-200 focus:bg-teal-100 sm:w-max">
<span class="block text-teal-800 dark:text-teal-100 font-semibold text-sm">
About us
</span>
</button>
</div>
</div>
</div>
</div>
</body>