Published on

3 Things You Must Know To Create A Header Farmat With Tailwind CSS

Header Farmat

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes to make it easier to create responsive and customizable user interfaces. It is a popular choice for front-end developers who want to streamline their workflow and create consistent designs.

The description of Header Format UI component

The header format is a common UI component that is used on websites and applications to display important information such as the logo, navigation menu, and search bar. It is typically located at the top of the page and is one of the first things that users see when they visit a website.

Why use Tailwind CSS to create a Header Format UI component?

Tailwind CSS provides a number of benefits for creating a header format UI component. Firstly, it has a large number of pre-defined classes that can be used to style the different elements of the header. This saves time and makes it easier to create a consistent design.

Secondly, Tailwind CSS is highly customizable. It allows developers to easily modify the default styles and create their own custom classes. This means that it is possible to create a unique header format that matches the branding and style of the website or application.

Finally, Tailwind CSS is responsive by default. This means that the header format will automatically adjust to different screen sizes and devices, ensuring that it looks good on all platforms.

The preview of Header Format UI component

To create a header format UI component with Tailwind CSS, we will use a combination of pre-defined classes and custom styles. The result will be a clean and modern header format that is fully responsive.

Free download of the Header Farmat's source code

The source code of Header Format UI component

The source code for the header format UI component is relatively simple and easy to understand. We will use HTML and Tailwind CSS classes to create the different elements of the header.

<header class="bg-white">
  <div class="container mx-auto px-4 py-8 flex items-center">

    <!-- logo -->
    <div class="mr-auto md:w-48 flex-shrink-0">
      <img class="h-8 md:h-10" src="https://i.ibb.co/98pHdFq/2021-10-27-15h51-15.png" alt="">
    </div>

    <!-- search -->
    <div class="w-full max-w-xs xl:max-w-lg 2xl:max-w-2xl bg-gray-100 rounded-md hidden xl:flex items-center">
      <select class="bg-transparent uppercase font-bold text-sm p-4 mr-4" name="" id="">
        <option>all categories</option>
      </select>
      <input class="border-l border-gray-300 bg-transparent font-semibold text-sm pl-4" type="text" placeholder="I'm searching for ...">
      <svg class="ml-auto h-5 px-4 text-gray-500" aria-hidden="true" focusable="false" data-prefix="far" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-search fa-w-16 fa-9x"><path fill="currentColor" d="M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z"></path></svg>
    </div>

    <!-- phone number -->
    <div class="ml-auto md:w-48 hidden sm:flex flex-col place-items-end">
      <span class="font-bold md:text-xl">8 800 332 65-66</span>
      <span class="font-semibold text-sm text-gray-400">Support 24/7</span>
    </div>

    <!-- buttons -->
    <nav class="contents">
      <ul class="ml-4 xl:w-48 flex items-center justify-end">
        <li class="ml-2 lg:ml-4 relative inline-block">
          <a class="" href="">
            <svg class="h-9 lg:h-10 p-2 text-gray-500" aria-hidden="true" focusable="false" data-prefix="far" data-icon="user" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-user fa-w-14 fa-9x"><path fill="currentColor" d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"></path></svg>
          </a>
        </li>
        <li class="ml-2 lg:ml-4 relative inline-block">
          <a class="" href="">
            <div class="absolute -top-1 right-0 z-10 bg-yellow-400 text-xs font-bold px-1 py-0.5 rounded-sm">3</div>
            <svg class="h-9 lg:h-10 p-2 text-gray-500" aria-hidden="true" focusable="false" data-prefix="far" data-icon="heart" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-heart fa-w-16 fa-9x"><path fill="currentColor" d="M458.4 64.3C400.6 15.7 311.3 23 256 79.3 200.7 23 111.4 15.6 53.6 64.3-21.6 127.6-10.6 230.8 43 285.5l175.4 178.7c10 10.2 23.4 15.9 37.6 15.9 14.3 0 27.6-5.6 37.6-15.8L469 285.6c53.5-54.7 64.7-157.9-10.6-221.3zm-23.6 187.5L259.4 430.5c-2.4 2.4-4.4 2.4-6.8 0L77.2 251.8c-36.5-37.2-43.9-107.6 7.3-150.7 38.9-32.7 98.9-27.8 136.5 10.5l35 35.7 35-35.7c37.8-38.5 97.8-43.2 136.5-10.6 51.1 43.1 43.5 113.9 7.3 150.8z"></path></svg>
          </a>
        </li>
        <li class="ml-2 lg:ml-4 relative inline-block">
          <a class="" href="">
            <div class="absolute -top-1 right-0 z-10 bg-yellow-400 text-xs font-bold px-1 py-0.5 rounded-sm">12</div>
            <svg class="h-9 lg:h-10 p-2 text-gray-500" aria-hidden="true" focusable="false" data-prefix="far" data-icon="shopping-cart" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="svg-inline--fa fa-shopping-cart fa-w-18 fa-9x"><path fill="currentColor" d="M551.991 64H144.28l-8.726-44.608C133.35 8.128 123.478 0 112 0H12C5.373 0 0 5.373 0 12v24c0 6.627 5.373 12 12 12h80.24l69.594 355.701C150.796 415.201 144 430.802 144 448c0 35.346 28.654 64 64 64s64-28.654 64-64a63.681 63.681 0 0 0-8.583-32h145.167a63.681 63.681 0 0 0-8.583 32c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-18.136-7.556-34.496-19.676-46.142l1.035-4.757c3.254-14.96-8.142-29.101-23.452-29.101H203.76l-9.39-48h312.405c11.29 0 21.054-7.869 23.452-18.902l45.216-208C578.695 78.139 567.299 64 551.991 64zM208 472c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm256 0c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm23.438-200H184.98l-31.31-160h368.548l-34.78 160z"></path></svg>
          </a>
        </li>
      </ul>
    </nav>

    <!-- cart count -->
    <div class="ml-4 hidden sm:flex flex-col font-bold">
      <span class="text-xs text-gray-400">Your Cart</span>
      <span>$2,650,59</span>
    </div>
  </div>
  
  <hr>
