Responsive NavBar using Tailwind CSS

In many Front-end Interviews, you will be asked about creating different components. It is very important that you use latest cutting edge technology with proper implementations.

Tailwind css is utility first CSS frame work which has build-in responsive feature. You don’t need to add any media queries or add element specific css. All you do is add ready to use classes to HTML element and it will work out of the box.

Here we are going to create step by step guide to create Universal Responsive Navbar Components which you can integrate with any front-end frame work like Nodejs, React, Vue.js , Next.js and many more.

Create Semantic HTML

<nav>
  <div>
    <div>
      <div>
        <div>
          <!-- Website Logo -->
          <a href="#">
            <span>Navigation</span>
          </a>
        </div>
        <!-- Primary Navbar items -->
        <div>
          <a href="">Home</a>
          <a href="">Services</a>
          <a href="">About</a>
          <a href="">Contact
            Us</a>
        </div>
      </div>
      <!-- Secondary Navbar items -->
      <div>
        <a href="">Log
          In</a>
        <a href="">Sign
          Up</a>
      </div>
    </div>
  </div>
</nav>

Read More:

CSS3 Interview Coding Question

Interview Guide

Create Mobile Menu

<div>
  <ul>
    <li>
      <a href="index.html">Home</a>
    </li>
    <li>
      <a href="#services">Services</a>
    </li>
    <li>
      <a href="#about">About</a>
    </li>
    <li>
      <a href="#contact">Contact Us</a>
    </li>
  </ul>
</div>

Now Add Mobile Menu Button

<div >
  <button>
    <svg 
      stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
      <path d="M4 6h16M4 12h16M4 18h16"></path>
    </svg>
  </button>
</div>

Add Basic Style to Display Navbar

<nav class="bg-white shadow-lg">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between">
      <div class="flex space-x-7">
        <div>
          <!-- Website Logo -->
          <a href="#" class="flex items-center py-4 px-2">
            <span class="font-semibold text-gray-500 text-lg">Navigation</span>
          </a>
        </div>
        <!-- Primary Navbar items -->
        <div class="hidden md:flex items-center space-x-1">
          <a href="" class="py-4 px-2 text-green-500 border-b-4 border-green-500 font-semibold">Home</a>
          <a href=""
            class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">Services</a>
          <a href=""
            class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">About</a>
          <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">Contact
            Us</a>
        </div>
      </div>
      <!-- Secondary Navbar items -->
      <div class="hidden md:flex items-center space-x-3">
        <a href=""
          class="py-2 px-2 font-medium text-gray-500 rounded hover:bg-green-500 hover:text-white transition duration-300">Log
          In</a>
        <a href=""
          class="py-2 px-2 font-medium text-white bg-green-500 rounded hover:bg-green-400 transition duration-300">Sign
          Up</a>
      </div>
      <!-- Mobile menu button -->
      <div class="md:hidden flex items-center">
        <button class="outline-none mobile-menu-button">
          <svg class="w-6 h-6 text-gray-500 hover:text-green-500" x-show="!showMenu" fill="none" stroke-linecap="round"
            stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <!-- mobile menu -->
  <div class="hidden mobile-menu">
    <ul class="">
      <li class="active">
        <a href="index.html" class="block text-sm px-2 py-4 text-white bg-green-500 font-semibold">Home</a>
      </li>
      <li>
        <a href="#services" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">Services</a>
      </li>
      <li>
        <a href="#about" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">About</a>
      </li>
      <li>
        <a href="#contact" class="block text-sm px-2 py-4 hover:bg-green-500 transition duration-300">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>

Here is the working code. Play in playground