Lifetime Access — iOS 26 Style

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 625

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>Lifetime Access — 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']
          },
          borderRadius: {
            '4xl': '28px'
          }
        }
      }
    }
  </script>
  <style>
    body {
      background: #000;
      color: white;
      overflow-x: hidden;
    }

/* Fond animé iOS-style */
    .animated-gradient {
      position: fixed;
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      background: 
        radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.08), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.06), transparent 50%);
      animation: rotateGradient 40s infinite linear;
      z-index: -1;
    }

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

/* Card principale */
    .glass-card {
      background: rgba(255, 255, 255, 0.04);
      backdrop-filter: blur(32px) saturate(180%);
      -webkit-backdrop-filter: blur(32px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 28px;
      overflow: hidden;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    }

.glass-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
      border-color: rgba(255, 255, 255, 0.2);
    }

/* Section gauche */
    .feature-list li {
      opacity: 0;
      transform: translateX(-10px);
      animation: fadeInLeft 0.5s forwards;
    }

.feature-list li:nth-child(1) { animation-delay: 0.1s; }
    .feature-list li:nth-child(2) { animation-delay: 0.2s; }
    .feature-list li:nth-child(3) { animation-delay: 0.3s; }
    .feature-list li:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInLeft {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

/* Checkmark hover effect */
    .check-icon {
      transition: transform 0.2s ease, scale 0.2s ease;
    }

.feature-item:hover .check-icon {
      transform: scale(1.2) rotate(10deg);
      color: #60a5fa !important;
    }

/* Bouton iOS */
    .buy-btn {
      background: linear-gradient(135deg, #4f46e5, #7c3aed);
      transition: all 0.3s ease;
      box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
    }

.buy-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(79, 70, 229, 0.5);
      background: linear-gradient(135deg, #4338ca, #6d28d9);
    }

/* Responsive */
    @media (max-width: 1023px) {
      .card-layout {
        flex-direction: column !important;
      }
      .feature-section, .price-section {
        width: 100% !important;
        padding: 2rem !important;
      }
    }
  </style>
</head>
<body class="dark:bg-black">
  
  <div class="animated-gradient"></div>

<div class="p-4 sm:p-6 md:p-10">
    <div class="relative max-w-6xl mx-auto">
      <div class="glass-card card-layout flex max-w-5xl mx-auto">
        
        <div class="feature-section flex-1 px-6 py-8 sm:px-8 sm:py-10 md:p-12">
          <h3 class="text-2xl sm:text-3xl font-semibold text-white tracking-tight">Lifetime access</h3>
          <p class="mt-4 text-base sm:text-lg text-gray-300 leading-relaxed">
            Take your Tailwind CSS development to the next level!
          </p>

<div class="mt-8">
            <div class="flex items-center">
              <div class="flex-1 border-t border-gray-700"></div>
            </div>
            <ul class="feature-list mt-8 space-y-4 sm:space-y-5">
              <li class="feature-item flex items-start">
                <svg class="check-icon h-5 w-5 text-emerald-400 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
                <p class="ml-3 text-white/90">Inspect Tailwind CSS websites</p>
              </li>
              <li class="feature-item flex items-start">
                <svg class="check-icon h-5 w-5 text-emerald-400 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
                <p class="ml-3 text-white/90">Edit mode in real-time</p>
              </li>
              <li class="feature-item flex items-start">
                <svg class="check-icon h-5 w-5 text-emerald-400 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
                <p class="ml-3 text-white/90">Copy utility classes right into your clipboard</p>
              </li>
              <li class="feature-item flex items-start">
                <svg class="check-icon h-5 w-5 text-emerald-400 mt-0.5 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
                <p class="ml-3 text-white/90">Free Chrome extension updates (Firefox coming soon)</p>
              </li>
            </ul>
          </div>
        </div>

<div class="price-section bg-gray-800/40 flex-shrink-0 w-full sm:w-[320px] flex flex-col justify-center items-center p-6 sm:p-8 text-center">
          <p class="text-base font-medium text-indigo-300">Pay once, own it forever</p>
          <div class="mt-3 flex items-baseline">
            <span class="text-4xl sm:text-5xl font-bold text-white">$19.99</span>
            <span class="ml-2 text-sm font-medium text-gray-400">USD</span>
          </div>
          <div class="mt-6 w-full">
            <a href="#" class="buy-btn flex items-center justify-center w-full py-3.5 px-6 rounded-xl text-white font-medium text-base">
              Buy now
            </a>
            <p class="text-gray-400 text-xs mt-3">100% money back guarantee</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Related Examples

Horizontal Pricing Card with gradient shadow

Prajwal Hallale

2 years ago

254
Responsive pricing cards with heading
grid of 4 pricing cards with a Switch button for Monthly Annually plans and heading

Erik Hyatt

3 years ago

14.3k
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
Swiss-Grid Dark Pricing
A brutally minimalist pricing section that relies on strict grid architecture and typographic hierarchy instead of decorative elements. Features responsive border collapsing, monospaced technical accents, and high-performance CSS-only hover states. Designed for high-end SaaS, dev-tools, or agency portfolios that prioritize data clarity and structural rhythm.

Hamza Atig

8 months ago

759
Horizontal Pricing Card

Mereani Waqa

2 years ago

6.2k
Pricing cards in pair

Santiago Hernandez

2 years ago

2.8k
Pricing card

Piet Vriend

3 years ago

9.6k
Pricing component luxuries
A modern, luxurious, and elegant pricing component with HTML and Tailwind CSS.

Alif Bima Pradana

7 months ago

884
Modern pricing cards
Minimal and clean pricing cards

Paul Intay

1 year ago

1.8k
Responsive SaaS Pricing Cards with Monthly Yearly Toggle

JUGENDRA GANGWAR

1 month ago

25
Pricing
Looks better with in [Line-2] with: md:w-3/5

Matti

1 year ago

1.6k
Clean pricing cards

Freja Jensen

3 years ago

8.8k