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.3k
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
Call to action section

Odessa Young

3 years ago

13.5k
Card
travel place card hover effect card

nahid hasan

1 year ago

2.4k
Logo grid

ariaw

11 months ago

1.1k
REGISTER - CTA - SECTION animation

ABDO-SY

1 year ago

1.1k
Tailwind product gallery

JaxStone

3 years ago

27.8k
Boimator welcoming back
Boimator welcoming back

Bonimater

1 year ago

985
Table CRUD
CRUD TABLE DESIGN

Abhiraj

1 year ago

5k
feature grid

ariaw

10 months ago

1k
Tweets showcase grid
Responsive tweets showcase grid

Freja Jensen

3 years ago

11.5k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

kzsamir849

2 years ago

2.7k