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.5k

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

SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.1k
Home page
Home page для ПО, страница для входа в приложение.

Author:
Алла Телегина

1 year ago

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

Author:
saim-t8

6 months ago

615
Creative Hero Section

Author:
Ijila Itunu

10 months ago

1.6k
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.1k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

1 year ago

2.4k
Section Heading
A gorgeous section heading with a smooth blur element.

Author:
Coastal UI

1 year ago

2k
Hero

Author:
Aman kumar

2 years ago

7.2k
my website

Author:
Creative Solution

1 year ago

3.1k
Pixel Blast
Pixel Blast

Author:
Raul antonio de la cruz hernandez

5 months ago

840
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

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

1 year ago

4.4k
Avant & Après
Avant & Après

Author:
Omer fils ELENGA

3 months ago

399

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components