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

1.1k

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

partql
partql

Author:
sh22gr

1 month ago

171
AgriSmart
used in agriculture for making profit and good production

Author:
INGRIDE MUZIRANENGE

4 months ago

458
Pricing Plans
Js integrated Pricing Plans

Author:
ORGIN_DREAMS

9 months ago

751
Card
Card

Author:
Aman kumar

1 year ago

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

Author:
Samuel Dawson

3 years ago

11.3k
Pricing card

Author:
Task Master

3 years ago

9.2k
"Visit Rwanda" tourism website focusing on wildlife, particularly mountain gorillas
Key Features of This Rwanda Tourism Website: Focus on Mountain Gorillas ("Ingagi"): Dedicated section highlighting gorilla trekking experiences Information about conservation efforts Booking options for gorilla permits Wildlife Showcase: Featured animals including gorillas, golden monkeys, elephants, lions, and more Beautiful image cards for each species Conservation-focused messaging National Parks Information: Sections on Volcanoes, Akagera, and Nyungwe National Parks Visual highlights of each park's unique features User Experience: Responsive design that works on all devices Attractive color scheme inspired by Rwanda's landscapes Easy navigation with clear calls-to-action Practical Information: Contact form for tour inquiries Testimonials from previous visitors Footer with important links and contact details

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

851
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

11 months ago

1.5k
Pricing card single
Horizontal pricing card

Author:
Dika Rahman

1 year ago

3.3k
Pricing Card
A responsive pricing card build using html and tailwind css

Author:
Rajesh Maheshwari

1 year ago

1k
3 pricing cards

Author:
Laurits

3 years ago

14.8k
Pricing table
Pricing table with background gradient

Author:
Samuel Dawson

3 years ago

11.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components