</header>

How to create a Header Format with Tailwind CSS?

  1. Start by creating a new HTML file and adding the basic structure for the header. This should include a container element, a logo element, a navigation menu, and a search bar.

  2. Add the Tailwind CSS CDN to the head of the HTML file. This will allow us to use the pre-defined classes provided by Tailwind CSS.

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
</head>
  1. Add the necessary classes to the different elements of the header. For example, we can use the flex and justify-between classes to create a horizontal layout for the header. We can also use the text-white and font-bold classes to style the logo.
<header class="bg-gray-800">
  <div class="container mx-auto flex justify-between py-4">
    <div class="text-white font-bold">
      My Website
    </div>
    <nav>
      <ul class="flex">
        <li class="px-4">
          <a href="#" class="text-white hover:text-gray-300">Home</a>
        </li>
        <li class="px-4">
          <a href="#" class="text-white hover:text-gray-300">About</a>
        </li>
        <li class="px-4">
          <a href="#" class="text-white hover:text-gray-300">Contact</a>
        </li>
      </ul>
    </nav>
    <div>
      <input type="text" placeholder="Search" class="px-4 py-2 rounded-full bg-gray-700 text-white">
    </div>
  </div>
</header>
  1. Customize the header by adding your own styles and classes. For example, you can change the background color, font size, and padding of the different elements.
<header class="bg-blue-500">
  <div class="container mx-auto flex justify-between py-4">
    <div class="text-white font-bold text-2xl">
      My Website
    </div>
    <nav>
      <ul class="flex">
        <li class="px-4">
          <a href="#" class="text-white hover:text-gray-300">Home</a>
        </li>
        <li class="px-4">
          <a href="#" class="text-white hover:text-gray-300">About</a>
        </li>
        <li class="px-4">
          <a href="#" class="text-white hover:text-gray-300">Contact</a>
        </li>
      </ul>
    </nav>
    <div>
      <input type="text" placeholder="Search" class="px-4 py-2 rounded-full bg-gray-200 text-gray-800">
    </div>
  </div>
</header>
  1. Test the header on different screen sizes and devices to ensure that it is fully responsive.

Conclusion

Creating a header format UI component with Tailwind CSS is a simple and efficient process. By using pre-defined classes and custom styles, it is possible to create a unique and responsive header that matches the branding and style of the website or application. With these three things in mind, you can create a header format UI component that is both functional and visually appealing.