pricing

This tailwind example is contributed by Omer fils ELENGA, on 12-Jul-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans,Product Showcase, Product card

Pricing Other Product

Author Omer fils ELENGA

Fork Fullscreen

<div class="flex justify-center items-center  lg:col-span-4">
                            <div class="no-scrollbar overflow-hidden">
                                <div class="flex no-scrollbar gap-4 justify-start items-start ">
                                    <div class="text-center ">
                                        <h2 class="text-4xl font-bold text-gray-800 mb-4">Modules Complémentaires & Services</h2>
                                        <div class="w-20 h-1 bg-purple-300 mx-auto mb-6"></div>
                                        <p class="text-xl text-center text-gray-600 mx-auto ">
                                            Découvrez nos offres adaptées à chaque type d'établissement scolaire. Choisissez la formule qui correspond le mieux à vos besoins ou contactez-nous pour une solution personnalisée.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
  
  <div class="demo-container grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">

<div class="rounded-[30px] md:rounded-[36px]  overflow-hidden   border-gray-200 p-8 relative sm:col-span-2 lg:col-span-4">
                    <div class="h-full">
                        <div class="flex flex-col lg:flex-row justify-between h-full space-y-5 lg:space-y-0 lg:space-x-8">
                            <div class="flex-1">
                            
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div class="border border-gray-200 rounded-xl p-9">
                                        <h3 class="font-bold text-lg text-gray-900 mb-3">KelaPlus Document</h3>
                                        <p class="text-gray-600 mb-4">Gestion avancée des documents scolaires</p>
                                        <div class="text-2xl font-bold text-gray-900">15 000 FCFA</div>
                                    </div>
                                    
                                    <div class="border border-gray-200 rounded-xl p-9">
                                        <h3 class="font-bold text-lg text-gray-900 mb-3">KelaPlus Carte</h3>
                                        <p class="text-gray-600 mb-4">Cartes étudiantes personnalisées</p>
                                        <div class="text-2xl font-bold text-gray-900">800 FCFA/élève</div>
                                    </div>
                                    
                                    <div class="border border-gray-200 rounded-xl p-9">
                                        <h3 class="font-bold text-lg text-gray-900 mb-3">Examens Inter-Écoles</h3>
                                        <p class="text-gray-600 mb-4">Organisation d'examens communs</p>
                                        <div class="text-2xl font-bold text-gray-900">100-150 FCFA/élève</div>
                                    </div>
                                    
                                    <div class="border border-gray-200 rounded-xl p-9">
                                        <h3 class="font-bold text-lg text-gray-900 mb-3">Examens Blancs</h3>
                                        <p class="text-gray-600 mb-4">Préparation aux examens nationaux</p>
                                        <div class="text-2xl font-bold text-gray-900">15 000-20 000 FCFA</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="lg:w-1/3 flex flex-col justify-between">
                                <div class="bg-[#d058f6]/10 border border-[#d058f6] rounded-xl p-5">
                                    <h3 class="font-bold text-lg text-[#d058f6] mb-3">Solution Personnalisée</h3>
                                    <p class="text-[#d058f6] mb-4">
                                        Besoin d'une solution sur mesure pour votre établissement? 
                                        Notre équipe vous propose un devis gratuit adapté à vos besoins spécifiques.
                                    </p>
                                    <ul class="space-y-2 text-[#d058f6] mb-6">
                                        <li class="flex items-start space-x-2">
                                            <svg class="h-5 w-5 text-[#d058f6] mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                            </svg>
                                            <span>Analyse de vos besoins</span>
                                        </li>
                                        <li class="flex items-start space-x-2">
                                            <svg class="h-5 w-5 text-[#d058f6] mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                            </svg>
                                            <span>Configuration personnalisée</span>
                                        </li>
                                        <li class="flex items-start space-x-2">
                                            <svg class="h-5 w-5 text-[#d058f6] mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                            </svg>
                                            <span>Formation de votre personnel</span>
                                        </li>
                                    </ul>
                                </div>
                                
                                <div class="pt-4">
                                    <a href="/devis-personnalise" type="button" class="appearance-none inline-flex hover:shadow-2xl transition-all duration-300 hover:scale-105 items-center group space-x-2.5 bg-[#d058f6] text-white py-4 px-5 rounded-2xl cursor-pointer w-full">
                                        <span class="w-full font-semibold text-base">Demander un devis</span>
                                        <svg class="inline-block h-6" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M3 12.4999H21L14 19.4999M14 5.5L18 9.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>

Related Examples

Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

11 months ago

2.9k
Product card

Author:
Anum Shahana

7 months ago

1.1k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

5 months ago

1.2k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

5 months ago

1k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

5 months ago

1.1k
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Author:
Rajesh Maheshwari

4 months ago

958
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

2 months ago

530
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

2 months ago

466
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

2 months ago

472
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

2 months ago

413
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

2 months ago

272
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

2 months ago

235

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components