Subscription Plan Cards

Forked from @elsabe-fourie/subscription-plan-cards

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

This tailwind example is contributed by bara masalma, on 21-Dec-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author bara masalma

Tailwind v3.4 1.4k 10

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Why Choose Lueora?</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f8ff;
            line-height: 1.5;
        }

.comparison-container {
            background: linear-gradient(to bottom, #ebf8ff, #ffffff);
        }

.comparison-table th {
            background-color: #e3f2fd;
            color: #0369a1;
        }

.comparison-table td {
            background-color: #ffffff;
        }

.comparison-table .check {
            color: #10b981;
        }

.comparison-table .cross {
            color: #ef4444;
        }

.comparison-table tr:hover {
            background-color: #dbeafe;
            transition: background-color 0.3s;
        }

.header-title {
            color: #1e3a8a;
        }

.sub-title {
            color: #374151;
        }

.brand-section {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 2rem;
        }

.brand-logo {
            width: 60px;
            height: 60px;
        }

.brand-title {
            margin-left: 0.75rem;
            font-size: 1.5rem;
            font-weight: 600;
            color: #1e90ff;
        }

footer {
            padding: 1.5rem 0;
            font-size: 0.875rem;
            color: #6b7280;
        }
    </style>
</head>

<div class="min-h-screen flex flex-col justify-center items-center py-12 px-4 sm:px-6 lg:px-8">
        <div class="w-full max-w-6xl bg-white rounded-lg shadow-xl p-8 md:p-10">
            <h2 class="text-3xl font-bold text-center mt-12 sm:text-5xl header-title">Why Choose Lueora?</h2>
            <p class="max-w-3xl mx-auto mt-4 text-xl text-center sub-title">See how Lueora stands out from other brands.</p>

<div class="mt-24 container space-y-12">
                <div class="relative p-8 border border-gray-200 rounded-2xl shadow-lg bg-white">
                    <table class="w-full text-left border-collapse comparison-table">
                        <thead>
                            <tr>
                                <th class="py-4 px-6 font-semibold text-lg">Feature</th>
                                <th class="py-4 px-6 font-semibold text-lg text-center">Lueora</th>
                                <th class="py-4 px-6 font-semibold text-lg text-center">Other Brands</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-b">
                                <td class="py-4 px-6">High Quality</td>
                                <td class="py-4 px-6 text-center check">✅</td>
                                <td class="py-4 px-6 text-center cross">❌</td>
                            </tr>
                            <tr class="border-b">
                                <td class="py-4 px-6">Health & Comfort Focused</td>
                                <td class="py-4 px-6 text-center check">✅</td>
                                <td class="py-4 px-6 text-center cross">❌</td>
                            </tr>
                            <tr class="border-b">
                                <td class="py-4 px-6">Fast & Free Shipping</td>
                                <td class="py-4 px-6 text-center check">✅</td>
                                <td class="py-4 px-6 text-center cross">❌</td>
                            </tr>
                            <tr class="border-b">
                                <td class="py-4 px-6">Hassle-Free Refunds</td>
                                <td class="py-4 px-6 text-center check">✅</td>
                                <td class="py-4 px-6 text-center cross">❌</td>
                            </tr>
                            <tr class="border-b">
                                <td class="py-4 px-6">Quick Email Support</td>
                                <td class="py-4 px-6 text-center check">✅</td>
                                <td class="py-4 px-6 text-center cross">❌</td>
                            </tr>
                            <tr>
                                <td class="py-4 px-6">Innovative Home Solutions</td>
                                <td class="py-4 px-6 text-center check">✅</td>
                                <td class="py-4 px-6 text-center cross">❌</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

Related Examples

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

Andreas Wagner

2 years ago

15.4k
Ticket Options ios 26
Ticket Options ios 26

Omer fils ELENGA

9 months ago

507
Card template

Raul antonio de la cruz hernandez

8 months ago

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

Hamza Atig

1 year ago

2k
Pricing Cards
the component is designed to showcase and compare prices between different subscription plans.

Anonymous

2 years ago

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

Kennedy Mills

3 years ago

14.1k
Card
Card

Aman kumar

2 years ago

3k
Pricing cards
pricing section with 3 cards

Noob

4 years ago

12.3k
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
Pricing section - Htmlwind
Single pricing

Htmlwind

1 year ago

1.2k
Pricing card

Task Master

3 years ago

9.7k
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Ayyamperumal S

6 months ago

985