Published on

Ways To Build A Header Farmat Full With Tailwind CSS In 60 Minutes

Tags
FormsNavigationsPages
Header Farmat full

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

The description of Header Farmat full ui component

Header farmat full

Why use Tailwind CSS to build a Header Farmat full ui component?

  • It can make the building process of Header Farmat full ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Header Farmat full component file.

The preview of Header Farmat full ui component

Free download of the Header Farmat full's source code

The source code of Header Farmat full ui component

<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 lg: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>

  <div class="container mx-auto px-4 py-2 flex items-center">
    <button class="bg-yellow-400 hover:bg-gray-700 font-bold uppercase px-4 xl:px-6 py-2 xl:py-3 rounded flex-shrink-0 flex items-center">
      <svg class="h-8 p-1" aria-hidden="true" focusable="false" data-prefix="fal" data-icon="bars" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-bars fa-w-14 fa-9x"><path fill="currentColor" d="M442 114H6a6 6 0 0 1-6-6V84a6 6 0 0 1 6-6h436a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6zm0 160H6a6 6 0 0 1-6-6v-24a6 6 0 0 1 6-6h436a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6zm0 160H6a6 6 0 0 1-6-6v-24a6 6 0 0 1 6-6h436a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6z" class=""></path></svg>
      <span class="ml-4">shop by category</span>
    </button>

    <nav class="ml-8">
      <ul class="flex items-center font-bold">
        <li class="px-2 flex items-center">
          <svg class="h-7 lg:h-8 p-2 flex-shrink-0" aria-hidden="true" focusable="false" data-prefix="far" data-icon="bolt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="svg-inline--fa fa-bolt fa-w-12 fa-9x"><path fill="currentColor" d="M377.8 167.9c-8.2-14.3-23.1-22.9-39.6-22.9h-94.4l28.7-87.5c3.7-13.8.8-28.3-7.9-39.7C255.8 6.5 242.5 0 228.2 0H97.7C74.9 0 55.4 17.1 52.9 37.1L.5 249.3c-1.9 13.8 2.2 27.7 11.3 38.2C20.9 298 34.1 304 48 304h98.1l-34.9 151.7c-3.2 13.7-.1 27.9 8.6 38.9 8.7 11.1 21.8 17.4 35.9 17.4 16.3 0 31.5-8.8 38.8-21.6l183.2-276.7c8.4-14.3 8.4-31.5.1-45.8zM160.1 457.4L206.4 256H47.5L97.7 48l127.6-.9L177.5 193H334L160.1 457.4z"></path></svg>
          <span>Deal Today</span>
        </li>
        <li class="px-2 flex items-center">
          <svg class="h-7 lg:h-8 p-2 flex-shrink-0" aria-hidden="true" focusable="false" data-prefix="far" data-icon="tag" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-tag fa-w-16 fa-9x"><path fill="currentColor" d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a47.998 47.998 0 0 0 14.059 33.941l211.882 211.882c18.745 18.745 49.137 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM259.886 463.996L48 252.118V48h204.118L464 259.882 259.886 463.996zM192 144c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48z"></path></svg>
          <span>Special Prices</span>
        </li>
        <li class="px-2 flex">
          <span>Fresh</span>
          <svg class="ml-1 h-7 lg:h-8 p-2 text-gray-500" aria-hidden="true" focusable="false" data-prefix="far" data-icon="chevron-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-chevron-down fa-w-14 fa-9x"><path fill="currentColor" d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"></path></svg>
        </li>
        <li class="px-2 flex">
          <span>Frozen</span>
          <svg class="ml-1 h-7 lg:h-8 p-2 text-gray-500" aria-hidden="true" focusable="false" data-prefix="far" data-icon="chevron-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-chevron-down fa-w-14 fa-9x"><path fill="currentColor" d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"></path></svg>
        </li>
        <li class="px-2 flex">
          <span>Demos</span>
          <svg class="ml-1 h-7 lg:h-8 p-2 text-gray-500" aria-hidden="true" focusable="false" data-prefix="far" data-icon="chevron-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-chevron-down fa-w-14 fa-9x"><path fill="currentColor" d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"></path></svg>
        </li>
        <li class="px-2 flex">
          <span>Shop</span>
          <svg class="ml-1 h-7 lg:h-8 p-2 text-gray-500" aria-hidden="true" focusable="false" data-prefix="far" data-icon="chevron-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-chevron-down fa-w-14 fa-9x"><path fill="currentColor" d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"></path></svg>
        </li>
        <li class="px-2 flex">
          <span>Blog</span>
          <svg class="ml-1 h-7 lg:h-8 p-2 text-gray-500" aria-hidden="true" focusable="false" data-prefix="far" data-icon="chevron-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-chevron-down fa-w-14 fa-9x"><path fill="currentColor" d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"></path></svg>
        </li>
        <li class="px-2 flex">
          <span>Pages</span>
          <svg class="ml-1 h-7 lg:h-8 p-2 text-gray-500" aria-hidden="true" focusable="false" data-prefix="far" data-icon="chevron-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-chevron-down fa-w-14 fa-9x"><path fill="currentColor" d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"></path></svg>
        </li>
        <li class="px-2 flex">
          <span>Shop</span>
          <svg class="ml-1 h-7 lg:h-8 p-2 text-gray-500" aria-hidden="true" focusable="false" data-prefix="far" data-icon="chevron-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-chevron-down fa-w-14 fa-9x"><path fill="currentColor" d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z"></path></svg>
        </li>
      </ul>
    </nav>

    <a href="" class="ml-auto flex-shrink-0 flex items-center">
      <svg class="h-7 lg:h-8 p-2 text-gray-500" aria-hidden="true" focusable="false" data-prefix="far" data-icon="sync-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-sync-alt fa-w-16 fa-9x"><path fill="currentColor" d="M483.515 28.485L431.35 80.65C386.475 35.767 324.485 8 256 8 123.228 8 14.824 112.338 8.31 243.493 7.971 250.311 13.475 256 20.301 256h28.045c6.353 0 11.613-4.952 11.973-11.294C66.161 141.649 151.453 60 256 60c54.163 0 103.157 21.923 138.614 57.386l-54.128 54.129c-7.56 7.56-2.206 20.485 8.485 20.485H492c6.627 0 12-5.373 12-12V36.971c0-10.691-12.926-16.045-20.485-8.486zM491.699 256h-28.045c-6.353 0-11.613 4.952-11.973 11.294C445.839 370.351 360.547 452 256 452c-54.163 0-103.157-21.923-138.614-57.386l54.128-54.129c7.56-7.56 2.206-20.485-8.485-20.485H20c-6.627 0-12 5.373-12 12v143.029c0 10.691 12.926 16.045 20.485 8.485L80.65 431.35C125.525 476.233 187.516 504 256 504c132.773 0 241.176-104.338 247.69-235.493.339-6.818-5.165-12.507-11.991-12.507z"></path></svg>
      <span class="ml-1 font-bold">Recently Viewed</span>
    </a>
  </div>

  <hr>
