Navbar with two CTA buttons

This tailwind example is contributed by Juraj, on 14-Feb-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner

Call to Action Navbar

Author Juraj

Tailwind v3.4 2.3k 4

Fork Fullscreen

<nav x-data="{ open: false }" class="px-5 pt-5 flex  justify-between md:justify-around items-center relative shadow pb-4  bg-gray-800 text-white">

<img class="w-10" src="https://upload.wikimedia.org/wikipedia/en/thumb/b/bd/Reddit_Logo_Icon.svg/220px-Reddit_Logo_Icon.svg.png" alt="Logo" />

<button @click="open = !open" class="md:hidden focus:outline-none text-white">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-8 h-8">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>

<div class="hidden md:flex space-x-6">
        <a class="hover:text-bluegreen hover:underline" href="/">Home</a>
        <a class="hover:text-bluegreen hover:underline" href="/services">Services</a>
        <a class="hover:text-bluegreen hover:underline" href="/project">Project</a>
        <a class="hover:text-bluegreen hover:underline" href="/about-us">About us</a>
      </div>

<div class="hidden md:flex space-x-4">
        <a class="rounded-xl p-3 bg-bluegreen hover:bg-white hover:text-bluegreen" href="/started">Get Started</a>
        <a class="rounded-xl p-3 border-2 border-white hover:bg-white hover:text-black" href="/talk">Let's talk</a>
      </div>

<div x-cloak x-show="open" x-transition class="absolute top-full left-0 w-full bg-gray-800 lg:hidden flex flex-col items-center py-5 space-y-4 ">
        <a class="hover:text-bluegreen hover:underline" href="/">Home</a>
        <a class="hover:text-bluegreen hover:underline" href="/services">Services</a>
        <a class="hover:text-bluegreen hover:underline" href="/project">Project</a>
        <a class="hover:text-bluegreen hover:underline" href="/about-us">About us</a>
        <a class="rounded-xl p-3 bg-bluegreen hover:bg-white hover:text-bluegreen" href="/started">Get Started</a>
        <a class="rounded-xl p-3 border-2 border-white hover:bg-white hover:text-black" href="/talk">Let's talk</a>
      </div>
    </nav>

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

Related Examples

e-commerce website landing page template with Tailwind CSS.
A clean, responsive e-commerce & blog template built with Tailwind CSS. Features light/dark mode, dynamic featured posts, hero, CTA, and SEO-ready sections.

Homayoun

9 months ago

1.2k
Basic Auto-Hiding Navbar

Anonymous

1 year ago

3k
Hero Section
Full width hero section for landing pages

Manon Daniel

4 years ago

15k
Drinkware landing page

Maxim

1 year ago

2.1k
Call to example
Call to example using radial-gradient

Oliver Hansen

3 years ago

9.6k
Call to Action Box

Aitrik Saha

1 year ago

2.1k
Navbar compoent

Amit Pachange

3 years ago

17.3k
Highlighted Important section with button

Amit Pachange

3 years ago

10.2k
Modern page
hero page by salvator

Baraka Salvator

1 year ago

1.9k
Beautiful CTA w/ large buttons
This CTA card also has a features list

Carla Hoffman

2 years ago

3.2k
Call to action section with image

Steven Kuhn

3 years ago

10.9k
Responsive NavBar Using CSS Only
A complete responsive navbar only using tailwind css

Shivam Vishwakarma

1 year ago

1.2k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.