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 484 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

Pricing Card with Toggle

Paul Intay

1 year ago

1.3k
multiple pricing cards
basic pricing card with single price

Amit Pachange

3 years ago

13.2k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Mehmet Kaplan

2 years ago

4.4k
Pricing Table with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.1k
SoungCraft
Used for making and trading songs

Frederick250

1 year ago

1.2k
Pricing cards for 3 plans

Laurits

3 years ago

10.5k
Horizontal Pricing Card with gradient shadow

Prajwal Hallale

2 years ago

255
Responsive Pricing Table with Toggle Switch — Built with Tailwind Flex
A clean, responsive Pricing Table UI built entirely with Tailwind CSS and Flexbox. Includes a smooth monthly/yearly toggle switch, fully mobile-friendly layout, and modern design — perfect for SaaS, startups, freelancers, or any web project. 📱 100% Responsive 🎯 Easily customizable 💡 Ideal for client or personal projects

Muhammad Umair Arshad

1 year ago

1.4k
Ticket Options ios 26
Ticket Options ios 26

Omer fils ELENGA

10 months ago

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

Hamza Atig

1 year ago

1.6k
pricing Nos Collections du Monde
pricing Nos Collections du Monde

Omer fils ELENGA

7 months ago

434
Pricing card
Reveal details on hover

Anonymous

2 years ago

5.3k