Home
bara masalma
Subscription Plan Cards

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 CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author bara masalma

702

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 card

Author:
Sophia Baker

2 years ago

7.9k
Pricing table
Pricing table with background gradient

Author:
Samuel Dawson

2 years ago

10.1k
Pricing Card

Author:
Amit Pachange

2 years ago

12.9k
Pricing Table

Author:
Akshay

2 years ago

10.1k
Card
Card

Author:
Aman kumar

9 months ago

1.6k
Basic Pricing Cards
highlight and promote different product or service plans

Author:
Anonymous

1 year ago

6k
Pricing cards in pair

Author:
Nour Haider

1 year ago

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

Author:
Elsabe Fourie

1 year ago

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

Author:
Anonymous

1 year ago

6.6k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

5 days ago

25
Simple yet stylish pricing table

Author:
Laurits

2 years ago

8.2k
Card
Card

Author:
Aman kumar

9 months ago

908

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components