Call to Action Box

This tailwind example is contributed by Aitrik Saha, on 22-Jan-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner

Card Banner Call to Action

Author Aitrik Saha

Tailwind v3.4 2.1k 7

Fork Fullscreen

<div class="p-4 lg:mx-2">
  <div
    class="bg-gradient-to-r from-green-900 to-green-600 text-white p-8 flex flex-col lg:flex-row rounded-2xl items-center lg:items-start lg:justify-between">
    <div class="lg:w-1/2 space-y-6 flex flex-col justify-start">
      <h2 class="text-sm uppercase font-semibold tracking-widest text-start">
        Premium Services
      </h2>
      <h1 class="text-4xl lg:text-5xl font-bold leading-tight text-start">
        Revolutionize your business with <span class="text-green-300">innovative solutions</span>
      </h1>
      <p class="text-lg text-gray-300 text-start">
        Unlock cutting-edge tools and connect with the best professionals to drive success and growth. Achieve new heights in business operations.
      </p>
      <ul class="space-y-2">
        <li class="flex items-center space-x-2 text-start">
          <span class="text-green-300">✓</span>
          <span>Access top-tier experts to strengthen your team</span>
        </li>
        <li class="flex items-center space-x-2 text-start">
          <span class="text-green-300">✓</span>
          <span>Seamlessly manage projects and optimize workflows</span>
        </li>
        <li class="flex items-center space-x-2 text-start">
          <span class="text-green-300">✓</span>
          <span>Benefit from continuous support and end-to-end solutions</span>
        </li>
      </ul>
      <button
        class="bg-white text-green-900 font-bold py-2 px-4 rounded hover:bg-gray-200 transition">
        Discover More
      </button>
    </div>
    <div class="hidden lg:flex lg:w-1/2 mt-8 lg:mt-0 justify-center">
      <img
        src="https://images.unsplash.com/photo-1621060344848-262c81b806a2?w=400&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGVwbGV8ZW58MHx8MHx8fDA%3D"
        alt="Business Solutions"
        class="rounded-lg shadow-lg h-full" />
    </div>
  </div>
</div>

Related Examples

Product hunt showcase section

Leon Bachmann

3 years ago

10.8k
Product review card

Moriba Traore

3 years ago

15.8k
Call to action card with image
Responsive card with image

Noah Schmidt

3 years ago

16.9k
Blog post card
Responsive blog post or article card. This card can also be used as a CTA

Anonymous

3 years ago

11.5k
Greeting Card with CTA
card with two actions with greeting msg according to time

Amit Pachange

2 years ago

8.4k
Join Our Community Banner
Encourage users to become members of a community.

Diego Chavez

2 years ago

9k
cards
cards slices

Anonymous

2 years ago

7.6k
CTA banner
Capture the attention of the user with full-width CTA Section

Anonymous

2 years ago

5k
Clone of LinkedIn Questionnaire Card
Clone of LinkedIn Questionnaire Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

4k
Thankyou Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.4k
Grid
Grid Grid-Cards

sardorazimov2901

2 years ago

2.4k
Banner for app download
Show App Download Buttons for the App Store and Play Store

Pixel Perfect

2 years ago

2k