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
bara masalma profile image
Author bara masalma
Tailwind v3.4 Responsive 1.5k 10

Related Examples

  • Ticket Options ios 26
    Ticket Options ios 26

    Ticket Options ios 26

    Omer fils ELENGA Omer fils ELENGA
    507
  • AgriSmart
    AgriSmart

    used in agriculture for making profit and good production

    INGRIDE MUZIRANENGE INGRIDE MUZIRANENGE
    1.1k
  • Payment form
    Payment form
    ORGIN_DREAMS ORGIN_DREAMS
    1.1k
  • Card pricing section
    Card pricing section

    Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

    Rathanak Phan Rathanak Phan
    1.3k
  • Interactive Pricing Table
    Interactive Pricing Table

    This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

    Banshee Banshee
    2.1k
  • E-commerce Website UI Design
    E-commerce Website UI Design

    Here is a well-structured UI Design for a general e-commerce website template. This can be used as a reference for designers and developers to build or evaluate the UI components needed for an e-commerce site. View https://github.com/Rathanak-Phan/general-e-commerce-website-template

    Rathanak Phan Rathanak Phan
    2.8k
  • Pricing section - Htmlwind
    Pricing section - Htmlwind

    Single pricing

    Htmlwind Htmlwind
    1.3k
  • Simple yet stylish pricing table
    Simple yet stylish pricing table
    Laurits Laurits
    10.1k
  • Pricing section with tailwind css
    Pricing section with tailwind css
    Task Master Task Master
    12.3k
  • SoungCraft
    SoungCraft

    Used for making and trading songs

    Frederick250 Frederick250
    1.2k
  • Pricing Card
    Pricing Card

    A responsive pricing card build using html and tailwind css

    Rajesh Maheshwari Rajesh Maheshwari
    1.5k
  • partql
    partql

    partql

    sh22gr sh22gr
    866

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile
View all tags

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.