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.5k

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

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

5.2k
Responsive CTA

Author:
Lukas Müller

2 years ago

9.4k
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

25.9k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

4k
Call to action section

Author:
Leon Bachmann

2 years ago

6.3k
Centered footer with CTA
Use this Tailwind CSS footer compoent for simple footer with center aligned everything and with CTA buttons.

Author:
Pagedone

1 year ago

1.2k
Feature display cards (grid layout)

Author:
Sophia Baker

2 years ago

14.6k
Highlighted Important section with button

Author:
Amit Pachange

2 years ago

9k
Feature Section
A section that allows you to share features about your product and an example of your product

Author:
Andrew Weisbeck

9 months ago

2.1k
Sponsors section
icon grid

Author:
Sienna

2 years ago

11.9k
Clean CTA

Author:
Kofi Osei

2 years ago

11.1k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

2 years ago

10.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components