Back to Discover
Tailwind CSS Call to Action Section

Amelia
Created Nov 03, 2025
0 views
0 likes
0 comments
0 forks
Export Fork Like
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<body class="bg-gray-50">

  <!-- Call to Action Section -->
  <section class="py-20 px-4">
    <div class="max-w-6xl mx-auto">

      <!-- Main CTA Card -->
      <div class="bg-gradient-to-r from-blue-600 to-blue-700 rounded-2xl shadow-xl overflow-hidden">
        <div class="px-8 py-16 md:px-12 md:py-20 text-center">
          <div class="flex justify-center mb-6">
            <div class="bg-white bg-opacity-20 rounded-full p-4">
              <ion-icon name="rocket-outline" class="text-white text-5xl"></ion-icon>
            </div>
          </div>

          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-4">
            Ready to Get Started?
          </h2>

          <p class="text-lg md:text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
            Join thousands of satisfied customers and transform your workflow today. No credit card required.
          </p>

          <div x-data="{ email: '' }" class="flex flex-col sm:flex-row gap-4 justify-center items-center max-w-lg mx-auto">
            <input 
                   type="email" 
                   x-model="email"
                   placeholder="Enter your email address"
                   class="w-full sm:flex-1 px-6 py-4 rounded-lg text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-4 focus:ring-blue-300 transition"
                   >
            <button 
                    @click="if(email) { alert('Email submitted: ' + email); email = ''; }"
                    class="w-full sm:w-auto px-8 py-4 bg-white text-blue-600 font-semibold rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-4 focus:ring-blue-300 transition transform hover:scale-105 flex items-center justify-center gap-2"
                    >
              Get Started
              <ion-icon name="arrow-forward-outline" class="text-xl"></ion-icon>
            </button>
          </div>

          <div class="mt-8 flex flex-wrap justify-center items-center gap-6 text-blue-100 text-sm">
            <div class="flex items-center gap-2">
              <ion-icon name="checkmark-circle" class="text-xl"></ion-icon>
              <span>Free 14-day trial</span>
            </div>
            <div class="flex items-center gap-2">
              <ion-icon name="checkmark-circle" class="text-xl"></ion-icon>
              <span>No credit card required</span>
            </div>
            <div class="flex items-center gap-2">
              <ion-icon name="checkmark-circle" class="text-xl"></ion-icon>
              <span>Cancel anytime</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Secondary CTA Option -->
      <div class="mt-12 grid md:grid-cols-3 gap-6">
        <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition text-center">
          <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4">
            <ion-icon name="call-outline" class="text-blue-600 text-2xl"></ion-icon>
          </div>
          <h3 class="font-semibold text-gray-900 mb-2">Talk to Sales</h3>
          <p class="text-gray-600 text-sm mb-4">Get a personalized demo</p>
          <a href="#" class="text-blue-600 hover:text-blue-700 font-medium text-sm flex items-center justify-center gap-1">
            Contact us
            <ion-icon name="chevron-forward-outline"></ion-icon>
          </a>
        </div>

        <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition text-center">
          <div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4">
            <ion-icon name="document-text-outline" class="text-green-600 text-2xl"></ion-icon>
          </div>
          <h3 class="font-semibold text-gray-900 mb-2">Documentation</h3>
          <p class="text-gray-600 text-sm mb-4">Learn how it works</p>
          <a href="#" class="text-blue-600 hover:text-blue-700 font-medium text-sm flex items-center justify-center gap-1">
            Read docs
            <ion-icon name="chevron-forward-outline"></ion-icon>
          </a>
        </div>

        <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition text-center">
          <div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4">
            <ion-icon name="people-outline" class="text-purple-600 text-2xl"></ion-icon>
          </div>
          <h3 class="font-semibold text-gray-900 mb-2">Community</h3>
          <p class="text-gray-600 text-sm mb-4">Join our community</p>
          <a href="#" class="text-blue-600 hover:text-blue-700 font-medium text-sm flex items-center justify-center gap-1">
            Join now
            <ion-icon name="chevron-forward-outline"></ion-icon>
          </a>
        </div>
      </div>

    </div>
  </section>
Comments (0)

No comments yet. Be the first!