Hero forms
Split section with an image and a form
Open this split section with image and form hero forms example in new window
Copy split section with image and form hero forms code
Close split section with image and form hero forms code
<!-- Hero -->
<div class="relative overflow-hidden">
<div class="mx-auto max-w-screen-md py-12 px-4 sm:px-6 md:max-w-screen-xl md:py-20 lg:py-32 md:px-8">
<div class="md:pr-8 md:w-1/2 xl:pr-0 xl:w-5/12">
<!-- Title -->
<h1 class="text-3xl text-hs2-primary-500 font-bold md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight ">
Embark on the future of travel
</h1>
<p class="mt-3 text-base text-gray-500">
Welcome to High Speed Two (HS2), where innovation meets infrastructure to redefine the way you travel.
</p>
<!-- End Title -->
<div class="mt-8 grid">
<button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-hs2-primary-500 transition-all text-sm sm:p-4 ">
<svg class="w-4 h-auto" xmlns="http://www.w3.org/2000/svg" width="46" height="47" viewBox="0 0 23 23" fill="none">
<path fill="#f3f3f3" d="M0 0h23v23H0z" />
<path fill="#f35325" d="M1 1h10v10H1z" />
<path fill="#81bc06" d="M12 1h10v10H12z" />
<path fill="#05a6f0" d="M1 12h10v10H1z" />
<path fill="#ffba08" d="M12 12h10v10H12z" />
</svg>
Sign up with Microsoft
</button>
</div>
<div class="py-6 flex items-center text-gray-400 uppercase before:flex-[1_1_0%] before:border-t before:mr-6 after:flex-[1_1_0%] after:border-t after:ml-6 ">Or</div>
<!-- Form -->
<form>
<div class="mb-4">
<label for="hs-hero-name-2" class="block text-sm font-medium "><span class="sr-only">Full name</span></label>
<input type="text" id="hs-hero-name-2" class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary-500 focus:ring-hs2-primary-500 sm:p-4 " placeholder="Full name">
</div>
<div class="mb-4">
<label for="hs-hero-email-2" class="block text-sm font-medium "><span class="sr-only">Email address</span></label>
<input type="email" id="hs-hero-email-2" class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary-500 focus:ring-hs2-primary-500 sm:p-4 " placeholder="Email address">
</div>
<div class="mb-4">
<label for="hs-hero-password-2" class="block text-sm font-medium "><span class="sr-only">Password</span></label>
<input type="email" id="hs-hero-password-2" class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary-500 focus:ring-hs2-primary-500 sm:p-4 " placeholder="Password">
</div>
<div class="grid">
<button type="submit" class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-secondary text-white hover:bg-hs2-secondary-hover focus:outline-none focus:ring-2 focus:ring-hs2-secondary focus:ring-offset-2 transition-all text-sm sm:p-4">Sign up</button>
</div>
</form>
<!-- End Form -->
</div>
</div>
<div class="hidden md:block md:absolute md:top-0 md:left-1/2 md:right-0 h-full bg-[url('/assets/images/app-toolkit/placeholder-1.jpg')] bg-no-repeat bg-center bg-cover"></div>
<!-- End Col -->
</div>
<!-- End Hero -->Center aligned with a form
Open this centered hero forms example in new window
Copy centered hero forms code
Close centered hero forms code
<!-- Hero -->
<div class="overflow-hidden">
<div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-20">
<div class="relative mx-auto max-w-4xl grid space-y-5 sm:space-y-10">
<!-- Title -->
<div class="text-center">
<p class="text-xs font-semibold text-gray-500 tracking-wide uppercase mb-3 ">
Welcome to High Speed Two (HS2)
</p>
<h1 class="text-3xl text-hs2-primary-500 font-bold sm:text-5xl lg:text-6xl lg:leading-tight ">
Embark on the future of travel
</h1>
</div>
<!-- End Title -->
<!-- Form -->
<form>
<div class="mx-auto max-w-2xl sm:flex sm:space-x-3 p-3 bg-white border rounded-lg shadow-lg shadow-gray-100 ">
<div class="pb-2 sm:pb-0 sm:flex-[1_0_0%]">
<label for="hs-hero-name-1" class="block text-sm font-medium "><span class="sr-only">Your name</span></label>
<input type="text" id="hs-hero-name-1" class="py-3 px-4 block w-full border-transparent rounded-md text-sm focus:border-hs2-primary-500 focus:ring-hs2-primary-500 sm:p-4 " placeholder="Your name">
</div>
<div class="pt-2 sm:pt-0 sm:pl-3 border-t border-gray-200 sm:border-t-0 sm:border-l sm:flex-[1_0_0%] ">
<label for="hs-hero-email-1" class="block text-sm font-medium "><span class="sr-only">Your email</span></label>
<input type="email" id="hs-hero-email-1" class="py-3 px-4 block w-full border-transparent rounded-md text-sm focus:border-hs2-primary-500 focus:ring-hs2-primary-500 sm:p-4 " placeholder="Your email">
</div>
<div class="pt-2 sm:pt-0 grid sm:block sm:flex-[0_0_auto]">
<a class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-secondary text-white hover:bg-hs2-secondary-hover focus:outline-none focus:ring-2 focus:ring-hs2-primary-500 focus:ring-offset-2 transition-all text-sm sm:p-4 " href="#">
Get started
</a>
</div>
</div>
</form>
<!-- End Form -->
</div>
</div>
</div>
<!-- End Hero -->Center aligned with a form
Open this centered search with tags hero forms example in new window
Copy centered search with tags hero forms code
Close centered search with tags hero forms code
<!-- Hero -->
<div class="relative overflow-hidden">
<div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-24">
<div class="text-center">
<h1 class="text-4xl sm:text-6xl font-bold text-hs2-primary-500 ">
Insights
</h1>
<p class="mt-3 text-gray-600 ">
Stay in the know with insights from industry experts.
</p>
<div class="mt-7 sm:mt-12 mx-auto max-w-xl relative">
<!-- Form -->
<form>
<div class="relative z-10 flex space-x-3 p-3 bg-white border rounded-lg shadow-lg shadow-gray-100 ">
<div class="flex-[1_0_0%]">
<label for="hs-search-article-1" class="block text-sm text-gray-700 font-medium "><span class="sr-only">Search article</span></label>
<input type="email" name="hs-search-article-1" id="hs-search-article-1" class="p-3 block w-full border-transparent rounded-md focus:border-hs2-primary-500 focus:ring-hs2-primary-500 " placeholder="Search article">
</div>
<div class="flex-[0_0_auto]">
<a class="p-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-secondary text-white hover:bg-hs2-secondary-hover focus:outline-none focus:ring-2 focus:ring-hs2-secondary focus:ring-offset-2 transition-all text-sm " href="#">
<svg 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>
</a>
</div>
</div>
</form>
<!-- End Form -->
</div>
<div class="mt-10 sm:mt-20">
<a class="m-1 py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm " href="#">
<svg class="w-3 h-auto" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v8A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5zm1.886 6.914L15 7.151V12.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V7.15l6.614 1.764a1.5 1.5 0 0 0 .772 0zM1.5 4h13a.5.5 0 0 1 .5.5v1.616L8.129 7.948a.5.5 0 0 1-.258 0L1 6.116V4.5a.5.5 0 0 1 .5-.5z" />
</svg>
Business
</a>
<a class="m-1 py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm " href="#">
<svg class="w-3 h-auto" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z" />
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z" />
</svg>
Strategy
</a>
<a class="m-1 py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm " href="#">
<svg class="w-3 h-auto" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z" />
</svg>
Health
</a>
<a class="m-1 py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm " href="#">
<svg class="w-3 h-auto" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z" />
</svg>
Creative
</a>
<a class="m-1 py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm " href="#">
<svg class="w-3 h-auto" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022zM6 8.694 1 10.36V15h5V8.694zM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5V15z" />
<path d="M2 11h1v1H2v-1zm2 0h1v1H4v-1zm-2 2h1v1H2v-1zm2 0h1v1H4v-1zm4-4h1v1H8V9zm2 0h1v1h-1V9zm-2 2h1v1H8v-1zm2 0h1v1h-1v-1zm2-2h1v1h-1V9zm0 2h1v1h-1v-1zM8 7h1v1H8V7zm2 0h1v1h-1V7zm2 0h1v1h-1V7zM8 5h1v1H8V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm0-2h1v1h-1V3z" />
</svg>
Environment
</a>
<a class="m-1 py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm " href="#">
<svg class="w-3 h-auto" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M7 7V1.414a1 1 0 0 1 2 0V2h5a1 1 0 0 1 .8.4l.975 1.3a.5.5 0 0 1 0 .6L14.8 5.6a1 1 0 0 1-.8.4H9v10H7v-5H2a1 1 0 0 1-.8-.4L.225 9.3a.5.5 0 0 1 0-.6L1.2 7.4A1 1 0 0 1 2 7h5zm1 3V8H2l-.75 1L2 10h6zm0-5h6l.75-1L14 3H8v2z" />
</svg>
Adventure
</a>
</div>
</div>
</div>
</div>
<!-- End Hero -->