Home
Christian Ahlin
Pricing comparison table

Pricing comparison table

Showcase different pricing tiers or plans for a product or service.

This tailwind example is contributed by Christian Ahlin, on 10-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing Table

Author Christian Ahlin

1.2k

Fork Fullscreen

<section class="text-gray-700 body-font overflow-hidden border-t border-gray-200">
  <div class="container px-5 py-24 mx-auto flex flex-wrap">
    <div class="lg:w-1/4 mt-48 hidden lg:block">
      <div class="mt-px border-t border-gray-300 border-b border-l rounded-tl-lg rounded-bl-lg overflow-hidden">
        <p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start -mt-px">
          <b>Strategy</b></p>
        <p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start">Social Media Strategy</p>
        <p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">+video content
          analysis</p>
        <p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start">+competitor analysis</p>
        <p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start"><b>Channels</b></p>
        <p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start">LinkedIn</p>
        <p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">Instagram</p>
        <p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start">Facebook</p>
        <p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">
          <b>Content & Interactions</b></p>
        <p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start">Respond & Comment</p>
        <p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">Repackage / Repost
        </p>
        <p class="text-gray-900 h-12 text-left px-4 flex items-center justify-start">Create photos and written content
          weekly</p>
        <p class="bg-gray-100 text-gray-900 h-12 text-left px-4 flex items-center justify-start">Content videos, reels,
          interactive posts</p>
        <p class="text-gray-900 h-12 text-left px-4 flex items-center justify-start"><b>Analytics</b></p>
        <p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">KPIs</p>
        <p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start">Competitor benchmark</p>
        <p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">Best practice
          improvements</p>
        <p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start"><b>Collaboration</b></p>
        <p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">Mail</p>
        <p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start">Teams meetings</p>
        <p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start"></p>
        <p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start"><b>Prices</b></p>
        <p class="bg-gray-100 text-gray-900 h-12 text-center px-4 flex items-center justify-start">Ad hoc additional
          hours</p>
        <p class="text-gray-900 h-12 text-center px-4 flex items-center justify-start">Additional channels</p>
      </div>
    </div>

<div class="flex lg:w-3/4 w-full flex-wrap lg:border border-gray-300 rounded-lg">
      <div
        class="lg:w-1/3 lg:mt-px w-full mb-10 lg:mb-0 border-2 border-gray-300 lg:border-none rounded-lg lg:rounded-none">
        <div class="px-2 text-center h-48 flex flex-col items-center justify-center">
          <h3 class="tracking-widest">SMALL</h3>
          <h2 class="text-5xl text-gray-900 font-medium leading-none mb-4 mt-2">Social Essentials</h2>
          <span class="text-sm text-gray-600"></span>
        </div>
        <p
          class="bg-gray-100 text-gray-600 h-12 text-center px-2 flex items-center -mt-px justify-center border-t border-gray-300">
        </p>
        <p class="text-gray-600 text-center h-12 flex items-center justify-center">
          <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2"
            class="w-5 h-5 text-gray-500" viewBox="0 0 24 24">
            <path d="M18 6L6 18M6 6l12 12"></path>
          </svg>
        </p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
          <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2"
            class="w-5 h-5 text-gray-500" viewBox="0 0 24 24">
            <path d="M18 6L6 18M6 6l12 12"></path>
          </svg>
        </p>
        <p class="h-12 text-gray-600 px-6 text-center leading-relaxed flex items-center justify-center"><svg fill="none"
            stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2"
            class="w-5 h-5 text-gray-500" viewBox="0 0 24 24">
            <path d="M18 6L6 18M6 6l12 12"></path>
          </svg></p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
        </p>
        <p class="text-gray-600 text-center h-12 flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
          </span>
        </p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
          </span>
        </p>
        <p class="text-gray-600 text-center h-12 flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
          </span>
        </p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">

</p>
        <p class="text-gray-600 text-center h-12 flex items-center justify-center">2 days/week

<p class="text-gray-600 text-center h-12 flex items-center justify-center">10 000 SEK/month
        </p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">1095 SEK/hour
        </p>
        <p class="text-gray-600 text-center h-12 flex items-center justify-center">5 000 SEK/month
        </p>

</div>

<div class="lg:w-1/3 lg:-mt-px w-full mb-10 lg:mb-0 border-2 rounded-lg border-0 relative">
        <div class="px-2 text-center h-48 flex flex-col items-center justify-center">
          <h3 class="tracking-widest">MEDIUM</h3>
          <h2 class="text-5xl text-gray-900 font-medium flex items-center justify-center leading-none mb-4 mt-2">Growth
            & Strategy

</h2>
        </div>
        <p
          class="bg-gray-100 text-gray-600 h-12 text-center px-2 flex items-center -mt-px justify-center border-t border-gray-300">
        </p>
        <p class="text-gray-600 text-center h-12 flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
          </span>
        </p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
          <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2"
            class="w-5 h-5 text-gray-500" viewBox="0 0 24 24">
            <path d="M18 6L6 18M6 6l12 12"></path>
          </svg>
        </p>
        <p class="h-12 text-gray-600 text-center leading-relaxed flex items-center justify-center"><svg fill="none"
            stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2"
            class="w-5 h-5 text-gray-500" viewBox="0 0 24 24">
            <path d="M18 6L6 18M6 6l12 12"></path>
          </svg></p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">

