Back to Discover
Tailwind CSS Responsive Navbar Code

Amelia
Created Nov 03, 2025
7 views
0 likes
0 comments
0 forks
Export Fork Like
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<body class="bg-gray-50">
  <!-- Navbar -->
  <nav x-data="{ open: false }" class="bg-gradient-to-r from-orange-500 to-orange-600 shadow-lg">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-16">
        <!-- Logo -->
        <div class="flex-shrink-0 flex items-center">
          <a href="#" class="text-white font-bold text-2xl flex items-center space-x-2">
            <ion-icon name="flame" class="text-3xl"></ion-icon>
            <span>Brand</span>
          </a>
        </div>

        <!-- Desktop Menu -->
        <div class="hidden md:flex md:items-center md:space-x-8">
          <a href="#" class="text-white hover:text-orange-100 transition duration-200 font-medium">Home</a>
          <a href="#" class="text-white hover:text-orange-100 transition duration-200 font-medium">About</a>
          <a href="#" class="text-white hover:text-orange-100 transition duration-200 font-medium">Services</a>
          <a href="#" class="text-white hover:text-orange-100 transition duration-200 font-medium">Portfolio</a>
          <a href="#" class="text-white hover:text-orange-100 transition duration-200 font-medium">Contact</a>
          <button class="bg-white text-orange-600 px-6 py-2 rounded-full font-semibold hover:bg-orange-50 transition duration-200">
            Get Started
          </button>
        </div>

        <!-- Mobile Menu Button -->
        <div class="md:hidden flex items-center">
          <button @click="open = !open" class="text-white hover:text-orange-100 focus:outline-none">
            <ion-icon :name="open ? 'close' : 'menu'" class="text-3xl"></ion-icon>
          </button>
        </div>
      </div>
    </div>

    <!-- Mobile Menu -->
    <div x-show="open" 
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 transform -translate-y-2"
         x-transition:enter-end="opacity-100 transform translate-y-0"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 transform translate-y-0"
         x-transition:leave-end="opacity-0 transform -translate-y-2"
         class="md:hidden bg-orange-600">
      <div class="px-4 pt-2 pb-4 space-y-2">
        <a href="#" class="block text-white hover:bg-orange-500 px-3 py-2 rounded-md font-medium transition duration-200">Home</a>
        <a href="#" class="block text-white hover:bg-orange-500 px-3 py-2 rounded-md font-medium transition duration-200">About</a>
        <a href="#" class="block text-white hover:bg-orange-500 px-3 py-2 rounded-md font-medium transition duration-200">Services</a>
        <a href="#" class="block text-white hover:bg-orange-500 px-3 py-2 rounded-md font-medium transition duration-200">Portfolio</a>
        <a href="#" class="block text-white hover:bg-orange-500 px-3 py-2 rounded-md font-medium transition duration-200">Contact</a>
        <button class="w-full bg-white text-orange-600 px-6 py-2 rounded-full font-semibold hover:bg-orange-50 transition duration-200 mt-2">
          Get Started
        </button>
      </div>
    </div>
  </nav>

  <!-- Demo Content -->
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <h1 class="text-4xl font-bold text-gray-800 mb-4">Welcome to Our Website</h1>
    <p class="text-gray-600 text-lg">This is a demo of a responsive navbar with an orange gradient color scheme. Try resizing your browser to see the mobile menu in action!</p>
  </div>
Comments (0)

No comments yet. Be the first!