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-neutral-100 p-6 text-neutral-700 shadow-lg dark:bg-neutral-600 dark:text-neutral-200 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-200 opacity-100 dark:opacity-30" />
<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-te-ripple-init
data-te-ripple-color="light"
class="rounded bg-primary px-6 pb-2 pt-2.5 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)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
Learn more
</button>
</div>
<!-- Jumbotron -->
// Initialization for ES Users
import {
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
Hey there 👋 we want to make TW 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
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.
Use .background-image: url('image_address') within the
stylesheet.
Heading
Subheading
<!-- Jumbotron -->
<div
class="relative overflow-hidden rounded-lg bg-cover bg-no-repeat p-12 text-center"
style="background-image: url('https://tecdn.b-cdn.net/img/new/slides/041.webp'); height: 400px">
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed"
style="background-color: rgba(0, 0, 0, 0.6)">
<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="rounded border-2 border-neutral-50 px-7 pb-[8px] pt-[10px] text-sm 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">
Call to action
</button>
</div>
</div>
</div>
</div>
<!-- Jumbotron -->
// Initialization for ES Users
import {
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
With navbar
Heading
Subheading
<header>
<!-- Navbar -->
<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="px-6">
<!-- Hamburger menu button -->
<button
class="border-0 bg-transparent px-2 py-3 text-xl leading-none md:hidden"
type="button"
data-te-collapse-init
data-te-target="#navbarSupportedContentX"
aria-controls="navbarSupportedContentX"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger menu icon -->
<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>
<!-- Navigation links -->
<div
class="!visible hidden grow basis-[100%] items-center md:!flex md:basis-auto"
id="navbarSupportedContentX"
data-te-collapse-item>
<ul
class="mr-auto flex flex-col md: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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary"
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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary"
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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary"
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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary "
href="#!"
data-te-nav-link-ref
data-te-ripple-init
data-te-ripple-color="light"
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Jumbotron -->
<div
class="bg-neutral-100 p-12 text-center text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200">
<h2 class="mb-4 text-4xl font-semibold">Heading</h2>
<h4 class="mb-6 text-xl font-semibold">Subheading</h4>
<button
type="button"
data-te-ripple-init
data-te-ripple-color="light"
class="rounded bg-primary px-7 pb-2.5 pt-3 text-sm 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)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
Call to action
</button>
</div>
<!-- Jumbotron -->
</header>
// Initialization for ES Users
import {
Collapse,
Ripple,
initTE,
} from "tw-elements";
initTE({ Collapse, Ripple });
Background image with navbar
Heading
Subheading
<header>
<!-- Navbar -->
<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="px-6">
<!-- Hamburger menu button -->
<button
class="border-0 bg-transparent px-2 py-3 text-xl leading-none md:hidden"
type="button"
data-te-collapse-init
data-te-target="#navbarSupportedContentY"
aria-controls="navbarSupportedContentY"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger menu icon -->
<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>
<!-- Navigation links -->
<div
class="!visible hidden grow basis-[100%] items-center md:!flex md:basis-auto"
id="navbarSupportedContentY"
data-te-collapse-item>
<ul
class="mr-auto flex flex-col md: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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary"
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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary"
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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary"
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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary "
href="#!"
data-te-nav-link-ref
data-te-ripple-init
data-te-ripple-color="light"
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Hero section with background image, heading, subheading and button -->
<div
class="relative overflow-hidden bg-cover bg-no-repeat p-12 text-center"
style="
background-image: url('https://tecdn.b-cdn.net/img/new/slides/041.webp');
height: 400px;
">
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed"
style="background-color: rgba(0, 0, 0, 0.6)">
<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="rounded border-2 border-neutral-50 px-7 pb-[8px] pt-[10px] text-sm 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">
Call to action
</button>
</div>
</div>
</div>
</div>
</header>
// Initialization for ES Users
import {
Collapse,
Ripple,
initTE,
} from "tw-elements";
initTE({ Collapse, Ripple });
Full page option
To get full page jumbotron, you have to add the .w-full class and a .container or .container-fluid inside it.
The background photo shows Lido di Ostia
It is a coastal town in Italy that is part of Rome
<header>
<!-- Navbar -->
<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-700 dark:text-neutral-200 md:flex-wrap md:justify-start"
data-te-navbar-ref>
<div class="px-6">
<!-- Hamburger menu button -->
<button
class="border-0 bg-transparent px-2 py-3 text-xl leading-none md:hidden"
type="button"
data-te-collapse-init
data-te-target="#navbarSupportedContentO"
aria-controls="navbarSupportedContentO"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger menu icon -->
<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>
<!-- Navigation links -->
<div
class="!visible hidden grow basis-[100%] items-center md:!flex md:basis-auto"
id="navbarSupportedContentO"
data-te-collapse-item>
<ul
class="mr-auto flex flex-col md: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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary"
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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary"
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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary"
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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary "
href="#!"
data-te-nav-link-ref
data-te-ripple-init
data-te-ripple-color="light"
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero section with background image, heading, subheading and button -->
<div
class="relative h-96 overflow-hidden bg-cover bg-no-repeat p-12 text-center lg:h-screen"
style="background-image: url('https://tecdn.b-cdn.net/img/Photos/Inne/ostia.jpg')">
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed"
style="background-color: rgba(2, 56, 53, 0.7)">
<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>
<button
type="button"
class="rounded border-2 border-neutral-50 px-7 pb-[8px] pt-[10px] text-sm 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">
Learn more about Rome
</button>
</div>
</div>
</div>
</div>
</header>
// Initialization for ES Users
import {
Collapse,
Ripple,
initTE,
} from "tw-elements";
initTE({ Collapse, Ripple });
Fixed navbar
Stick the navbar to the top of the window by using
fixed top-0 right-0 left-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="sticky top-0 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="px-6">
<!-- Hamburger menu button -->
<button
class="border-0 bg-transparent px-2 py-3 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 md:hidden"
type="button"
data-te-collapse-init
data-te-target="#navbarSupportedContentU"
aria-controls="navbarSupportedContentU"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger menu icon -->
<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>
<!-- Navigation links -->
<div
class="!visible hidden grow basis-[100%] items-center md:!flex md:basis-auto"
id="navbarSupportedContentU"
data-te-collapse-item>
<ul
class="mr-auto flex flex-col md: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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary"
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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary"
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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary"
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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary "
href="#!"
data-te-nav-link-ref
data-te-ripple-init
data-te-ripple-color="light"
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Hero section with heading, subheading and button -->
<div
class="bg-neutral-100 p-12 text-center text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200">
<h2 class="mb-4 text-4xl font-semibold">Heading</h2>
<h4 class="mb-6 text-xl font-semibold">Subheading</h4>
<button
type="button"
data-te-ripple-init
data-te-ripple-color="light"
class="rounded bg-primary px-7 pb-2.5 pt-3 text-sm 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)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
Call to action
</button>
</div>
<!--Content-->
<div class="text-neutral-700 dark:text-neutral-200">
<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,
initTE,
} from "tw-elements";
initTE({ Collapse, Ripple });
Fixed navbar with background image
Heading
Subheading
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
Scroll down
<header>
<!-- Navbar -->
<nav
class="sticky top-0 z-10 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="px-6">
<!-- Hamburger menu button -->
<button
class="border-0 bg-transparent px-2 py-3 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 md:hidden"
type="button"
data-te-collapse-init
data-te-target="#navbarSupportedContentE"
aria-controls="navbarSupportedContentE"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger menu icon -->
<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>
<!-- Navigation links -->
<div
class="!visible hidden grow basis-[100%] items-center md:!flex md:basis-auto"
id="navbarSupportedContentE"
data-te-collapse-item>
<ul
class="mr-auto flex flex-col md: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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary"
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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary"
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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary"
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 dark:hover:text-white dark:focus:text-white md:p-2 [&.active]:border-primary [&.active]:text-primary "
href="#!"
data-te-nav-link-ref
data-te-ripple-init
data-te-ripple-color="light"
>About</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero section with background image, heading, subheading and button -->
<div
class="relative overflow-hidden bg-cover bg-no-repeat p-12 text-center"
style="
background-image: url('https://tecdn.b-cdn.net/img/new/slides/041.webp');
height: 400px;
">
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed"
style="background-color: rgba(0, 0, 0, 0.6)">
<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="rounded border-2 border-neutral-50 px-7 pb-[8px] pt-[10px] text-sm 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">
Call to action
</button>
</div>
</div>
</div>
</div>
</header>
// Initialization for ES Users
import {
Collapse,
Ripple,
initTE,
} from "tw-elements";
initTE({ 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