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

863

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