Home
Hamza Atig
Modern Responsive Pricing Section with Toggle

Modern Responsive Pricing Section with Toggle

A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

This tailwind example is contributed by Hamza Atig, on 18-Apr-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans,simulation,copy,dummy,miniature,like

Card Form Pricing Other Mockup

Author Hamza Atig

606

Fork Fullscreen

<div class="max-w-6xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
    
    <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 text-center mb-8 md:mb-12">
      Design anything with the right plan
    </h1>

<div class="flex flex-col sm:flex-row justify-center items-center mb-10 gap-3">
      <div class="flex border border-gray-200 rounded-lg overflow-hidden p-0.5">
        <button class="px-5 py-1.5 text-sm font-medium bg-gray-100 text-gray-800 rounded-md focus:outline-none">Monthly</button>
        <button class="px-5 py-1.5 text-sm font-medium bg-white text-gray-500 hover:bg-gray-50 rounded-md focus:outline-none ml-1">Yearly</button>
      </div>
      <span class="text-sm text-blue-600 font-medium">Up to 33% off</span>
    </div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">

<div class="bg-white rounded-lg p-6 lg:p-8 border border-gray-200 flex flex-col">
        <h2 class="text-xl font-semibold text-gray-900 mb-1">Free</h2>
        <p class="text-sm text-gray-600 mb-4 flex-grow min-h-[50px]">Start creating stunning designs with professional
          templates.</p>

<div class="mb-6">
          <span class="text-3xl lg:text-4xl font-bold text-gray-900">$0</span>
          <span class="text-sm text-gray-500">/ month</span>
          <p class="text-xs text-gray-500 mt-1">Free forever</p>
        </div>

<div>
          <h3 class="text-sm font-medium text-gray-800 mb-4">Features:</h3>
          <ul class="space-y-3 text-sm flex-grow">
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">5</span>
              projects</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">20 AI credits</span>
              (single-use)</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">0.5GB</span>
              file storage</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">10,000+</span>
              professional templates</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">1M+</span>
              photos, graphics and fonts</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">High-fidelity Mockups</span>
            </li>
          </ul>
        </div>
      </div>

<div class="bg-white rounded-lg p-6 lg:p-8 border border-gray-200 flex flex-col">
        <h2 class="text-xl font-semibold text-gray-900 mb-1">Pro</h2>
        <p class="text-sm text-gray-600 mb-4 flex-grow min-h-[50px]">Great for individuals who need access to vector
          files, advanced editing and AI tools.</p>

<div class="mb-6">
          <span class="text-3xl lg:text-4xl font-bold text-gray-900">$10</span>
          <span class="text-sm text-gray-500">/ month</span>
          <span class="text-xs bg-blue-100 text-blue-600 px-1.5 py-0.5 rounded-sm line-through ml-2">$15</span>
          <p class="text-xs text-gray-500 mt-1">Billed $120 annually</p>
        </div>

<div>
          <h3 class="text-sm font-medium text-gray-800 mb-4">Everything in Free and...</h3>
          <ul class="space-y-3 text-sm flex-grow">
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">50</span>
              projects</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">200 AI credits</span>
              per month</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">10GB</span>
              file storage</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Access to all Premium content</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">10M+</span>
              photos, graphics and fonts</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Advanced AI features</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">High-res vector exports</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Full commercial license</span>
            </li>
          </ul>
        </div>
      </div>

<div class="bg-white rounded-lg p-6 lg:p-8 border-2 recommended-border relative flex flex-col">
        
        <span class="absolute top-4 right-4 bg-blue-100 text-blue-700 text-xs font-bold px-2.5 py-0.5 rounded-full">RECOMMENDED</span>

<h2 class="text-xl font-semibold text-gray-900 mb-1">Expert</h2>
        <p class="text-sm text-gray-600 mb-4 flex-grow min-h-[50px]">For professionals that need even faster workflows
          and consistency in their designs.</p>

<div class="mb-6">
          <span class="text-3xl lg:text-4xl font-bold text-gray-900">$24</span>
          <span class="text-sm text-gray-500">/ month</span>
          <span class="text-xs bg-blue-100 text-blue-600 px-1.5 py-0.5 rounded-sm line-through ml-2">$30</span>
          <p class="text-xs text-gray-500 mt-1">Billed $288 annually</p>
        </div>

<a href="#"
          class="w-full block text-center bg-gray-900 hover:bg-gray-700 text-white py-2.5 rounded-lg font-semibold transition duration-200 mb-8">
          Get Expert
        </a>

<div>
          <h3 class="text-sm font-medium text-gray-800 mb-4">Everything in Pro and...</h3>
          <ul class="space-y-3 text-sm flex-grow">
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">Unlimited</span>
              projects</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">600 AI credits</span>
              per month</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700"><span class="font-semibold">100GB</span>
              file storage</span></li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Brand Kits</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">30 Image Gen Saved Styles</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Priority Customer Support</span>
            </li>
            <li class="flex items-start">
              <i class="fas fa-check text-blue-500 mr-2 mt-1 flex-shrink-0"></i><span class="text-gray-700">Access to Beta features</span>
            </li>
          </ul>
        </div>
      </div>

</div>

<p class="text-xs text-gray-500 text-center mt-10">
      * The prices displayed are inclusive of Value Added Tax (VAT). Payments through credit and debit cards are
      acceptable.
    </p>

<div class="text-center mt-8">
      <a href="#"
        class="inline-block border border-gray-300 hover:bg-gray-100 text-gray-700 px-8 py-3 rounded-lg font-medium transition duration-200">
        Compare Plans
      </a>
    </div>

</div>

</body>

Related Examples