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

Service Pricing Card
Cards including a call-to-action button for signing up

Paul Intay

2 years ago

3.8k
Pricing Table

Akshay

4 years ago

11.4k
Pricing Cards
pricing section with three subscription plans

JUGENDRA GANGWAR

1 week ago

9
Pricing
Looks better with in [Line-2] with: md:w-3/5

Matti

1 year ago

1.8k
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.

Hamza Atig

1 year ago

2.1k
Clean pricing cards

Santiago Hernandez

2 years ago

3.1k
Pricing table with 2 columns

Piet Vriend

3 years ago

13.5k
Pricing table
pricing table for a software or service offering

Samuel Dawson

3 years ago

11.8k
Minimal pricing card design

Anonymous

3 years ago

8.2k
Pricing card

Task Master

3 years ago

9.7k
Pricing cards in pair

Nour Haider

3 years ago

14.9k
Paiement Mobile MTN
Paiement Mobile MTN

Omer fils ELENGA

8 months ago

522