Tailwind Jumbotron component

Responsive jumbotron built with Tailwind CSS. Examples of classic hero component, with background image, with navbar and many other combinations. Free download.


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="p-6 shadow-lg rounded-lg bg-gray-100 text-gray-700">
          <h2 class="font-semibold text-3xl mb-5">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 border-gray-300" />
          <p>
            It uses utility classes for typography and spacing to space content out within the larger
            container.
          </p>
          <button
            type="button"
            class="inline-block px-6 py-2.5 mt-4 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
            data-mdb-ripple="true"
            data-mdb-ripple-color="light"
          >
            Learn more
          </button>
        </div>
        <!-- Jumbotron -->
      
        
    

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

Call to action
        
            
        <!-- Jumbotron -->
        <div
          class="p-12 text-center relative overflow-hidden bg-no-repeat bg-cover rounded-lg"
          style="
            background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp');
            height: 400px;
          "
        >
          <div
            class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed"
            style="background-color: rgba(0, 0, 0, 0.6)"
          >
            <div class="flex justify-center items-center h-full">
              <div class="text-white">
                <h2 class="font-semibold text-4xl mb-4">Heading</h2>
                <h4 class="font-semibold text-xl mb-6">Subheading</h4>
                <a
                  class="inline-block px-7 py-3 mb-1 border-2 border-gray-200 text-gray-200 font-medium text-sm leading-snug uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out"
                  href="#!"
                  role="button"
                  data-mdb-ripple="true"
                  data-mdb-ripple-color="light"
                  >Call to action</a
                >
              </div>
            </div>
          </div>
        </div>
        <!-- Jumbotron -->
      
        
    

With navbar

Heading

Subheading

        
            
      <header>
        <!-- Navbar -->
        <nav
          class="navbar navbar-expand-md shadow-lg py-2 bg-white relative flex items-center w-full justify-between"
        >
          <div class="px-6">
            <button
              class="navbar-toggler border-0 py-3 px-2 md:hidden leading-none text-xl bg-transparent text-gray-600 hover:text-gray-700 focus:text-gray-700 transition-shadow duration-150 ease-in-out"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContentX"
              aria-controls="navbarSupportedContentX"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <svg
                aria-hidden="true"
                focusable="false"
                data-prefix="fas"
                class="w-5"
                role="img"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 448 512"
              >
                <path
                  fill="currentColor"
                  d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
                ></path>
              </svg>
            </button>
            <div class="navbar-collapse collapse grow items-center" id="navbarSupportedContentX">
              <ul class="navbar-nav mr-auto flex flex-col md:flex-row">
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >Home</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >Features</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >Pricing</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >About</a
                  >
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <!-- Navbar -->

        <!-- Jumbotron -->
        <div class="p-12 text-center bg-gray-100 text-gray-700">
          <h2 class="font-semibold text-4xl mb-4">Heading</h2>
          <h4 class="font-semibold text-xl mb-6">Subheading</h4>
          <button
            type="button"
            class="inline-block px-6 py-2.5 mb-1 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
            data-mdb-ripple="true"
            data-mdb-ripple-color="light"
          >
            Call to action
          </button>
        </div>
        <!-- Jumbotron -->
      </header>
      
        
    

Background image with navbar

Background image with navbar

        
            
      <header>
        <!-- Navbar -->
        <nav
          class="navbar navbar-expand-md shadow-lg py-2 bg-gray-50 relative flex items-center w-full justify-between"
        >
          <div class="px-6">
            <button
              class="navbar-toggler border-0 py-3 px-2 md:hidden leading-none text-xl bg-transparent text-gray-600 hover:text-gray-700 focus:text-gray-700 transition-shadow duration-150 ease-in-out"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContentY"
              aria-controls="navbarSupportedContentY"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <svg
                aria-hidden="true"
                focusable="false"
                data-prefix="fas"
                class="w-5"
                role="img"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 448 512"
              >
                <path
                  fill="currentColor"
                  d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
                ></path>
              </svg>
            </button>
            <div class="navbar-collapse collapse grow items-center" id="navbarSupportedContentY">
              <ul class="navbar-nav mr-auto flex flex-col md:flex-row">
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >Home</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >Features</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >Pricing</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >About</a
                  >
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <!-- Navbar -->

        <!-- Background image -->
        <div
          class="p-12 text-center relative overflow-hidden bg-no-repeat bg-cover"
          style="
            background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp');
            height: 400px;
          "
        >
          <div
            class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed"
            style="background-color: rgba(0, 0, 0, 0.6)"
          >
            <div class="flex justify-center items-center h-full">
              <div class="text-white">
                <h2 class="font-semibold text-4xl mb-4">Heading</h2>
                <h4 class="font-semibold text-xl mb-6">Subheading</h4>
                <a
                  class="inline-block px-7 py-3 mb-1 border-2 border-gray-200 text-gray-200 font-medium text-sm leading-snug uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out"
                  href="#!"
                  role="button"
                  data-mdb-ripple="true"
                  data-mdb-ripple-color="light"
                  >Call to action</a
                >
              </div>
            </div>
          </div>
        </div>
        <!-- Background image -->
      </header>
      
        
    

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

