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

108

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

HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

2k
Pricing Card

Author:
Anonymous

1 year ago

1.4k
Semi transparent pricing cards

Author:
Anonymous

2 years ago

9.1k
Interactive Multi-Method Donation Section
Overview: A high-trust, conversion-oriented fundraising section styled in the project's signature Navy Blue theme. It provides users with flexible payment options, ranging from one-click fixed amounts to manual bank transfers and cryptocurrency donations. Key Features: Smart Amount Logic: Includes a JavaScript-powered selector where users can choose a preset amount ($10, $25, $50) or type a custom value. The interface automatically toggles states (deselecting buttons when typing, and vice-versa) to prevent user error. Payment Methods: Quick Card/Checkout: Primary call-to-action column. Bank Transfer: A clean card displaying account details with a "Copy to Clipboard" utility. Crypto (Bitcoin): A specialized dark-themed card featuring a placeholder QR code and wallet address copying functionality. Trust Signals: Includes security iconography (lock, shield) and reassuring copy to boost donor confidence. Visual Hierarchy: Uses a 7/5 grid split to prioritize the immediate donation action while keeping manual payment methods accessible but secondary. Tech Stack: Framework: Tailwind CSS. Icons: Ionicons. Scripting: Vanilla JavaScript (for amount toggling and clipboard copying functions). Fonts: DM Serif Display (Headings) + Inter (Body). Usage: Ideal for the "Support Us" page or a dedicated campaign landing page. The script tag included at the bottom handles all the interactivity (button selection and text copying) without needing external libraries.

Author:
Juan D. Cortorreal

2 weeks ago

113
Pricing Plans UI
A modern, responsive pricing plan cards

Author:
EliteAI Tools

11 months ago

1.2k
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

10 months ago

1.6k
Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.4k
Horizontal Pricing Card

Author:
Mereani Waqa

2 years ago

5.6k
Pricing Table

Author:
Akshay

3 years ago

10.8k
Pricing section - Htmlwind
Single pricing

Author:
Htmlwind

6 months ago

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

Author:
Paul Intay

1 year ago

2.8k
Pricing section
Pricing table with 3 cards for 3 plans

Author:
Leon Bachmann

2 years ago

10.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components