HighLight

Highlight section. Find it makecomponents.com

This tailwind example is contributed by makecomponents, on 20-Aug-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

905
4

Related Examples

  • Pricing card

    basic pricing card with single price

  • multiple pricing cards

    basic pricing card with single price

    11.4k
  • Pricing card

    Reveal details on hover

    2.4k
  • Card

    Card

    1.5k
  • Card

    Card

    758
  • 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.

  • Simple pricing card

    minimal pricing card

    7.4k
  • 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. 🚀

    255
  • Profile, Team or Testimonial

    Profile, Team or Testimonial

    2.8k
  • Coming Soon Section

    Simple and beautiful card for your showing on your projects (in development) home screen

    9.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components

tailwindflex logo TailwindFlex.com
Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

© 2025 TailwindFlex. All Rights Reserved.

v1.1