search results:

    License Free hosting Learn Playground Services Community
    • + D
    • Light
    • Dark
    • System
    logo Tailwind Elements
    • Getting started
      • Quick start
      • Tutorials
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Contribute
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Remix
      • Solid
      • Svelte
      • Vue
    • Content & styles
      • Animations
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • Design Blocks
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Team
      • Testimonials
    • Coming Soon
      • Angular
      • Builder
      • React
      • Templates
      • Vue
    • ResourcesNew
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New

    Jumbotron

    Tailwind CSS Jumbotron

    Use responsive jumbotron component with helper examples for background image, jumbotron with navbar, fixed navbar & more. Free download, open-source license.


    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.

    • HTML
    • javascript
            
                
          <!-- 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 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!

    Share via Dev.to Share via Twitter Share via Facebook Share via Pinterest Share via Reddit Share via StumbleUpon Share via Vkontakte Share via Weibo Share via HackerNews Share via Gmail Share via Email

    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

    • HTML
    • javascript
            
                
          <!-- 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

    • Home
    • Features
    • Pricing
    • About

    Heading

    Subheading

    • HTML
    • javascript
            
                
          <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

    • Home
    • Features
    • Pricing
    • About

    Heading

    Subheading

    • HTML
    • javascript
            
                
          <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.

    • Home
    • Features
    • Pricing
    • About

    The background photo shows Lido di Ostia

    It is a coastal town in Italy that is part of Rome

    • HTML
    • javascript
            
                
          <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

    • Home
    • Features
    • Pricing
    • About

    Heading

    Subheading

    Scroll down

    Scroll down

    Scroll down

    Scroll down

    Scroll down

    Scroll down

    Scroll down

    Scroll down

    • HTML
    • javascript
            
                
          <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

    • Home
    • Features
    • Pricing
    • About

    Heading

    Subheading

    Scroll down

    Scroll down

    Scroll down

    Scroll down

    Scroll down

    Scroll down

    Scroll down

    Scroll down

    • HTML
    • javascript
            
                
          <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 });
          
            
        
    • Basic example
    • Background image
    • With navbar
    • Background image with navbar
    • Full page option
    • Fixed navbar
    • Fixed navbar with background image
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com