Home
Omer fils ELENGA
Lifetime Access — iOS 26 Style

Lifetime Access — iOS 26 Style

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

Pricing

Author Omer fils ELENGA

126

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

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

Author:
Elsabe Fourie

2 years ago

11.5k
Horizontal Pricing Card with gradient shadow

Author:
Prajwal Hallale

1 year ago

223
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

6 months ago

820
Service Pricing Card
Cards including a call-to-action button for signing up

Author:
Paul Intay

1 year ago

3k
Modern pricing cards
Minimal and clean pricing cards

Author:
Paul Intay

1 year ago

1.2k
Basic pricing card

Author:
Sienna

2 years ago

10.9k
Minimalist Pricing Section
A minimal but nice pricing section.

Author:
VoltagedDev

1 year ago

2.4k
Basic pricing card

Author:
Sienna

2 years ago

11.3k
Clean pricing cards

Author:
Santiago Hernandez

1 year ago

2.4k
E-commerce Website UI Design
Here is a well-structured UI Design for a general e-commerce website template. This can be used as a reference for designers and developers to build or evaluate the UI components needed for an e-commerce site. View https://github.com/Rathanak-Phan/general-e-commerce-website-template

Author:
Rathanak Phan

6 months ago

1.6k
Pricing table with 2 columns

Author:
Piet Vriend

3 years ago

13k
Pricing table
pricing table for a software or service offering

Author:
Samuel Dawson

2 years ago

11.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components