Home
Mike Varen
Header with logo, menu and buttons

Header with logo, menu and buttons

Header with logo, menu and buttons. If you want to toggle the visibility of the mobile menu when clicking on the hamburger menu icon you can achieve this with JavaScript by adding and removing a class that controls the visibility of the mobile menu

This tailwind example is contributed by Mike Varen, on 30-Apr-2024. Component is made with Tailwind CSS v3. It is responsive.

Header

Author Mike Varen

4.1k

Fork Fullscreen

<div class="flex md:hidden">
        <button id="hamburger" class="text-white focus:outline-none">
          <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
          </svg>
        </button>
      </div>

<nav class="hidden md:flex md:flex-grow justify-center">
        <ul class="flex justify-center space-x-4 text-white">
          <li><a href="#home" class="hover:text-secondary font-bold">Home</a></li>
          <li><a href="#aboutus" class="hover:text-secondary font-bold">About us</a></li>
          <li><a href="#results" class="hover:text-secondary font-bold">Results</a></li>
          <li><a href="#reviews" class="hover:text-secondary font-bold">Reviews</a></li>
          <li><a href="#portfolio" class="hover:text-secondary font-bold">Portfolio</a></li>
          <li><a href="#team" class="hover:text-secondary font-bold">Team</a></li>
          <li><a href="#contact" class="hover:text-secondary font-bold">Contact</a></li>
        </ul>
      </nav>

<div class="hidden lg:flex items-center space-x-4">
        <a href="#" class="bg-green-500 hover:bg-blue-500 text-white font-semibold px-4 py-2 rounded inline-block">Github</a>
        <a href="#" class="bg-blue-500 hover:bg-green-500 text-white font-semibold px-4 py-2 rounded inline-block">Download</a>
      </div>
    </div>
  </header>

<nav id="mobile-menu-placeholder" class="mobile-menu hidden flex-col items-center space-y-8 md:hidden px-8">
  <ul class="w-full text-center">
    <li class="border-b border-gray-300 pb-4 pt-4"><a href="#home" class="hover:text-secondary font-bold">Home</a></li>
    <li class="border-b border-gray-300 pb-4 pt-4"><a href="#aboutus" class="hover:text-secondary font-bold">About us</a></li>
    <li class="border-b border-gray-300 pb-4 pt-4"><a href="#results" class="hover:text-secondary font-bold">Results</a></li>
    <li class="border-b border-gray-300 pb-4 pt-4"><a href="#reviews" class="hover:text-secondary font-bold">Reviews</a></li>
    <li class="border-b border-gray-300 pb-4 pt-4"><a href="#portfolio" class="hover:text-secondary font-bold">Portfolio</a></li>
    <li class="border-b border-gray-300 pb-4 pt-4"><a href="#team" class="hover:text-secondary font-bold">Team</a></li>
    <li class="pb-4 pt-4"><a href="#contact" class="hover:text-secondary font-bold">Contact</a></li>
  </ul>
  <div class="flex flex-col mt-6 space-y-2 items-center">
    <a href="#" class="bg-green-500 hover:bg-blue-500 text-white font-semibold px-4 py-2 rounded inline-block flex items-center justify-center min-w-[110px]">Github</a>
    <a href="#" class="bg-blue-500 hover:bg-green-500 text-white font-semibold px-4 py-2 rounded inline-block flex items-center justify-center min-w-[110px]">Download</a>
  </div>
</nav>

Related Examples

navigation header
responsive navigation header

Author:
Abid Ullah

1 year ago

2.3k
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

Author:
ishimwe prince

6 months ago

855
Tailwind css banner offer
Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

Author:
saim-t8

3 months ago

393
tradition music
by salvator

Author:
Baraka Salvator

6 months ago

729
Hero Section
Home hero section search bar

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

7.6k
Enhanced Modern Navbar
The navbar now feels premium and modern while maintaining all original functionality. The glassmorphism effect, smooth animations, and professional styling create a cutting-edge user experience that would fit perfectly on any modern website!

Author:
Rathanak Phan

5 months ago

642
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.3k
Artisan Coffee Crafted with Care
Coffee is one of the world's most beloved beverages, enjoyed by millions daily. Here's an in-depth look at everything coffee-related.

Author:
matoleo chance

6 months ago

736
Navbar
Navbar

Author:
TakaMorY

3 months ago

409
home
html , css

Author:
Hacker Development

6 months ago

1.7k
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

719
Sidebar with Tailwind CSs and alpinejs

Author:
Michael Andreuzza

1 year ago

3.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components