Home
Juraj
Navbar with two CTA buttons

Navbar with two CTA buttons

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

Call to Action Navbar

Author Juraj

864

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

Travel Landing Page: Australia

Author:
Maxim

3 months ago

934
Call to Action

Author:
Abdul Baset Bappy

2 days ago

7
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

11 months ago

2.7k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Author:
Coastal UI

8 months ago

1.2k
less is more
less is more by salvator

Author:
Baraka Salvator

5 days ago

57
Very simple hero

Author:
Laurits

2 years ago

8.5k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

1 day ago

29
Material 3 AppBar [Light]
A navbar/appbar that conforms to Google's Material 3 design guidelines

Author:
Nick Girga

1 month ago

111
Fixed navbar

Author:
Oliver Hansen

2 years ago

24.4k
Hero simple
hero design simple

Author:
QQ-VVN

1 month ago

185
Call to action block

Author:
Sienna

2 years ago

10.9k
Navbar with search
Use this example of a navbar element to also show a search input element that you can integrate for a site-wide search.

Author:
Mamadou Diouma II Bah

1 year ago

14.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components