Ticket Options ios 26

This tailwind example is contributed by Omer fils ELENGA, on 27-Nov-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Omer fils ELENGA

Tailwind v3.4 507 3

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Ticket Options — iOS 26 Style</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            sans: ['SF Pro Display', '-apple-system', 'BlinkMacSystemFont', 'Inter', 'sans-serif']
          },
          backdropBlur: {
            xs: '2px'
          }
        }
      }
    }
  </script>
  <style>
    body {
      overflow-x: hidden;
      background: #000;
      color: white;
    }

/* Fond animé (dégradé vibrant + mouvement doux) */
    .animated-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      background: radial-gradient(
        circle at 30% 30%,
        rgba(10, 50, 255, 0.15),
        transparent 40%
      ), 
      radial-gradient(
        circle at 80% 70%,
        rgba(255, 40, 120, 0.1),
        transparent 50%
      );
      animation: bgMove 30s infinite linear;
      z-index: -1;
    }

@keyframes bgMove {
      0% { transform: translate(0, 0) rotate(0deg); }
      100% { transform: translate(-10%, -10%) rotate(360deg); }
    }

/* Glass card */
    .glass-card {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

.glass-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      border-color: rgba(255, 255, 255, 0.25);
    }

.early-bird {
      background: linear-gradient(135deg, rgba(1, 71, 255, 0.2), rgba(100, 150, 255, 0.1));
      border-color: rgba(100, 180, 255, 0.4) !important;
    }

.early-bird:hover {
      border-color: rgba(100, 180, 255, 0.7) !important;
      box-shadow: 0 20px 40px rgba(1, 71, 255, 0.2);
    }

/* Bouton iOS */
    .ticket-btn {
      transition: all 0.3s ease;
    }

.ticket-btn:hover {
      background: blue;
      transform: scale(1.02);
    }

.arrow {
      transition: transform 0.3s ease;
    }

.ticket-btn:hover .arrow {
      transform: translateX(4px);
    }

/* Titre animé */
    .title-reveal {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.8s forwards 0.2s;
    }

@keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

/* Responsive fix */
    @media (max-width: 768px) {
      .card-container {
        flex-direction: column !important;
        align-items: stretch !important;
      }
      .glass-card {
        width: 100% !important;
        max-width: 100%;
      }
    }
  </style>
</head>
<body class="dark:bg-black bg-white min-h-screen">
  
  <div class="animated-bg"></div>

<section class="relative py-20 px-4 sm:px-6">
    <h2 class="title-reveal text-left dark:text-white text-4xl sm:text-5xl font-semibold tracking-tight">
      Ticket Options
    </h2>

<div class="mt-12 max-w-7xl mx-auto card-container flex flex-col md:flex-row items-center gap-8">
      
      <div class="glass-card early-bird flex flex-col justify-between p-7 sm:p-8 w-full max-w-md h-[380px] rounded-[48px]">
        <div>
          <h3 class="text-white text-xl sm:text-2xl font-bold uppercase tracking-wide">Early Bird Pass</h3>
          <p class="text-white/90 mt-2 text-base sm:text-lg">Limited time offer!</p>
        </div>
        <div class="mt-4">
          <p class="text-white text-4xl sm:text-5xl font-bold">€299</p>
          <button class="ticket-btn mt-6 w-full py-4 bg-white/15 hover: rounded-[100px] text-white text-base sm:text-lg font-medium flex items-center justify-center gap-3">
            Get your ticket
            <svg class="arrow w-5 h-5" 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" fill="currentColor"/>
            </svg>
          </button>
        </div>
      </div>

<div class="glass-card flex flex-col justify-between p-7 sm:p-8 w-full max-w-md h-[380px] rounded-[48px]">
        <div>
          <h3 class="text-white text-xl sm:text-2xl font-bold uppercase tracking-wide">Standard Pass</h3>
          <p class="text-white/90 mt-2 text-base sm:text-lg">Access to all sessions & workshops</p>
        </div>
        <div class="mt-4">
          <p class="text-white text-4xl sm:text-5xl font-bold">€399</p>
          <button class="ticket-btn mt-6 w-full py-4 bg-white/10 hover:bg-blue-300  rounded-[100px] text-white text-base sm:text-lg font-medium flex items-center justify-center gap-3">
            Get your ticket
            <svg class="arrow w-5 h-5" 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" fill="currentColor"/>
            </svg>
          </button>
        </div>
      </div>

<div class="glass-card flex flex-col justify-between p-7 sm:p-8 w-full max-w-md h-[380px] rounded-[48px]">
        <div>
          <h3 class="text-white text-xl sm:text-2xl font-bold uppercase tracking-wide">VIP Experience</h3>
          <p class="text-white/90 mt-2 text-base sm:text-lg">Exclusive speaker meetups & front-row seating</p>
        </div>
        <div class="mt-4">
          <p class="text-white text-4xl sm:text-5xl font-bold">€699</p>
          <button class="ticket-btn mt-6 w-full py-4 bg-white/10 hover:bg-white/20 rounded-[100px] text-white text-base sm:text-lg font-medium flex items-center justify-center gap-3">
            Get your ticket
            <svg class="arrow w-5 h-5" 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" fill="currentColor"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

Related Examples

Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

bara masalma

1 year ago

1.4k
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Rathanak Phan

1 year ago

1k
Horizontal pricing card

Anonymous

1 year ago

1.5k
Clean pricing cards

Santiago Hernandez

2 years ago

3.1k
Horiizontal Pricing Card
Single pricing plan section

ReddRadar.com

1 year ago

1k
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Ayyamperumal S

6 months ago

986
Tailwind pricing cards
credits: https://twitter.com/namyakhann

Kennedy Mills

3 years ago

14.1k
Pricing cards in pair

Santiago Hernandez

2 years ago

2.8k
3 pricing cards

Laurits

3 years ago

15.2k
Pricing card

Piet Vriend

3 years ago

9.6k
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Hamza Atig

1 year ago

2k
Pricing Cards
the component is designed to showcase and compare prices between different subscription plans.

Anonymous

2 years ago

7.9k