Main Hero Header Using Tailwind UI
A main hero header crafted with Tailwind creates a captivating and attention-grabbing introduction to a web page, leaving a memorable first impression and encouraging user engagement.
hero
Loading component...
106 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<header
class="relative flex max-w-screen-xl flex-col overflow-hidden px-4 py-4 lg:mx-auto lg:flex-row lg:items-center text-[#45050C]">
<a href="#" class="flex items-center text-2xl font-black whitespace-nowrap">
<span class="w-8 mr-2">
<img src="/images/JOJj79gp_Djhwdp_ZOKLL.png" alt="" />
</span>
Rural Design
</a>
<input type="checkbox" class="hidden peer" id="navbar-open" achecked />
<label class="absolute cursor-pointer top-5 right-5 lg:hidden" for="navbar-open">
<span class="sr-only">Toggle Navigation</span>
<svg class="h-7 w-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16">
</path>
</svg>
</label>
<nav aria-label="Header Navigation"
class="flex flex-col items-center w-full overflow-hidden transition-all peer-checked:pt-8 peer-checked:max-h-60 max-h-0 lg:ml-24 lg:max-h-full lg:flex-row">
<ul class="flex flex-col items-center w-full space-y-2 font-medium lg:flex-row lg:justify-center lg:space-y-0">
<li class="lg:mr-12">
<a class="transition rounded focus:outline-none focus:ring-1 focus:ring-blue-700 focus:ring-offset-2"
href="#">About</a>
</li>
<li class="lg:mr-12">
<a class="transition rounded focus:outline-none focus:ring-1 focus:ring-blue-700 focus:ring-offset-2"
href="#">Our Work</a>
</li>
<li class="lg:mr-12">
<a class="transition rounded focus:outline-none focus:ring-1 focus:ring-blue-700 focus:ring-offset-2"
href="#">Resources</a>
</li>
<li class="lg:mr-12">
<a class="transition rounded focus:outline-none focus:ring-1 focus:ring-blue-700 focus:ring-offset-2"
href="#">Apply</a>
</li>
</ul>
<hr class="w-full mt-4 lg:hidden" />
<div class="flex items-center my-4 space-x-6 space-y-2 lg:my-0 lg:ml-auto lg:space-x-8 lg:space-y-0">
<a href="#" title=""
class="whitespace-nowrap rounded-xl text-white bg-[#45050C] px-5 py-3 font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-offset-2">Register</a>
</div>
</nav>
</header>
<section class="body-font mt-4 text-[#45050C]">
<div class="container flex flex-col items-center px-5 py-5 mx-auto md:flex-row">
<div
class="flex flex-col items-center w-full mb-16 text-center md:w-1/2 lg:flex-grow md:items-start md:text-left md:mb-0">
<h1 class="mb-4 font-bold leading-relaxed tracking-wide title-font sm:text-3xl md:text-6xl ">
Enhancing the quality of life and economic vitality of rural America through design
</h1>
<p class="mb-8 opacity-80 ">
Committed to supporting rural America, the Citizens’ Institute on Rural Design (CIRD) helps
communities convert their own good ideas into reality.
</p>
<div class="flex justify-center">
<button
class="inline-flex text-white bg-[#45050C] py-3 px-6 font-medium text-lg focus:outline-none hover:bg-opacity-80 rounded">
Learn more
</button>
</div>
</div>
<div id="pattern" class="w-full bg-no-repeat bg-contain md:w-1/2">
<div class="flex justify-center w-full gap-3 ">
<img class="object-cover object-center rounded-xl w-53 h-28 " alt="hero"
src="https://assets-global.website-files.com/609d69b87d09918c2d229ac6/649b4d85d7f72746b531ded3_SeminoleArts2021MuralPainting3-p-1080.jpg">
<img class="object-cover object-center rounded-xl w-53 h-28" alt="hero"
src="https://assets-global.website-files.com/609d69b87d09918c2d229ac6/6427254c899e2593ce792a14_DDB-banner2-p-1080.jpg">
</div>
<div class="flex items-center justify-center w-full gap-2 my-2 h-">
<img class="object-cover object-center rounded-xl w-53 h-28" alt="hero"
src="https://assets-global.website-files.com/609d69b87d09918c2d229ac6/62e18c838059c1b4db46e707_0%20Fsted-mural-p-1080.jpg">
<img class="object-cover object-center rounded-xl w-53 h-28" alt="hero"
src="https://assets-global.website-files.com/609d69b87d09918c2d229ac6/60f6d99d62b5cb273017e670_Hero%20Image%20(1)-p-1080.jpeg">
<img
class="https://assets-global.website-files.com/609d69b87d09918c2d229ac6/630cb390865f826adb2a3168_CIRDWorkshops1_webinar-p-1080.jpg">
</div>
<div class="flex justify-center w-full gap-3">
<img class="object-cover object-center rounded-xl w-53 h-28" alt="hero"
src="https://assets-global.website-files.com/609d69b87d09918c2d229ac6/6512de7435c52d0ed2b693e9_ValentineStory_P%26WPhotography-p-1080.jpg">
<img class="object-cover object-center rounded-xl w-53 h-28" alt="hero"
src="https://assets-global.website-files.com/609d69b87d09918c2d229ac6/634eaf8cae8aae6a4613d001_PXL_20220322_231650999-p-1080.jpg">
</div>
<div class="flex justify-center w-full gap-3 my-2">
<img class="object-cover object-center rounded-xl w-53 h-28" alt="hero"
src="https://assets-global.website-files.com/609d69b87d09918c2d229ac6/6137b62ef9d43fb31748506b_POL-2-p-1080.jpeg">
</div>
</div>
</div>
</section>