Learn more about Rome
        
            
      <header>
        <!-- Navbar -->
        <nav
          class="navbar navbar-expand-md shadow-lg py-2 bg-gray-50 relative flex items-center w-full justify-between"
        >
          <div class="px-6">
            <button
              class="navbar-toggler border-0 py-3 px-2 md:hidden leading-none text-xl bg-transparent text-gray-600 hover:text-gray-700 focus:text-gray-700 transition-shadow duration-150 ease-in-out"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContentO"
              aria-controls="navbarSupportedContentO"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <svg
                aria-hidden="true"
                focusable="false"
                data-prefix="fas"
                class="w-5"
                role="img"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 448 512"
              >
                <path
                  fill="currentColor"
                  d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
                ></path>
              </svg>
            </button>
            <div class="navbar-collapse collapse grow items-center" id="navbarSupportedContentO">
              <ul class="navbar-nav mr-auto flex flex-col md:flex-row">
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >Home</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >Features</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >Pricing</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >About</a
                  >
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <!-- Navbar -->

        <!-- Background image -->
        <div
          class="p-12 text-center relative overflow-hidden bg-no-repeat bg-cover h-96 lg:h-screen"
          style="background-image: url('https://mdbootstrap.com/img/Photos/Inne/ostia.jpg')"
        >
          <div
            class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed"
            style="background-color: rgba(2, 56, 53, 0.7)"
          >
            <div class="flex justify-center items-center h-full">
              <div class="text-white">
                <h2 class="font-semibold text-4xl mb-4">
                  The background photo shows Lido di Ostia
                </h2>
                <h4 class="font-semibold text-xl mb-6">
                  It is a coastal town in Italy that is part of Rome
                </h4>
                <a
                  class="inline-block px-7 py-3 mb-1 border-2 border-gray-200 text-gray-200 font-medium text-sm leading-snug uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out"
                  href="#!"
                  role="button"
                  data-mdb-ripple="true"
                  data-mdb-ripple-color="light"
                  >Learn more about Rome</a
                >
              </div>
            </div>
          </div>
        </div>
        <!-- Background image -->
      </header>
      
        
    

Fixed navbar

Stick the navbar to the top of the window by using .fixed-top class. 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="navbar navbar-expand-md shadow-lg py-2 bg-white flex items-center w-full justify-between fixed top-0 right-0 left-0"
        >
          <div class="px-6">
            <button
              class="navbar-toggler border-0 py-3 px-2 md:hidden leading-none text-xl bg-transparent text-gray-600 hover:text-gray-700 focus:text-gray-700 transition-shadow duration-150 ease-in-out"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContentL"
              aria-controls="navbarSupportedContentL"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <svg
                aria-hidden="true"
                focusable="false"
                data-prefix="fas"
                class="w-5"
                role="img"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 448 512"
              >
                <path
                  fill="currentColor"
                  d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
                ></path>
              </svg>
            </button>
            <div class="navbar-collapse collapse grow items-center" id="navbarSupportedContentL">
              <ul class="navbar-nav mr-auto flex flex-col md:flex-row">
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >Home</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >Features</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >Pricing</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >About</a
                  >
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <!-- Navbar -->

        <!-- Jumbotron -->
        <div class="p-12 text-center bg-gray-100 text-gray-700">
          <h2 class="font-semibold text-4xl mb-4">Heading</h2>
          <h4 class="font-semibold text-xl mb-6">Subheading</h4>
          <button
            type="button"
            class="inline-block px-6 py-2.5 mb-1 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
            data-mdb-ripple="true"
            data-mdb-ripple-color="light"
          >
            Call to action
          </button>
        </div>
        <!-- Jumbotron -->
      </header>
      
        
    

Fixed navbar with background image

Heading

Subheading

Call to action

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

        
            
      <header>
        <!-- Navbar -->
        <nav
          class="navbar navbar-expand-md shadow-lg py-2 bg-white flex items-center w-full justify-between fixed top-0 right-0 left-0"
        >
          <div class="px-6">
            <button
              class="navbar-toggler border-0 py-3 px-2 md:hidden leading-none text-xl bg-transparent text-gray-600 hover:text-gray-700 focus:text-gray-700 transition-shadow duration-150 ease-in-out"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContentM"
              aria-controls="navbarSupportedContentM"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <svg
                aria-hidden="true"
                focusable="false"
                data-prefix="fas"
                class="w-5"
                role="img"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 448 512"
              >
                <path
                  fill="currentColor"
                  d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
                ></path>
              </svg>
            </button>
            <div class="navbar-collapse collapse grow items-center" id="navbarSupportedContentM">
              <ul class="navbar-nav mr-auto flex flex-col md:flex-row">
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >Home</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >Features</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >Pricing</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link block p-2 text-gray-600 hover:text-gray-700 focus:text-gray-700 transition duration-150 ease-in-out"
                    href="#!"
                    data-mdb-ripple="true"
                    data-mdb-ripple-color="light"
                    >About</a
                  >
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <!-- Navbar -->

        <!-- Background image -->
        <div
          class="p-12 text-center relative overflow-hidden bg-no-repeat bg-cover"
          style="
            background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp');
            height: 400px;
          "
        >
          <div
            class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed"
            style="background-color: rgba(0, 0, 0, 0.6)"
          >
            <div class="flex justify-center items-center h-full">
              <div class="text-white">
                <h2 class="font-semibold text-4xl mb-4">Heading</h2>
                <h4 class="font-semibold text-xl mb-6">Subheading</h4>
                <a
                  class="inline-block px-7 py-3 mb-1 border-2 border-gray-200 text-gray-200 font-medium text-sm leading-snug uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out"
                  href="#!"
                  role="button"
                  data-mdb-ripple="true"
                  data-mdb-ripple-color="light"
                  >Call to action</a
                >
              </div>
            </div>
          </div>
        </div>
        <!-- Background image -->
      </header>