Basic example
Jumbotron provides an excellent way to showcase the key content or information on a web page, calling extra attention to some special content or information.
Hello world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
<!-- Jumbotron -->
<div
class="rounded-lg bg-white p-6 text-surface shadow-lg dark:bg-neutral-700 dark:text-white dark:shadow-black/30">
<h2 class="mb-5 text-3xl font-semibold">Hello world!</h2>
<p>
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</p>
<hr class="my-6 h-0.5 border-t-0 bg-neutral-100 dark:bg-white/10" />
<p class="mb-4">
It uses utility classes for typography and spacing to space content
out within the larger container.
</p>
<button
type="button"
data-twe-ripple-init
data-twe-ripple-color="light"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
Learn more
</button>
</div>
<!-- Jumbotron -->
// Initialization for ES Users
import {
Ripple,
initTWE,
} from "tw-elements";
initTWE({ Ripple });
Background image
Outstand your call to action elements by catching the eyes to some beautiful image in the background. To provide a proper contrast it's highly recommended to use a mask.
Heading
Subheading
<!-- Jumbotron -->
<div
class="relative h-[400px] overflow-hidden rounded-lg bg-[url('https://tecdn.b-cdn.net/img/new/slides/041.webp')] bg-cover bg-no-repeat p-12 text-center text-white">
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black/60 bg-fixed">
<div class="flex h-full items-center justify-center">
<div class="text-white">
<h2 class="mb-4 text-4xl font-semibold">Heading</h2>
<h4 class="mb-6 text-xl font-semibold">Subheading</h4>
<button
type="button"
class="inline-block rounded border-2 border-neutral-50 px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-neutral-50 transition duration-150 ease-in-out hover:border-neutral-300 hover:text-neutral-200 focus:border-neutral-300 focus:text-neutral-200 focus:outline-none focus:ring-0 active:border-neutral-300 active:text-neutral-200 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600"
data-twe-ripple-init
data-twe-ripple-color="light">
Call to action
</button>
</div>
</div>
</div>
</div>
<!-- Jumbotron -->
// Initialization for ES Users
import {
Ripple,
initTWE,
} from "tw-elements";
initTWE({ Ripple });
With navbar
Since jumbotron is usually the first element of the page, it may be a good idea to combine your jumbotron with a navbar.
<header>
<!-- Navigation bar -->
<nav
class="relative flex w-full items-center justify-between bg-white py-2 shadow-dark-mild dark:bg-body-dark lg:flex-wrap lg:justify-start lg:py-4"
data-twe-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="flex items-center">
<!-- Hamburger menu button -->
<button
class="block border-0 bg-transparent px-2 text-black/50 hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 dark:text-neutral-200 lg:hidden"
type="button"
data-twe-collapse-init
data-twe-target="#navbarSupportedContentY"
aria-controls="navbarSupportedContentY"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger menu icon -->
<span
class="[&>svg]:h-7 [&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<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>
<!-- Navigation links -->
<div
class="!visible hidden grow basis-[100%] items-center text-center lg:!flex lg:basis-auto lg:text-left"
id="navbarSupportedContentY"
data-twe-collapse-item>
<ul
class="me-auto flex flex-col lg:flex-row"
data-twe-navbar-nav-ref>
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>Home</a
>
</li>
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>Features</a
>
</li>
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>Pricing</a
>
</li>
<li class="mb-2 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero section with background image, heading, subheading and button -->
<div
class="bg-zinc-50 px-6 py-20 text-center text-surface dark:bg-neutral-700 dark:text-white">
<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 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
data-twe-ripple-init
data-twe-ripple-color="light"
href="#!"
role="button"
>Call to action</a
>
</div>
</header>
// Initialization for ES Users
import {
Collapse,
Ripple,
initTWE,
} from "tw-elements";
initTWE({ Collapse, Ripple });
Background image with navbar
Header with background image might help to outstand your call to action elements by catching the eyes to some beautiful image in the background.
To provide a proper contrast it's highly recommended to use a mask.
You also must set the height of the background image,
otherwise, the component will collapse. In the example below, we set the
height to 400px.
Heading
Subeading
<header>
<!-- Navigation bar -->
<nav
class="relative flex w-full items-center justify-between bg-white py-2 shadow-dark-mild dark:bg-body-dark lg:flex-wrap lg:justify-start lg:py-4"
data-twe-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="flex items-center">
<!-- Hamburger menu button -->
<button
class="border-0 bg-transparent px-2 text-xl leading-none transition-shadow duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 motion-reduce:transition-none dark:hover:text-white dark:focus:text-white lg:hidden"
type="button"
data-twe-collapse-init
data-twe-target="#navbarSupportedContentX"
aria-controls="navbarSupportedContentX"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger menu icon -->
<span
class="[&>svg]:h-7 [&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<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>
<!-- Navigation links -->
<div
class="!visible hidden grow basis-[100%] items-center text-center lg:!flex lg:basis-auto lg:text-left"
id="navbarSupportedContentX"
data-twe-collapse-item>
<ul
class="me-auto flex flex-col lg:flex-row"
data-twe-navbar-nav-ref>
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>Home</a
>
</li>
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>Features</a
>
</li>
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>Pricing</a
>
</li>
<li class="mb-2 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero section with background image, heading, subheading and button -->
<div
class="relative h-[400px] overflow-hidden bg-[url('https://tecdn.b-cdn.net/img/new/slides/041.webp')] bg-cover bg-[50%] bg-no-repeat">
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black/60 bg-fixed">
<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 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-neutral-50 transition duration-150 ease-in-out hover:border-neutral-300 hover:text-neutral-200 focus:border-neutral-300 focus:text-neutral-200 focus:outline-none focus:ring-0 active:border-neutral-300 active:text-neutral-200 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600"
data-twe-ripple-init
data-twe-ripple-color="light">
Call to action
</button>
</div>
</div>
</div>
</div>
</header>
// Initialization for ES Users
import {
Collapse,
Ripple,
initTWE,
} from "tw-elements";
initTWE({ Collapse, Ripple });
Full page option
Here is an example of a full page navbar.
The background photo shows Lido di Ostia
It is a coastal town in Italy that is part of Rome
Learn more about Rome
<header>
<!--Navbar -->
<nav
class="relative flex w-full items-center justify-between bg-white py-2 shadow-dark-mild dark:bg-body-dark lg:flex-wrap lg:justify-start lg:py-4"
data-twe-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="flex items-center">
<!-- Hamburger menu button -->
<button
class="border-0 bg-transparent px-2 text-xl leading-none transition-shadow duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 motion-reduce:transition-none dark:hover:text-white dark:focus:text-white lg:hidden"
type="button"
data-twe-collapse-init
data-twe-target="#navbarSupportedContent3"
aria-controls="navbarSupportedContent3"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger menu icon -->
<span
class="[&>svg]:h-7 [&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<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>
<!-- Navigation links -->
<div
class="!visible hidden grow basis-[100%] items-center text-center lg:!flex lg:basis-auto lg:text-left"
id="navbarSupportedContent3"
data-twe-collapse-item>
<ul
class="me-auto flex flex-col lg:flex-row"
data-twe-navbar-nav-ref>
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>Home</a
>
</li>
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>Features</a
>
</li>
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>Pricing</a
>
</li>
<li class="mb-2 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Background image -->
<div
class="relative h-96 overflow-hidden bg-[url('https://tecdn.b-cdn.net/img/Photos/Inne/ostia.jpg')] bg-cover bg-no-repeat p-12 text-center lg:h-screen">
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-teal-950/70 bg-fixed">
<div class="flex h-full items-center justify-center">
<div class="text-white">
<h2 class="mb-4 text-4xl font-semibold">
The background photo shows Lido di Ostia
</h2>
<h4 class="mb-6 text-xl font-semibold">
It is a coastal town in Italy that is part of Rome
</h4>
<a
class="mb-1 inline-block rounded border-2 border-neutral-50 px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-neutral-50 transition duration-150 ease-in-out hover:border-neutral-300 hover:text-neutral-200 focus:border-neutral-300 focus:text-neutral-200 focus:outline-none focus:ring-0 active:border-neutral-300 active:text-neutral-200 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600"
href="#!"
role="button"
data-twe-ripple-init
data-twe-ripple-color="light"
>Learn more about Rome</a
>
</div>
</div>
</div>
</div>
<!-- Background image -->
</header>
// Initialization for ES Users
import {
Collapse,
Ripple,
initTWE,
} from "tw-elements";
initTWE({ Collapse, Ripple });
Fixed navbar
Stick the navbar to the top of the window by using
fixed top-0 classes. Thanks to this whenever you scroll the
page the navbar will be always visible.
Heading
Subheading
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
<header>
<!--Navbar -->
<nav
class="fixed top-0 z-10 flex w-full items-center justify-between bg-white py-2 shadow-dark-mild dark:bg-body-dark lg:flex-wrap lg:justify-start lg:py-4"
data-twe-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="flex items-center">
<!-- Hamburger menu button -->
<button
class="border-0 bg-transparent px-2 text-xl leading-none transition-shadow duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 motion-reduce:transition-none dark:hover:text-white dark:focus:text-white lg:hidden"
type="button"
data-twe-collapse-init
data-twe-target="#navbarSupportedContent4"
aria-controls="navbarSupportedContent4"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger menu icon -->
<span
class="[&>svg]:h-7 [&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<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>
<!-- Navigation links -->
<div
class="!visible hidden grow basis-[100%] items-center text-center lg:!flex lg:basis-auto lg:text-left"
id="navbarSupportedContent4"
data-twe-collapse-item>
<ul
class="me-auto flex flex-col lg:flex-row"
data-twe-navbar-nav-ref>
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>Home</a
>
</li>
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>Features</a
>
</li>
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>Pricing</a
>
</li>
<li class="mb-2 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Jumbotron -->
<div
class="bg-zinc-50 p-12 text-center text-surface dark:bg-neutral-700 dark:text-white">
<h2 class="mb-4 text-4xl font-semibold">Heading</h2>
<h4 class="mb-6 text-xl font-semibold">Subheading</h4>
<button
type="button"
class="mb-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
data-twe-ripple-init
data-twe-ripple-color="light">
Call to action
</button>
</div>
<!-- Jumbotron -->
<div class="text-surface dark:text-white">
<p class="my-4">Scroll down</p>
<p class="mb-4">Scroll down</p>
<p class="mb-4">Scroll down</p>
<p class="mb-4">Scroll down</p>
<p class="mb-4">Scroll down</p>
<p class="mb-4">Scroll down</p>
<p class="mb-4">Scroll down</p>
<p class="mb-4">Scroll down</p>
</div>
</header>
// Initialization for ES Users
import {
Collapse,
Ripple,
initTWE,
} from "tw-elements";
initTWE({ Collapse, Ripple });
Fixed navbar with background image
Heading
Subeading
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
<header>
<!--Navbar -->
<nav
class="fixed top-0 z-10 flex w-full items-center justify-between bg-white py-2 shadow-dark-mild dark:bg-body-dark lg:flex-wrap lg:justify-start lg:py-4"
data-twe-navbar-ref>
<div class="flex w-full flex-wrap items-center justify-between px-3">
<div class="flex items-center">
<!-- Hamburger menu button -->
<button
class="border-0 bg-transparent px-2 text-xl leading-none transition-shadow duration-150 ease-in-out hover:text-neutral-700 focus:text-neutral-700 motion-reduce:transition-none dark:hover:text-white dark:focus:text-white lg:hidden"
type="button"
data-twe-collapse-init
data-twe-target="#navbarSupportedContent5"
aria-controls="navbarSupportedContent5"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger menu icon -->
<span
class="[&>svg]:h-7 [&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<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>
<!-- Navigation links -->
<div
class="!visible hidden grow basis-[100%] items-center text-center lg:!flex lg:basis-auto lg:text-left"
id="navbarSupportedContent5"
data-twe-collapse-item>
<ul
class="me-auto flex flex-col lg:flex-row"
data-twe-navbar-nav-ref>
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>Home</a
>
</li>
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>Features</a
>
</li>
<li class="mb-4 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>Pricing</a
>
</li>
<li class="mb-2 lg:mb-0 lg:pe-2" data-twe-nav-item-ref>
<a
class="block text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 motion-reduce:transition-none dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#!"
data-twe-nav-link-ref
data-twe-ripple-init
data-twe-ripple-color="light"
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Background image -->
<div
class="relative h-[400px] overflow-hidden bg-[url('https://tecdn.b-cdn.net/img/new/slides/041.webp')] bg-cover bg-[50%] bg-no-repeat">
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-black/60 bg-fixed">
<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 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-neutral-50 transition duration-150 ease-in-out hover:border-neutral-300 hover:text-neutral-200 focus:border-neutral-300 focus:text-neutral-200 focus:outline-none focus:ring-0 active:border-neutral-300 active:text-neutral-200 dark:hover:bg-neutral-600 dark:focus:bg-neutral-600"
data-twe-ripple-init
data-twe-ripple-color="light">
Call to action
</button>
</div>
</div>
</div>
</div>
<!-- Background image -->
<div class="text-center text-surface dark:text-white">
<p class="my-4">Scroll down</p>
<p class="mb-4">Scroll down</p>
<p class="mb-4">Scroll down</p>
<p class="mb-4">Scroll down</p>
<p class="mb-4">Scroll down</p>
<p class="mb-4">Scroll down</p>
<p class="mb-4">Scroll down</p>
<p class="mb-4">Scroll down</p>
</div>
</header>
// Initialization for ES Users
import {
Collapse,
Ripple,
initTWE,
} from "tw-elements";
initTWE({ Collapse, Ripple });
Related resources
Tutorials:
navbar
containers
fullscreen background image
dark mode
arbitrary values
flexbox
text
spacing
masks
hsla colors
buttons
ripple effect
carousel
sizing
footer
Extended Docs:
colors
headings
images
mask
headers
navbar
buttons
cards
carousel
gallery
video
video carousel
ripple
background image
background position
center grid items
center text
display flex
opacity
parallax
position
spacing
sticky header
text bold
text size