</header>

How to build a Header Farmat full with Tailwind CSS?

Install tailwind css of verion 2.2.4

Use the script html tag to import the script of Tailwind CSS of the version 2.2.4

<script src="https://cdn.tailwindcss.com"></script>

All the unility class needed to build a Header Farmat full component

  • bg-white
  • mx-auto
  • px-4
  • py-8
  • flex
  • mr-auto
  • md:w-48
  • flex-shrink-0
  • h-8
  • md:h-10
  • w-full
  • max-w-xs
  • xl:max-w-lg
  • 2xl:max-w-2xl
  • bg-gray-100
  • hidden
  • lg:flex
  • bg-transparent
  • text-sm
  • p-4
  • mr-4
  • border-l
  • border-gray-300
  • pl-4
  • ml-auto
  • h-5
  • text-gray-500
  • sm:flex
  • flex-col
  • md:text-xl
  • text-gray-400
  • contents
  • ml-4
  • xl:w-48
  • ml-2
  • lg:ml-4
  • relative
  • inline-block
  • h-9
  • lg:h-10
  • p-2
  • absolute
  • -top-1
  • right-0
  • z-10
  • bg-yellow-400
  • text-xs
  • px-1
  • py-0.5
  • py-2
  • hover:bg-gray-700
  • xl:px-6
  • xl:py-3
  • p-1
  • ml-8
  • px-2
  • h-7
  • lg:h-8
  • ml-1

