Pricing section Lima

Pricing section Lima with responsive design

This tailwind example is contributed by Mubashir hussain, on 29-Mar-2024. Component is made with Tailwind v3.4. It is responsive.

Card

Author Mubashir hussain

Tailwind v3.4 2.9k 10

Fork Fullscreen

<div class="font-[sans-serif] text-[#333]">
    <div class="max-w-5xl mx-auto">
      <div class="text-center">
        <h2 class="text-4xl font-bold mb-4">Pricing</h2>
        <p class="text-sm text-gray-500">Change your plant according your needs</p>
      </div>
      <div class="grid lg:grid-cols-3 sm:grid-cols-2 gap-8 mt-12 max-sm:max-w-sm max-sm:mx-auto">
        <div class="border rounded-md p-6">
          <h3 class="text-2xl font-semibold mb-1">Starter</h3>
          <p class="text-sm text-gray-500">For Individuals and Small Teams</p>
          <div class="mt-6">
            <h3 class="text-2xl font-semibold">$10 <sub class="text-gray-400 text-xs">per month</sub></h3>
          </div>
          <div class="mt-6">
            <h4 class="text-xl font-semibold mb-1">Include</h4>
            <p class="text-sm text-gray-500">Everything you get in this plan</p>
            <ul class="mt-6 space-y-4">
              <li class="flex items-center text-sm text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-3 fill-green-500" viewBox="0 0 24 24">
                  <path d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z" data-original="#000000" />
                </svg>
                50 Page Unlock
              </li>
              <li class="flex items-center text-sm text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-3 fill-green-500" viewBox="0 0 24 24">
                  <path d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z" data-original="#000000" />
                </svg>
                10 GB Storage
              </li>
              <li class="flex items-center text-sm text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-3 fill-green-500" viewBox="0 0 24 24">
                  <path d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z" data-original="#000000" />
                </svg>
                6 Team Members
              </li>
              <li class="flex items-center text-sm text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-3 fill-green-500" viewBox="0 0 24 24">
                  <path d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z" data-original="#000000" />
                </svg>
                Unlimited Book Mark
              </li>
              <li class="flex items-center text-sm text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-3 fill-green-500" viewBox="0 0 24 24">
                  <path d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z" data-original="#000000" />
                </svg>
                Unlimited basic feature
              </li>
            </ul>
            <button type="button" class="w-full mt-6 px-2 py-2 text-sm font-semibold text-white bg-blue-500 hover:bg-blue-600 rounded-md">Buy now</button>
          </div>
        </div>
        <div class="border rounded-md p-6">
          <h3 class="text-2xl font-semibold mb-1 flex items-center">Professional <span class="px-2 py-1 text-xs font-semibold text-white bg-blue-500 rounded-md ml-3">Best Deal</span></h3>
          <p class="text-sm text-gray-500">For Individuals and Largest Teams</p>
          <div class="mt-6">
            <h3 class="text-2xl font-semibold">$20 <sub class="text-gray-400 text-xs">per month</sub></h3>
          </div>
          <div class="mt-6">
            <h4 class="text-xl font-semibold mb-1">Include</h4>
            <p class="text-sm text-gray-500">Everything you get in this plan</p>
            <ul class="mt-6 space-y-4">
              <li class="flex items-center text-sm text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-3 fill-green-500" viewBox="0 0 24 24">
                  <path d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z" data-original="#000000" />
                </svg>
                100 Page Unlock
              </li>
              <li class="flex items-center text-sm text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-3 fill-green-500" viewBox="0 0 24 24">
                  <path d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z" data-original="#000000" />
                </svg>
                20 GB Storage
              </li>
              <li class="flex items-center text-sm text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-3 fill-green-500" viewBox="0 0 24 24">
                  <path d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z" data-original="#000000" />
                </svg>
                8 Team Members
              </li>
              <li class="flex items-center text-sm text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-3 fill-green-500" viewBox="0 0 24 24">
                  <path d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z" data-original="#000000" />
                </svg>
                Unlimited Book Mark
              </li>
              <li class="flex items-center text-sm text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-3 fill-green-500" viewBox="0 0 24 24">
                  <path d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z" data-original="#000000" />
                </svg>
                Unlimited basic feature
              </li>
            </ul>
            <button type="button" class="w-full mt-6 px-2 py-2 text-sm font-semibold text-white bg-blue-500 hover:bg-blue-600 rounded-md">Buy now</button>
          </div>
        </div>
        <div class="border rounded-md p-6">
          <h3 class="text-2xl font-semibold mb-1">Business</h3>
          <p class="text-sm text-gray-500">For Multiples and Largest Teams</p>
          <div class="mt-6">
            <h3 class="text-2xl font-semibold">$100 <sub class="text-gray-400 text-xs">per month</sub></h3>
          </div>
          <div class="mt-6">
            <h4 class="text-xl font-semibold mb-1">Include</h4>
            <p class="text-sm text-gray-500">Everything you get in this plan</p>
            <ul class="mt-6 space-y-4">
              <li class="flex items-center text-sm text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-3 fill-green-500" viewBox="0 0 24 24">
                  <path d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z" data-original="#000000" />
                </svg>
                300 Page Unlock
              </li>
              <li class="flex items-center text-sm text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-3 fill-green-500" viewBox="0 0 24 24">
                  <path d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z" data-original="#000000" />
                </svg>
                100 GB Storage
              </li>
              <li class="flex items-center text-sm text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-3 fill-green-500" viewBox="0 0 24 24">
                  <path d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z" data-original="#000000" />
                </svg>
                100 Team Members
              </li>
              <li class="flex items-center text-sm text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-3 fill-green-500" viewBox="0 0 24 24">
                  <path d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z" data-original="#000000" />
                </svg>
                Unlimited Book Mark
              </li>
              <li class="flex items-center text-sm text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-3 fill-green-500" viewBox="0 0 24 24">
                  <path d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z" data-original="#000000" />
                </svg>
                Unlimited basic feature
              </li>
            </ul>
            <button type="button" class="w-full mt-6 px-2 py-2 text-sm font-semibold text-white bg-blue-500 hover:bg-blue-600 rounded-md">Buy now</button>
          </div>
        </div>
      </div>
    </div>
  </div>

Related Examples

Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

MD Mostafa Niloy

10 months ago

759
Futuristic 3D Tilt Card
Hover to see the 3D effect

Anonymous

1 year ago

1.9k
Info cards for admin panel

Sophia Baker

3 years ago

12.8k
Card KPI
Targetas ahora con un grafico

Raul antonio de la cruz hernandez

10 months ago

1.2k
Info card

Samuel Dawson

3 years ago

10.7k
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Muhammad Umair Arshad

1 year ago

1.4k
Product review card

Rama krishnan Subramanian

1 year ago

2.6k
section card

Raul antonio de la cruz hernandez

8 months ago

693
Tailwind CSS Blog Card

Morris Muriuki Muthigani

1 year ago

695
3D Modern Pricing Card
Here's a modern, reusable Pricing Card component that's highly popular on platforms like TailwindFlex. It's clean, responsive, and designed for conversions.

dev-fab250

1 year ago

1.3k
Card with image full width
This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

Mr Robot

3 years ago

14.1k