Published on

How To Make A WebPage Example With Pure Tailwind Responsive Nav With Tailwind CSS From Scratch

Tags
Widget
WebPage Example With Pure Tailwind Responsive Nav

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 WebPage Example With Pure Tailwind Responsive Nav ui component

Just seeing how easy it is to make a tailwind navbar. it's really basic and needs a lot of work. but it is a great starting point for most projects. -- update: i removed the old nav and added a sidenav to better ready the nav for a project.

Why use Tailwind CSS to create a WebPage Example With Pure Tailwind Responsive Nav ui component?

  • It can make the building process of WebPage Example With Pure Tailwind Responsive Nav ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in WebPage Example With Pure Tailwind Responsive Nav component file.

The preview of WebPage Example With Pure Tailwind Responsive Nav ui component

Free download of the WebPage Example With Pure Tailwind Responsive Nav's source code

The source code of WebPage Example With Pure Tailwind Responsive Nav ui component

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<style type="text/css">
  .transition {
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.rotate-360 {
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}

.rotate-360-backwards {
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -moz-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
  -o-transform: rotate(-360deg);
  -ms-transform: rotate(-360deg);
  transform: rotate(-360deg);
}

.close {
  margin-right: -50vw;
}

.open {
  margin-right: 0vw;
}
</style>


<div class="mt-0 w-full flex flex-row flex-wrap">


<!-- Begin Navbar -->
<div class="p-3 m-0 w-full flex flex-row flex-wrap bg-white shadow">
  <div class="w-1/5 flex flex-row flex-wrap justify-center content-center">
    <img class="h-10" src="https://scontent.fmkc1-1.fna.fbcdn.net/v/t1.15752-9/72166317_698640233879504_2411608726361341952_n.png?_nc_cat=102&_nc_eui2=AeEaws1iwW_9iU6dgkgPoAK-MJ7YBeMreLSa3P9XxMVnMYdZ6t6r4OqZzsK8iToFjdErk_eqJuVLd2ja0JsV7wGbn2ily1X8z3-0RXpfFnLGiw&_nc_oc=AQnudkEM6-Pb2eFC0QogTrJHPnHMwZ4fjEziqu7ddU4UXonxNSLRfmgPtqy7tLNjDWg&_nc_ht=scontent.fmkc1-1.fna&oh=77665e2212f550a8ddf32a83fd17f97c&oe=5E4CFB34">
  </div>
  
  <div class="sm:flex md:hidden z-50 w-4/5 flex flex-row flex-wrap justify-end content-center h-10">
    <button id="nav" class="text-gray-600 font-semibold px-1 text-2xl p-1 px-2 rounded bg-gray-20" type="button"><i class="transition-rotate fa fa-bars"></i></button>
  </div>
  
  <div id="nav-items" class="sm:border-l-4 md:border-none border-indigo-400 transition close sm:pt-16 md:pt-0 sm:h-full md:h-auto sm:absolute sm:right-0 sm:top-0 md:top-auto md:right-auto md:relative md:w-4/5 sm:bg-gray-900 sm:text-white md:text-gray-500 md:bg-transparent md:flex flex flex-row flex-wrap justify-center sm:content-start md:content-center">
    <a class="sm:py-3 sm:w-full sm:text-center sm:text-2xl md:text-left md:text-lg md:w-auto font-semibold px-1" href="#home">Home</a>
    <a class="sm:py-3 sm:w-full sm:text-center sm:text-2xl md:text-left md:text-lg md:w-auto font-semibold px-1" href="#world">World</a>
    <a class="sm:py-3 sm:w-full sm:text-center sm:text-2xl md:text-left md:text-lg md:w-auto font-semibold px-1" href="#sports">Sports</a>
    <a class="sm:py-3 sm:w-full sm:text-center sm:text-2xl md:text-left md:text-lg md:w-auto font-semibold px-1" href="#tech">Tech</a>
  </div>
</div>
<!-- End Navbar -->


<!-- Start Content -->
<div class="w-full bg-indigo-100 h-full sm:p-0 md:p-10 xl:p-24">
  <div class="sm:w-full md:w-1/2 lg:w-1/2">
    <div class="bg-white shadow rounded-lg border">
      <img class="rounded-t-lg shadow"src="https://images.unsplash.com/photo-1495020689067-958852a7765e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80">
      <div class="p-5 text-gray-600">
        <div class="text-gray-500 text-2xl font-thin">Card Content <small class="text-sm font-semibold">Nov 3rd, 2019</small></div>
        <p class="pt-1 text-gray-500 font-semibold">
          This is some card content to demonstrate how the cards work.
        </p>
        <button class="mt-3 p-3 bg-gray-400 hover:bg-gray-500 text-white">Read More</button>
      </div>
    </div>
  </div>
</div>
<!-- End Content -->
</div>


<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script type="text/javascript">
    $("#nav").on("click", function(e) {
      e.preventDefault();
      if($("#nav-items").hasClass("close")) {
        $("#nav-items").removeClass("close").addClass("open");
        $("#nav>i").removeClass("rotate-360-backwards fa-bars text-gray-600").addClass("rotate-360 fa-close text-white float-right");
      } else {
        $("#nav-items").removeClass("open").addClass("close");
        $("#nav>i").addClass("rotate-360-backwards fa-bars text-gray-600").removeClass("rotate-360 fa-close text-white float-right");
      }
    });
  </script>

How to create a WebPage Example With Pure Tailwind Responsive Nav with Tailwind CSS?

Install tailwind css of verion 1.0.4

Use the link html tag to import the stylesheet of Tailwind CSS of the version 1.0.4

<link href=https://unpkg.com/[email protected]/dist/tailwind.min.css rel="stylesheet">

All the unility class needed to create a WebPage Example With Pure Tailwind Responsive Nav component

  • mt-0
  • w-full
  • flex
  • flex-row
  • flex-wrap
  • p-3
  • m-0
  • bg-white
  • w-1/5
  • h-10
  • sm:flex
  • md:hidden
  • z-50
  • w-4/5
  • text-gray-600
  • px-1
  • text-2xl
  • p-1
  • px-2
  • bg-gray-20
  • sm:border-l-4
  • md:border-none
  • border-indigo-400
  • sm:pt-16
  • md:pt-0
  • sm:h-full
  • md:h-auto
  • sm:absolute
  • sm:right-0
  • sm:top-0
  • md:top-auto
  • md:right-auto
  • md:relative
  • md:w-4/5
  • sm:bg-gray-900
  • sm:text-white
  • md:text-gray-500
  • md:bg-transparent
  • md:flex
  • sm:py-3
  • sm:w-full
  • sm:text-center
  • sm:text-2xl
  • md:text-left
  • md:text-lg
  • md:w-auto
  • bg-indigo-100
  • h-full
  • sm:p-0
  • md:p-10
  • xl:p-24
  • md:w-1/2
  • lg:w-1/2
  • p-5
  • text-gray-500
  • text-sm
  • pt-1
  • mt-3
  • bg-gray-400
  • hover:bg-gray-500
  • text-white

61 steps to create a WebPage Example With Pure Tailwind Responsive Nav component with Tailwind CSS

  1. Control the margin on top side of an element to 0rem using the mt-0 utilities.

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

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

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

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

  6. Control the padding on all sides of an element to 0.75rem using the p-3 utilities.

  7. Control the margin on all sides of an element to 0rem using the m-0 utilities.

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

  9. Use w-1/5 to set an element to a fixed width(1/5).

  10. Use h-10 to set an element to a fixed height(2.5rem).

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

  12. Use hidden to set an element to display: none and remove it from the page layout at only medium screen sizes.

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

  14. Use w-4/5 to set an element to a fixed width(4/5).

  15. Control the text color of an element to gray-600 using the text-gray-600 utilities.

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

  17. Control the text color of an element to 2xl using the text-2xl utilities.

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

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

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

  21. Control the border color of an element to l-4 using the sm:border-l-4 utilities at only small screen sizes.

  22. Control the border color of an element to none using the md:border-none utilities at only medium screen sizes.

  23. Control the border color of an element to indigo-400 using the border-indigo-400 utilities.

  24. Control the padding on top side of an element to 4rem at only small screen sizes using the sm:pt-16 utilities.

  25. Control the padding on top side of an element to 0rem at only medium screen sizes using the md:pt-0 utilities.

  26. Use h-full to set an element’s height to 100% of its parent at only small screen sizes, as long as the parent has a defined height.

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

  28. Use absolute to position an element outside of the normal flow of the document at only small screen sizes, causing neighboring elements to act as if the element doesn’t exist.

  29. Use the sm:right-0 utilities to set the right position of a positioned element to 0rem at only small screen sizes.

  30. Use the sm:top-0 utilities to set the top position of a positioned element to 0rem at only small screen sizes.

  31. Use the md:top-auto utilities to set the top position of a positioned element to auto at only medium screen sizes.

  32. Use the md:right-auto utilities to set the right position of a positioned element to auto at only medium screen sizes.

  33. Use relative to position an element according to the normal flow of the document at only medium screen sizes.

  34. Use md:w-4/5 to set an element to a fixed width(4/5) at only medium screen sizes.

  35. Control the background color of an element to gray-900 using the sm:bg-gray-900 utilities at only small screen sizes.

  36. Control the text color of an element to white at only small screen sizes using the sm:text-white utilities.

  37. Control the text color of an element to gray-500 at only medium screen sizes using the md:text-gray-500 utilities.

  38. Control the background color of an element to transparent using the md:bg-transparent utilities at only medium screen sizes.

  39. Use flex to create a block-level flex container at only medium screen sizes.

  40. Control the vertical padding of an element to 0.75rem at only small screen sizes using the sm:py-3 utilities.

  41. Use w-full to set an element to a 100% based width at only small screen sizes.

  42. Control the text color of an element to center at only small screen sizes using the sm:text-center utilities.

  43. Control the text color of an element to 2xl at only small screen sizes using the sm:text-2xl utilities.

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

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

  46. The w-auto utility can be useful if you need to remove an element’s assigned width under a specific condition, like at a particular breakpoint.

  47. Control the background color of an element to indigo-100 using the bg-indigo-100 utilities.

  48. Use h-full to set an element’s height to 100% of its parent, as long as the parent has a defined height.

  49. Control the padding on all sides of an element to 0rem at only small screen sizes using the sm:p-0 utilities.

  50. Control the padding on all sides of an element to 2.5rem at only medium screen sizes using the md:p-10 utilities.

  51. Control the padding on all sides of an element to 6rem at only extremely large screen sizes using the xl:p-24 utilities.

  52. Use md:w-1/2 to set an element to a fixed width(1/2) at only medium screen sizes.

  53. Use lg:w-1/2 to set an element to a fixed width(1/2) at only large screen sizes.

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

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

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

  57. Control the padding on top side of an element to 0.25rem using the pt-1 utilities.

  58. Control the margin on top side of an element to 0.75rem using the mt-3 utilities.

  59. Control the background color of an element to gray-400 using the bg-gray-400 utilities.

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

  61. Control the text color of an element to white using the text-white utilities.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to create a WebPage Example With Pure Tailwind Responsive Nav components, learn and follow along to implement your own components.