Home
ABDO-SY
PLAN SECTION

PLAN SECTION

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

Card Pricing

Author ABDO-SY

511

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 Card with gradient background
A sleek and transparent card displaying your product's pricing. It's designed to be both visually appealing and informative, helping users understand your pricing options at a glance.

Author:
Computer guy

1 year ago

8k
Experince Section

Author:
ABDO-SY

6 months ago

716
Card with Thumbnail
Post card with image

Author:
Mr Robot

3 years ago

11.1k
Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

3.7k
Testimonial card

Author:
Leon Bachmann

2 years ago

11.6k
File Upload

Author:
Rajesh Maheshwari

6 months ago

737
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Rafferty Kim

1 year ago

9.7k
User Feedback Card
A responsive user feedback card that displays user information, their role, and a testimonial. The card is styled using Tailwind CSS for a clean and modern look.

Author:
Anum Shahana

10 months ago

1.2k
Coming Soon Section
Simple and beautiful card for your showing on your projects (in development) home screen

Author:
Noob

2 years ago

10k
Profile Card
User Profile Card with Name and Location

Author:
Anubhav Ranjan

11 months ago

1.9k
Info cards for admin panal

Author:
Sophia Baker

2 years ago

9.4k
Cards - Users Card
This Users Card design includes: 1. Responsive layout using Flexbox 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User list with avatars, names, and roles 5. Hover effects on user items 6. "Add Member" button 7. Card footer with team member count 8. Subtle animations and transitions 9. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - User avatars have a border color that changes in dark mode - User items have a hover effect that scales them slightly - The "Add Member" button uses Indigo-800 with a Blue-900 hover state - Dark mode is automatically applied based on system preferences - The entire card fades in on load for a smooth entrance - The card has a hover effect that enhances its shadow This design provides a clean, professional look for displaying team members while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

10 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components