Home
Aitrik Saha
Call to Action Box

Call to Action Box

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

Card Banner Call to Action

Author Aitrik Saha

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