Jumbotron
<header>
<nav
class="relative flex w-full items-center justify-between bg-white py-2 text-neutral-600 shadow-lg hover:text-neutral-700 focus:text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200 md:flex-wrap md:justify-start"
data-te-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-6">
<div class="flex items-center">
<button
class="mr-2 border-0 bg-transparent py-2 text-xl leading-none transition-shadow duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 dark:hover:text-white dark:focus:text-white lg:hidden"
type="button"
data-te-collapse-init
data-te-target="#navbarSupportedContentY"
aria-controls="navbarSupportedContentY"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="[&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</span>
</button>
</div>
<div
class="!visible hidden grow basis-[100%] items-center lg:!flex lg:basis-auto"
id="navbarSupportedContentY"
data-te-collapse-item>
<ul
class="mr-auto flex flex-col lg:flex-row"
data-te-navbar-nav-ref>
<li data-te-nav-item-ref>
<a
class="block transition duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:hover:text-white dark:focus:text-white lg:p-2 [&.active]:text-black/90"
href="#!"
data-te-nav-link-ref
data-te-ripple-init
data-te-ripple-color="light"
>Home</a
>
</li>
<li data-te-nav-item-ref>
<a
class="block transition duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:hover:text-white dark:focus:text-white lg:p-2 [&.active]:text-black/90"
href="#!"
data-te-nav-link-ref
data-te-ripple-init
data-te-ripple-color="light"
>Features</a
>
</li>
<li data-te-nav-item-ref>
<a
class="block transition duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:hover:text-white dark:focus:text-white lg:p-2 [&.active]:text-black/90"
href="#!"
data-te-nav-link-ref
data-te-ripple-init
data-te-ripple-color="light"
>Pricing</a
>
</li>
<li data-te-nav-item-ref>
<a
class="block transition duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:hover:text-white dark:focus:text-white lg:p-2 [&.active]:text-black/90"
href="#!"
data-te-nav-link-ref
data-te-ripple-init
data-te-ripple-color="light"
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
<div
class="bg-neutral-50 py-20 px-6 text-center text-neutral-800 dark:bg-neutral-700 dark:text-neutral-200">
<h1 class="mb-6 text-5xl font-bold">Heading</h1>
<h3 class="mb-8 text-3xl font-bold">Subeading</h3>
<a
class="inline-block rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
data-te-ripple-init
data-te-ripple-color="light"
href="#!"
role="button"
>Get started</a
>
</div>
</header>
Hey there 👋 we want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!
Background image
Heading
Subeading
<header>
<nav
class="relative flex w-full items-center justify-between bg-white py-2 text-neutral-600 shadow-lg hover:text-neutral-700 focus:text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200 md:flex-wrap md:justify-start"
data-te-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-6">
<div class="flex items-center">
<button
class="mr-2 border-0 bg-transparent py-2 text-xl leading-none transition-shadow duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 dark:hover:text-white dark:focus:text-white lg:hidden"
type="button"
data-te-collapse-init
data-te-target="#navbarSupportedContentX"
aria-controls="navbarSupportedContentX"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="[&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</span>
</button>
</div>
<div
class="!visible hidden grow basis-[100%] items-center lg:!flex lg:basis-auto"
id="navbarSupportedContentX"
data-te-collapse-item>
<ul
class="mr-auto flex flex-col lg:flex-row"
data-te-navbar-nav-ref>
<li data-te-nav-item-ref>
<a
class="block transition duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:hover:text-white dark:focus:text-white lg:p-2 [&.active]:text-black/90"
href="#!"
data-te-nav-link-ref
data-te-ripple-init
data-te-ripple-color="light"
>Home</a
>
</li>
<li data-te-nav-item-ref>
<a
class="block transition duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:hover:text-white dark:focus:text-white lg:p-2 [&.active]:text-black/90"
href="#!"
data-te-nav-link-ref
data-te-ripple-init
data-te-ripple-color="light"
>Features</a
>
</li>
<li data-te-nav-item-ref>
<a
class="block transition duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:hover:text-white dark:focus:text-white lg:p-2 [&.active]:text-black/90"
href="#!"
data-te-nav-link-ref
data-te-ripple-init
data-te-ripple-color="light"
>Pricing</a
>
</li>
<li data-te-nav-item-ref>
<a
class="block transition duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:hover:text-white dark:focus:text-white lg:p-2 [&.active]:text-black/90"
href="#!"
data-te-nav-link-ref
data-te-ripple-init
data-te-ripple-color="light"
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
<div
class="relative overflow-hidden bg-cover bg-no-repeat"
style="
background-position: 50%;
background-image: url('https://tecdn.b-cdn.net/img/new/slides/146.webp');
height: 350px;
">
<div
class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-fixed"
style="background-color: rgba(0, 0, 0, 0.75)">
<div class="flex h-full items-center justify-center">
<div class="px-6 text-center text-white md:px-12">
<h1 class="mb-6 text-5xl font-bold">Heading</h1>
<h3 class="mb-8 text-3xl font-bold">Subeading</h3>
<button
type="button"
class="inline-block rounded border-2 border-neutral-50 px-6 pt-2 pb-[6px] text-xs font-medium uppercase leading-normal text-neutral-50 transition duration-150 ease-in-out hover:border-neutral-100 hover:bg-neutral-500 hover:bg-opacity-10 hover:text-neutral-100 focus:border-neutral-100 focus:text-neutral-100 focus:outline-none focus:ring-0 active:border-neutral-200 active:text-neutral-200 dark:hover:bg-neutral-100 dark:hover:bg-opacity-10"
data-te-ripple-init
data-te-ripple-color="light">
Get started
</button>
</div>
</div>
</div>
</div>
</header>
If you are looking for more advanced options, try Bootstrap Headers from MDBootstrap.