59 steps to build a Header Farmat full component with Tailwind CSS

  1. Control the background color of an element to white using the bg-white utilities.

  2. Control the horizontal margin of an element to auto using the mx-auto utilities.

  3. Control the horizontal padding of an element to 1rem using the px-4 utilities.

  4. Control the vertical padding of an element to 2rem using the py-8 utilities.

  5. Use flex to create a block-level flex container.

  6. Control the margin on right side of an element to auto using the mr-auto utilities.

  7. Use md:w-48 to set an element to a fixed width(12rem) at only medium screen sizes.

  8. Use flex to create a block-level flex container.

  9. Use h-8 to set an element to a fixed height(2rem).

  10. Use md:h-10 to set an element to a fixed height(2.5rem) at only medium screen sizes.

  11. Use w-full to set an element to a 100% based width.

  12. Set the maximum width/height of an element using the max-w-xs utilities.

  13. Set the maximum width/height of an element using the xl:max-w-lg utilities at only extremely large screen sizes.

  14. Set the maximum width/height of an element using the 2xl:max-w-2xl utilitiesundefined.

  15. Control the background color of an element to gray-100 using the bg-gray-100 utilities.

  16. Use hidden to set an element to display: none and remove it from the page layout.

  17. Use flex to create a block-level flex container at only large screen sizes.

  18. Control the background color of an element to transparent using the bg-transparent utilities.

  19. Control the text color of an element to sm using the text-sm utilities.

  20. Control the padding on all sides of an element to 1rem using the p-4 utilities.

  21. Control the margin on right side of an element to 1rem using the mr-4 utilities.

  22. Control the border color of an element to l using the border-l utilities.

  23. Control the border color of an element to gray-300 using the border-gray-300 utilities.

  24. Set the left padding of the element to 1rem using the pl-4 utilities class

  25. Control the margin on left side of an element to auto using the ml-auto utilities.

  26. Use h-5 to set an element to a fixed height(1.25rem).

  27. Control the text color of an element to gray-500 using the text-gray-500 utilities.

  28. Use flex to create a block-level flex container at only small screen sizes.

  29. Use flex to create a block-level flex container.

  30. Control the text color of an element to xl at only medium screen sizes using the md:text-xl utilities.

  31. Control the text color of an element to gray-400 using the text-gray-400 utilities.

  32. Use contents to create a “phantom” container whose children act like direct children of the parert.

  33. Control the margin on left side of an element to 1rem using the ml-4 utilities.

  34. Use xl:w-48 to set an element to a fixed width(12rem) at only extremely large screen sizes.

  35. Control the margin on left side of an element to 0.5rem using the ml-2 utilities.

  36. Control the margin on left side of an element to 1rem at only large screen sizes using the lg:ml-4 utilities.

  37. Use relative to position an element according to the normal flow of the document.

  38. Use inline-block utilities to wrap the element to prevent the text inside from extending beyond its parent.

  39. Use h-9 to set an element to a fixed height(2.25rem).

  40. Use lg:h-10 to set an element to a fixed height(2.5rem) at only large screen sizes.

  41. Control the padding on all sides of an element to 0.5rem using the p-2 utilities.

  42. Use absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.

  43. Use the -top-1 utilities to set the top position of a positioned element to -0.25rem.

  44. Use the right-0 utilities to set the right position of a positioned element to 0rem.

  45. Control the stack order (or three-dimensional positioning) of an element to 10 in Tailwind, regardless of order it has been displayed, using the z-10 utilities.

  46. Control the background color of an element to yellow-400 using the bg-yellow-400 utilities.

  47. Control the text color of an element to xs using the text-xs utilities.

  48. Control the horizontal padding of an element to 0.25rem using the px-1 utilities.

  49. Control the vertical padding of an element to 0.5 using the py-0.5 utilities.

  50. Control the vertical padding of an element to 0.5rem using the py-2 utilities.

  51. Control the background color of an element to gray-700 using the hover:bg-gray-700 utilities on hover.

  52. Control the horizontal padding of an element to 1.5rem at only extremely large screen sizes using the xl:px-6 utilities.

  53. Control the vertical padding of an element to 0.75rem at only extremely large screen sizes using the xl:py-3 utilities.

  54. Control the padding on all sides of an element to 0.25rem using the p-1 utilities.

  55. Control the margin on left side of an element to 2rem using the ml-8 utilities.

  56. Control the horizontal padding of an element to 0.5rem using the px-2 utilities.

  57. Use h-7 to set an element to a fixed height(1.75rem).

  58. Use lg:h-8 to set an element to a fixed height(2rem) at only large screen sizes.

  59. Control the margin on left side of an element to 0.25rem using the ml-1 utilities.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to build a Header Farmat full components, learn and follow along to implement your own components.