PLAN SECTION

This tailwind example is contributed by ABDO-SY, on 14-Apr-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Card Pricing

Author ABDO-SY

Tailwind v3.4 1.7k 5

Fork Fullscreen

<section class="dark:bg-black py-20">
  <h2 class=" justify-start dark:text-white text-5xl font-bold  capitalize">Ticket Options</h2>
  <div class="mt-12 max-w-3xl lg:max-w-5xl xl:max-w-[1240px] mx-auto flex flex-col md:flex-row items-center gap-5">
    <div
      class="flex flex-col justify-between px-6 lg:px-[35px] xl:px-[50px] py-7 lg:py-[50px] xl:py-[70px] w-full sm:w-96 h-[380px] lg:h-[450px] xl:h-[500px] bg-[#0147ff] rounded-[50px]">
      <div>
        <h3 class="text-white dark:text-white text-2xl md:text-xl lg:text-2xl font-bold  uppercase leading-loose">EARLY
          BIRD PASS</h3>
        <p class="text-white dark:text-white text-xl md:text-lg lg:text-xl font-normal  ">Limited time offer!</p>
      </div>
      <div>
        <p class="text-white dark:text-white text-5xl font-bold  uppercase">€299</p>
        <button class=" flex items-center justify-center gap-5 mt-10 w-full py-3 lg:py-6  bg-[#dedee0] rounded-[100px]  text-[#1c1a1a] text-2xl md:text-lg lg:text-2xl font-medium ">Get your ticket<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.89715 1.12408C4.89715 0.503267 5.41394 0 6.05142 0H15.8457C16.4832 0 17 0.503267 17 1.12408V10.6622C17 11.283 16.4832 11.7863 15.8457 11.7863C15.2082 11.7863 14.6915 11.283 14.6915 10.6622V3.83784L1.97046 16.2261C1.51969 16.6651 0.788848 16.6651 0.338078 16.2261C-0.112693 15.7871 -0.112693 15.0754 0.338078 14.6364L13.0591 2.24816H6.05142C5.41394 2.24816 4.89715 1.74489 4.89715 1.12408Z" class=" fill-black"></path></svg></button>
      </div>
    </div>
    <div
      class="flex flex-col justify-between px-6 lg:px-[35px] xl:px-[50px] py-7 lg:py-[50px] xl:py-[70px] w-full sm:w-96 h-[380px] lg:h-[450px] xl:h-[500px] border dark:border-white border-black dark:bg-[#000] rounded-[50px]">
      <div>
        <h3 class=" dark:text-white text-2xl md:text-xl lg:text-2xl font-bold  uppercase leading-loose">STANDARD PASS
        </h3>
        <p class=" dark:text-white text-xl md:text-lg lg:text-xl font-normal  ">Access to all sessions &amp; workshops
        </p>
      </div>
      <div>
        <p class=" dark:text-white text-5xl font-bold  uppercase">€399</p>
        <button class=" flex items-center justify-center gap-5 mt-10 w-full py-3 lg:py-6  bg-[#dedee0] rounded-[100px]  text-[#1c1a1a] text-2xl md:text-lg lg:text-2xl font-medium ">Get your ticket<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.89715 1.12408C4.89715 0.503267 5.41394 0 6.05142 0H15.8457C16.4832 0 17 0.503267 17 1.12408V10.6622C17 11.283 16.4832 11.7863 15.8457 11.7863C15.2082 11.7863 14.6915 11.283 14.6915 10.6622V3.83784L1.97046 16.2261C1.51969 16.6651 0.788848 16.6651 0.338078 16.2261C-0.112693 15.7871 -0.112693 15.0754 0.338078 14.6364L13.0591 2.24816H6.05142C5.41394 2.24816 4.89715 1.74489 4.89715 1.12408Z" class=" fill-black"></path></svg></button>
      </div>
    </div>
    <div
      class="flex flex-col justify-between px-6 lg:px-[35px] xl:px-[50px] py-7 lg:py-[50px] xl:py-[70px] w-full sm:w-96 h-[380px] lg:h-[450px] xl:h-[500px] border dark:border-white border-black dark:bg-[#000] rounded-[50px]">
      <div>
        <h3 class=" dark:text-white text-2xl md:text-xl lg:text-2xl font-bold  uppercase leading-loose">VIP EXPERIENCE
        </h3>
        <p class=" dark:text-white text-xl md:text-lg lg:text-xl font-normal  ">Includes exclusive speaker meetups &amp;
          front-row seating</p>
      </div>
      <div>
        <p class=" dark:text-white text-5xl font-bold  uppercase">€699</p>
        <button class=" flex items-center justify-center gap-5 mt-10 w-full py-3 lg:py-6  bg-[#dedee0] rounded-[100px]  text-[#1c1a1a] text-2xl md:text-lg lg:text-2xl font-medium ">Get your ticket<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.89715 1.12408C4.89715 0.503267 5.41394 0 6.05142 0H15.8457C16.4832 0 17 0.503267 17 1.12408V10.6622C17 11.283 16.4832 11.7863 15.8457 11.7863C15.2082 11.7863 14.6915 11.283 14.6915 10.6622V3.83784L1.97046 16.2261C1.51969 16.6651 0.788848 16.6651 0.338078 16.2261C-0.112693 15.7871 -0.112693 15.0754 0.338078 14.6364L13.0591 2.24816H6.05142C5.41394 2.24816 4.89715 1.74489 4.89715 1.12408Z" class=" fill-black"></path></svg></button>
      </div>
    </div>
  </div>
</section>

Related Examples

Pricing Table

Akshay

4 years ago

11.4k
Pricing card
basic pricing card with single price

Amit Pachange

3 years ago

11.3k
multiple pricing cards
basic pricing card with single price

Amit Pachange

3 years ago

13.2k
Pricing card
Reveal details on hover

Anonymous

2 years ago

5.3k
Card
Card

Aman kumar

2 years ago

3k
Card
Card

Aman kumar

2 years ago

2.2k
HighLight
Highlight section. Find it makecomponents.com

makecomponents

2 years ago

2.5k
Product card

Anum Shahana

1 year ago

1.9k
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.

SHARIFUL ISLAM

1 year ago

2.8k
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Rajesh Maheshwari

1 year ago

1.9k
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.

Ayyamperumal S

1 year ago

1.7k
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