Content showing for Call to action

This tailwind example is contributed by inbarajan P, on 05-Sep-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner

Call to Action Grid

Author inbarajan P

Tailwind v3.4 2.7k 5

Fork Fullscreen

<section class='relative bg-[#D9D9D9] isolate min-h-screen flex justify-center items-center overflow-hidden'>
  <div class="mx-auto max-w-full md:max-w-5xl px-3 py-3 md:px-6">
    <div class="grid md:grid-cols-2 place-items-center gap-10 grid-cols-1">
      <div class="w-full rounded-lg md:rounded-xl">
        <img src="https://images.unsplash.com/photo-1664575600796-ffa828c5cb6e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw4fHxidXNpbmVzc3xlbnwwfDB8fHwxNzI1NTU4MDkyfDA&ixlib=rb-4.0.3&q=80&w=1080" alt={'Photo by '@microsoft365' on Unsplash'} class={' object-fill object-center w-full h-full'} />
      </div>
      <div class="w-full px-3 py-3 space-y-5">
        <h1 class="text-black text-xl font-bold font-Poppins leading-6 tracking-wide">Join Us in Shaping Tomorrow
        </h1>
        <p class='text-black font-Poppins leading-5 tracking-wider text-xs font-medium '>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat amet totam et fuga consectetur molestiae
          ipsum, temporibus voluptates dolore alias vitae nostrum commodi sed sit animi atque quod nobis odio. Lorem
          ipsum dolor, sit amet consectetur adipisicing elit. Quam eos pariatur autem amet assumenda accusantium
          voluptas. Minima iste, nulla magnam quos maiores dignissimos perferendis rerum qui aut autem laborum
          cupiditate.
        </p>
        <div class="inline-block">
          <button class="bg-[#C96202] text-white active:translate-y-[6px] py-2.5 px-5 rounded-full text-xs font-medium tracking-wider font-Poppins transition duration-300 ease-in-out transform  hover:shadow-custom-white hover:shadow-gray-600">Contact us</button>
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

KULDEEP

1 year ago

1.4k
Modern Contact Section with Responsive Grid and Glassmorphic Form
A clean, professional contact section with a dual-column layout featuring contact details and a sleek glassmorphism-inspired form. Fully responsive with Tailwind CSS, supporting both light and dark modes.

Muhammad Umair Arshad

1 year ago

1.2k
Product grid

ariaw

1 year ago

690
Blog items skeleton

Nii Anyetei

2 years ago

3.4k
Service section

inbarajan P

2 years ago

2.4k
Bubblegum Button
This interactive button component is designed with a sleek gradient background and smooth hover effects, making it an eye-catching call-to-action element for modern web interfaces. Styling and Features: ✅ Gradient Background & Rounded Shape • The button container has a subtle gradient overlay (bg-gradient-to-tr) that smoothly transitions from soft pink (from-pink-300) to light blue (to-blue-300), giving it a vibrant and modern look. • Wrapped in a rounded-full container for a pill-shaped aesthetic. ✅ Floating & Shadow Effects • The shadow-lg property creates a soft floating effect, enhancing depth and visibility. • Will-change-transform optimizes animations for a seamless hover experience. ✅ Interactive Hover Animations • On hover, the inner button scales up (hover:scale-105) and lifts slightly (hover:-translate-y-2), simulating a press-and-release motion. • The transition is smooth, with a 500ms animation (transition duration-500). ✅ Content & Icon • The “Learn more” label is paired with a right-arrow icon (svg) for clear visual guidance. • The icon and text are flex-aligned (items-center flex), ensuring a balanced and responsive layout. This button is ideal for call-to-action elements, product highlights, or download prompts, offering a modern, sleek, and engaging user experience. 🚀

Banshee

1 year ago

2k
Boost Your Business with a Stunning Website!
Take your online presence to the next level with a high-performing, visually captivating website. Let’s build something amazing together!

Vikas Kushwah

1 year ago

1.4k
Modern CTA section
CTA banner

Pixel Perfect

2 years ago

2.6k
Responsive CTA
Tailwind CTA card

Dika Rahman

2 years ago

2.9k
Product review card

Moriba Traore

3 years ago

15.8k
CTA card with gradient border

Sameer Sultana

3 years ago

14.5k
Features grid

Sophia Baker

3 years ago

10.9k