Published on

How To Create A Centered Hero Header With Tailwind CSS From Scratch

Tags
Pages
Centered Hero Header

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to rapidly build custom user interfaces. It provides a set of pre-defined CSS classes that you can use to style your HTML elements. With Tailwind CSS, you can create complex layouts and designs without writing any custom CSS.

The description of Centered Hero Header ui component

A hero header is a large, prominent section at the top of a webpage that typically contains a call to action or a key message. A centered hero header is a type of hero header that is centered on the page.

Why use Tailwind CSS to create a Centered Hero Header ui component?

Tailwind CSS provides a simple and efficient way to create a centered hero header. It offers a range of utility classes that you can use to position and style your header. With Tailwind CSS, you can create a beautiful and responsive centered hero header in just a few lines of code.

The preview of Centered Hero Header ui component

To create a centered hero header with Tailwind CSS, we will use a combination of flexbox and utility classes. We will position the header in the center of the page and add a background image to create a visually appealing design.

Free download of the Centered Hero Header's source code

The source code of Centered Hero Header ui component

To create a centered hero header with Tailwind CSS, we will use a combination of HTML and CSS. We will use the flexbox layout to position the header in the center of the page and add background image to create a visually appealing design.

<!doctype html>
<html lang="id-ID">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>F</title>
	<!---
	You may need jQuery
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	--->
	<style>
      /*
		You may need this for responsive background
		header {
			background: url('bg-425.jpg');
		}

		@media only screen and (min-width:640px) {
			header {
				background: url('bg-640.jpg');
			}
		}

		@media only screen and (min-width:768px) {
			header {
				background: url('bg-768.jpg');
			}
		}

		@media only screen and (min-width:1024px) {
			header {
				background: url('bg-1024.jpg');
			}
		}

		@media only screen and (min-width:1025px) {
			header {
				background: url('bg-max.jpg');
			}
		} */
      /* Default background by https://www.pexels.com/@knownasovan */
      header {
        background:url('https://images.pexels.com/photos/57690/pexels-photo-57690.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');}
	</style>
</head>

<body>

	<nav id="nav" class="fixed inset-x-0 top-0 flex flex-row justify-between z-10 text-white bg-transparent">

		<div class="p-4">
			<div class="font-extrabold tracking-widest text-xl"><a href="#" class="transition duration-500 hover:text-indigo-500">GARBAGE</a></div>
		</div>

		<!-- Nav Items Working on Tablet & Bigger Sceen -->
		<div class="p-4 hidden md:flex flex-row justify-between font-bold">
			<a id="hide-after-click" href="#about" class="mx-4 text-lg  border-b-2 border-transparent hover:border-b-2 hover:border-indigo-300 transition duration-500">About</a>
			<a href="#whyus" class="mx-4 text-lg border-b-2 border-transparent hover:border-b-2 hover:border-indigo-300 transition duration-500">Why
				Us ?</a>
			<a href="#showcase" class="mx-4 text-lg border-b-2 border-transparent hover:border-b-2 hover:border-indigo-300 transition duration-500">Our
				Products</a>
		</div>

		<!-- Burger Nav Button on Mobile -->
		<div id="nav-open" class="p-4 md:hidden">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
			 stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
				<line x1="3" y1="12" x2="21" y2="12"></line>
				<line x1="3" y1="6" x2="21" y2="6"></line>
				<line x1="3" y1="18" x2="21" y2="18"></line>
			</svg>
		</div>
	</nav>

	<!-- Opened Nav in Mobile, you can use javascript/jQuery -->
	<div id="nav-opened" class="fixed left-0 right-0 hidden bg-white mx-2 mt-16 rounded-br rounded-bl shadow z-10">
		<div class="p-2 divide-y divide-gray-600 flex flex-col">
			<a href="#about" class="p-2 font-semibold hover:text-indigo-700">About</a>
			<a href="#whyus" class="p-2 font-semibold hover:text-indigo-700">Why Us ?</a>
			<a href="#showcase" class="p-2 font-semibold hover:text-indigo-700">Our Products</a>
		</div>
	</div>

	<header id="up" class="bg-center bg-fixed bg-no-repeat bg-center bg-cover h-screen relative">
		<!-- Overlay Background + Center Control -->
		<div class="h-screen bg-opacity-50 bg-black flex items-center justify-center" style="background:rgba(0,0,0,0.5);">
			<div class="mx-2 text-center">
				<h1 class="text-gray-100 font-extrabold text-4xl xs:text-5xl md:text-6xl">
					<span class="text-white">Right</span> Place To
           </h1>
           <h2 class="text-gray-200 font-extrabold text-3xl xs:text-4xl md:text-5xl leading-tight">
            Get a <span class="text-white">Better</span> and <span class="text-white">Professionals</span> Design
           </h2>
           <div class="inline-flex">
           <button class="p-2 my-5 mx-2 bg-indigo-700 hover:bg-indigo-800 font-bold text-white rounded border-2 border-transparent hover:border-indigo-800 shadow-md transition duration-500 md:text-xl">Hire US!</button>
           <a href="#about"><button class="p-2 my-5 mx-2 bg-transparent border-2 bg-indigo-200 bg-opacity-75 hover:bg-opacity-100 border-indigo-700 rounded hover:border-indigo-800 font-bold text-indigo-800 shadow-md transition duration-500 md:text-lg">Learn More</button></a>
           </div>
        </div>
    </div>
</header>
  </body>
</html>

How to create a Centered Hero Header with Tailwind CSS?

To create a centered hero header with Tailwind CSS, follow these steps:

Step 1: Create the HTML markup

The first step is to create the HTML markup for the header. We will use a header element to wrap our content and add a div element to hold the background image.

<header class="flex items-center justify-center h-screen">
  <div class="absolute inset-0 bg-cover bg-center z-0" style="background-image: url('your-image-url');"></div>
  <div class="relative z-10">
    <h1 class="text-4xl font-bold text-white">Your Title Here</h1>
    <p class="text-xl text-white">Your Subtitle Here</p>
    <button class="bg-white text-gray-800 font-bold py-2 px-4 rounded-full mt-8">Get Started</button>
  </div>
</header>

In the above code, we have used the flex class to create a flex container that will center our content vertically and horizontally. We have also added an absolute positioned div element with a background image to create the hero header effect.

Step 2: Add Tailwind CSS to your project

The next step is to add Tailwind CSS to your project. You can either download the CSS file from the official website or install it via npm.

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">

Step 3: Style the header

Now that we have our HTML markup and Tailwind CSS installed, we can start styling our header. We will use the bg-cover and bg-center classes to position and scale our background image.

.bg-cover {
  background-size: cover;
}

.bg-center {
  background-position: center;
}

We will also use the text-* classes to style our title and subtitle, and the py-* and px-* classes to style our button.

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

Step 4: Preview and adjust

Finally, we can preview our centered hero header and adjust the styles as needed. You can adjust the font sizes, padding, and other styles to match your design.

Conclusion

In this article, we have learned how to create a centered hero header with Tailwind CSS. We have used a combination of flexbox and utility classes to position and style our header. With Tailwind CSS, you can create beautiful and responsive user interfaces in just a few lines of code.