Une structure simple et transparente. pricing

This tailwind example is contributed by Omer fils ELENGA, on 07-Mar-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Omer fils ELENGA

Tailwind v3.4 483 1

Fork Fullscreen

<section class="bg-white text-gray-600 body-font py-24">
  <div class="container px-5 mx-auto">
    
    <div class="text-center mb-20">
      <h2 class="text-xs text-indigo-500 tracking-widest font-medium title-font mb-1 uppercase">Tarification</h2>
      <h1 class="sm:text-3xl text-2xl font-light title-font text-gray-900">Une structure simple et transparente.</h1>
    </div>

<div class="flex flex-wrap lg:w-full mx-auto overflow-hidden">
      
      <div class="lg:w-1/4 hidden lg:block mt-32 border-r border-gray-100">
        <div class="flex flex-col text-left">
          <p class="h-12 px-4 flex items-center text-xs font-bold uppercase text-gray-400">Stratégie</p>
          <p class="label-item h-12 px-4 flex items-center text-sm border-b border-gray-50">Social Media Strategy</p>
          <p class="label-item h-12 px-4 flex items-center text-sm border-b border-gray-50">Analyse Vidéo</p>
          <p class="label-item h-12 px-4 flex items-center text-sm border-b border-gray-50">Veille Concurrentielle</p>
          
          <p class="h-12 px-4 flex items-center text-xs font-bold uppercase text-gray-400 mt-4">Canaux</p>
          <p class="label-item h-12 px-4 flex items-center text-sm border-b border-gray-50">LinkedIn & Instagram</p>
          <p class="label-item h-12 px-4 flex items-center text-sm border-b border-gray-50">Facebook & TikTok</p>
          
          <p class="h-12 px-4 flex items-center text-xs font-bold uppercase text-gray-400 mt-4">Investissement</p>
          <p class="label-item h-12 px-4 flex items-center text-sm font-semibold">Abonnement Mensuel</p>
        </div>
      </div>

<div class="lg:w-3/4 w-full flex flex-wrap">
        
        <div class="pricing-card lg:w-1/3 w-full border-b lg:border-b-0 lg:border-r border-gray-100">
          <div class="p-8 text-center h-32 flex flex-col justify-center">
            <span class="text-xs text-gray-400 uppercase tracking-widest mb-1">Essentiel</span>
            <p class="text-2xl text-gray-900 font-light italic">Small</p>
          </div>
          <div class="feature-rows">
            <p class="h-12 flex items-center justify-center border-t border-gray-50 text-green-400">✓</p>
            <p class="h-12 flex items-center justify-center border-t border-gray-50 text-gray-200">—</p>
            <p class="h-12 flex items-center justify-center border-t border-gray-50 text-gray-200">—</p>
            <p class="h-12 mt-4 flex items-center justify-center border-t border-gray-50 text-green-400">✓</p>
            <p class="h-12 flex items-center justify-center border-t border-gray-50 text-gray-200">—</p>
            <p class="h-24 flex items-center justify-center border-t border-gray-50 text-gray-900 font-semibold text-xl">10k <span class="text-xs text-gray-400 ml-1">SEK</span></p>
          </div>
        </div>

<div class="pricing-card lg:w-1/3 w-full bg-gray-50/50 lg:border-r border-gray-100">
          <div class="p-8 text-center h-32 flex flex-col justify-center relative">
            <span class="text-xs text-indigo-500 font-bold uppercase tracking-widest mb-1">Populaire</span>
            <p class="text-2xl text-gray-900 font-light italic">Medium</p>
          </div>
          <div class="feature-rows">
            <p class="h-12 flex items-center justify-center border-t border-white text-green-400">✓</p>
            <p class="h-12 flex items-center justify-center border-t border-white text-green-400">✓</p>
            <p class="h-12 flex items-center justify-center border-t border-white text-gray-200">—</p>
            <p class="h-12 mt-4 flex items-center justify-center border-t border-white text-green-400">✓</p>
            <p class="h-12 flex items-center justify-center border-t border-white text-green-400">✓</p>
            <p class="h-24 flex items-center justify-center border-t border-white text-indigo-600 font-semibold text-2xl">35k <span class="text-xs text-gray-400 ml-1">SEK</span></p>
          </div>
        </div>

<div class="pricing-card lg:w-1/3 w-full">
          <div class="p-8 text-center h-32 flex flex-col justify-center">
            <span class="text-xs text-gray-400 uppercase tracking-widest mb-1">Complet</span>
            <p class="text-2xl text-gray-900 font-light italic">Large</p>
          </div>
          <div class="feature-rows">
            <p class="h-12 flex items-center justify-center border-t border-gray-50 text-green-400">✓</p>
            <p class="h-12 flex items-center justify-center border-t border-gray-50 text-green-400">✓</p>
            <p class="h-12 flex items-center justify-center border-t border-gray-50 text-green-400">✓</p>
            <p class="h-12 mt-4 flex items-center justify-center border-t border-gray-50 text-green-400">✓</p>
            <p class="h-12 flex items-center justify-center border-t border-gray-50 text-green-400">✓</p>
            <p class="h-24 flex items-center justify-center border-t border-gray-50 text-gray-900 font-semibold text-xl">49k <span class="text-xs text-gray-400 ml-1">SEK</span></p>
          </div>
        </div>

</div>
    </div>
  </div>
</section>

// Interaction pour mettre en évidence la ligne sans alourdir le design
  const featureRows = document.querySelectorAll('.feature-rows p');
  const labels = document.querySelectorAll('.label-item');

featureRows.forEach((row, index) => {
    row.addEventListener('mouseenter', () => {
        // On récupère l'index de la ligne au sein de son conteneur
        const rowIndex = Array.from(row.parentNode.children).indexOf(row);
        if(labels[rowIndex]) labels[rowIndex].classList.add('active-row-bg');
        row.classList.add('active-row-bg');
    });
    row.addEventListener('mouseleave', () => {
        labels.forEach(l => l.classList.remove('active-row-bg'));
        row.classList.remove('active-row-bg');
    });
  });
</script>

Related Examples

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. 🚀

Banshee

1 year ago

2.1k
Tailwind pricing cards
credits: https://twitter.com/namyakhann

Kennedy Mills

3 years ago

14.1k
Soft-Modern Dark Pricing
A sophisticated, highly rounded pricing component inspired by modern fintech interfaces. It avoids harsh lines in favor of deep "zinc" tones and subtle borders (border-white/5). The center card pops using a high-contrast white button against the dark theme, guiding user focus naturally without using aggressive gradients.

Hamza Atig

8 months ago

737
Lifetime Access — iOS 26 Style
Lifetime Access — iOS 26 Style

Omer fils ELENGA

9 months ago

625
Pricing cards for 3 plans

Laurits

3 years ago

10.5k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

5 months ago

605
Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

Elsabe Fourie

2 years ago

12.6k
Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k
Simple pricing card
minimal pricing card

Anonymous

3 years ago

9.7k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Ijila Itunu

1 year ago

1.4k
Product / Service pricing section

Sophia Baker

3 years ago

13.2k
Pricing table

Laurits

3 years ago

11.2k