</span>
        </p>
        <p class="text-gray-600 text-center h-12 flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
          </span>
        </p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
          </span>
        </p>
        <p class="text-gray-600 text-center h-12 flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
          </span>
        </p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">

</p>
        <p class="text-gray-600 text-center h-12 flex items-center justify-center">Daily

</span>
        </p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
          </span>
        </p>
        <p class="h-12 text-gray-600 px-6 text-center leading-relaxed flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg></p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" class="w-5 h-5 text-gray-500" viewBox="0 0 24 24">
            <path d="M18 6L6 18M6 6l12 12"></path>
          </svg>
        </p>
        <p class="text-gray-600 text-center h-12 flex items-center justify-center">
        </p> 
        
 <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
          </span>
        </p>
        <p class="h-12 text-gray-600 px-6 text-center leading-relaxed flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg></p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">Yes, basic
       
        </p>

<p class="text-gray-600 text-center h-12 flex items-center justify-center">
        </p> 
        
 <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
          </span>
        </p>
        <p class="h-12 text-gray-600 px-6 text-center leading-relaxed flex items-center justify-center">Montly
        </p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
        </p>

<p class="text-gray-600 text-center h-12 flex items-center justify-center">35 000 SEK/month
        </p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">1095 SEK/hour
        </p>
        <p class="text-gray-600 text-center h-12 flex items-center justify-center">10 000 SEK/month
        </p>
      </div>

<div class="lg:w-1/3 w-full lg:mt-px border-2 border-indigo-500  rounded-lg lg:rounded-none">
        <div class="px-2 text-center h-48 flex flex-col items-center justify-center">
          <h3 class="tracking-widest">LARGE</h3>
          <h2 class="text-5xl text-gray-900 font-medium flex items-center justify-center leading-none mb-4 mt-2">Full
            Impact

</h2>
        </div>
        <p
          class="bg-gray-100 text-gray-600 h-12 text-center px-2 flex items-center -mt-px justify-center border-t border-gray-300">
        </p>
        <p class="text-gray-600 text-center h-12 flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
          </span>
        </p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
          </span>
        </p>
        <p class="h-12 text-gray-600 text-center leading-relaxed flex items-center justify-center"><span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
          </span></p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">

</p>
        <p class="text-gray-600 text-center h-12 flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
          </span>
        </p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
          </span>
        </p>
        <p class="text-gray-600 text-center h-12 flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
          </span>
        </p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
        </p>
        <p class="text-gray-600 text-center h-12 flex items-center justify-center">Daily

</span>
        </p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
          </span>
        </p>
        <p class="h-12 text-gray-600 px-6 text-center leading-relaxed flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg></p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
        <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
        </p>
        <p class="text-gray-600 text-center h-12 flex items-center justify-center">
        </p> 
        
 <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
          </span>
        </p>
        <p class="h-12 text-gray-600 px-6 text-center leading-relaxed flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg></p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">Yes, incl. video
       
        </p>

<p class="text-gray-600 text-center h-12 flex items-center justify-center">
        </p> 
        
 <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
          <span class="w-5 h-5 inline-flex items-center justify-center bg-gray-500 text-white rounded-full flex-shrink-0">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="w-3 h-3" viewBox="0 0 24 24">
              <path d="M20 6L9 17l-5-5"></path>
            </svg>
          </span>
        </p>
        <p class="h-12 text-gray-600 px-6 text-center leading-relaxed flex items-center justify-center">Weekly
        </p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">
        </p>

<p class="text-gray-600 text-center h-12 flex items-center justify-center">49 000 SEK/month
        </p>
        <p class="bg-gray-100 text-gray-600 text-center h-12 flex items-center justify-center">1095 SEK/hour
        </p>
        <p class="text-gray-600 text-center h-12 flex items-center justify-center">15 000 SEK/month
        </p>
      </div>
    </div>
  </div>
  </div>
</section>

Related Examples

Pricing Table

Author:
Akshay

3 years ago

10.4k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Author:
Andreas Wagner

1 year ago

13.3k
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

6 months ago

940
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

3 months ago

586
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

3 months ago

293
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

3 months ago

328
Pricing Plans
Js integrated Pricing Plans

Author:
ORGIN_DREAMS

2 months ago

136
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

11 months ago

1.7k
Card
Card

Author:
Aman kumar

1 year ago

1.2k
Pricing table with 2 columns

Author:
Piet Vriend

2 years ago

12.6k
Responsive Class List Table using Tailwind CSS
A responsive and customizable class list table built with Tailwind CSS, featuring actions for editing and deleting classes.

Author:
Anum Shahana

9 months ago

1.5k
Datatable
Datatable example with datatable.js with search, sort, pagination

Author:
R.P Ketan

2 years ago

23.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components