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

<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>

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
CTA card with gradient background
Grab users attention using this eye catching CTA card

Emre Yılmaz

2 years ago

4.5k
Product review card

Rama krishnan Subramanian

2 years ago

2.6k
asimple game lay out
asimple game lay out

Bonimater

1 year ago

1.3k
Survey CTA

JaxStone

3 years ago

11k
Production-Ready Responsive Navigation
This is a sample content area. Scroll down to see the fixed header in action.

zobaidul kaziex

2 years ago

4.3k
Modern SaaS Agency Landing Page with Dark Mode & Mobile MenuE-Com With nav and filter
A premium SaaS agency landing page built with HTML, Tailwind CSS, and JavaScript. It features a sticky glassmorphism navbar, responsive mobile navigation drawer, light/dark mode toggle, animated hero section, case studies, services, process timeline, testimonial, FAQ accordion, booking CTA, and a clean modern footer. Perfect for startups, AI products, software agencies, creative studios, and digital businesses.

JUGENDRA GANGWAR

3 months ago

400
material ios navbar mobile apple endroid
material ios navbar mobile apple endroid

Omer fils ELENGA

10 months ago

570
Tailwind CTA section

Moriba Traore

3 years ago

14.2k
Colourful NavBar by Itunu Ijila
Responsive Colorful Navbar with Tailwind CSS - Free HTML Template Modern, mobile-friendly navigation bar built with Tailwind CSS featuring vibrant gradient colors (purple, pink, red). Includes hamburger menu for mobile devices, smooth hover effects, and easy customization. Perfect for websites, landing pages, and web applications. Copy-paste ready HTML code with Tailwind CDN - no build process required. Fully responsive design that works on all screen sizes. Keywords: Tailwind CSS navbar, responsive navigation bar, colorful navbar template, HTML navbar component, mobile menu, gradient navbar, Tailwind navigation, free navbar template

Ijila Itunu

8 months ago

492
Navbar
Navbar for primary menu

Anonymous

2 years ago

7k
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Nick Girga

1 year ago

2k