Home
inbarajan P
Content showing for Call to action

Content showing for Call to action

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

Call to Action Grid

Author inbarajan P

1.9k

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.

Author:
KULDEEP

3 months ago

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

Author:
Muhammad Umair Arshad

2 months ago

114
Posts / Articles card grid
Present a collection of articles or blog posts in a grid format with their respective featured images

Author:
Prajwal Hallale

1 year ago

6k
Jumbotron card

Author:
Sienna

2 years ago

11.4k
Login Form
Login Form With google icon

Author:
Md. Tofayel islam

8 months ago

1.2k
Tailwind responsive features card grid
with gradient background

Author:
Kofi Osei

2 years ago

11.3k
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Author:
Abhiraj

8 months ago

1.7k
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

5 months ago

833
CTA block
with user avatars and 2 buttons

Author:
Carla Hoffman

1 year ago

2k
Responsive card grid

Author:
TailwindFlex

2 years ago

10.3k
Hero section with call to action buttons

Author:
Prashant

3 years ago

14.8k
Minimalistic hero section

Author:
Sophia Baker

2 years ago

11.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components