Component:
Pricing E-commerce Modern
Pro version coming soon!
<!--
@type: Pricing
@industry: E-commerce
@style: Modern
@category: Page Section, Content, Sale
@framework: Tailwind
@license: Pro
-->
<section class="w-full py-12 md:py-24 bg-white">
<div class="max-w-7xl mx-auto px-4 text-center">
<div class="max-w-4xl mx-auto space-y-6">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl md:text-5xl">One-Time Collections for Every Style</h2>
<p class="text-lg text-gray-600 md:text-xl">
Choose from our expertly curated packages designed to elevate your look instantly. No subscriptions, just pure style.
</p>
</div>
<div class="max-w-4xl mx-auto mt-12 grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-0 items-center">
<div class="h-auto max-h-max relative bg-gray-50 p-8 rounded-xl md:rounded-l-xl shadow-lg transition-all duration-300 border border-gray-200">
<h3 class="text-3xl font-bold text-gray-900 mb-2">Essential Collection</h3>
<p class="text-gray-600 mb-6">A curated selection of foundational pieces for your everyday style.</p>
<div class="flex flex-col gap-1 items-center justify-center mb-6">
<span class="text-5xl font-bold text-gray-900">$149</span>
<span class="text-sm text-gray-600">One-time payment. No subscription</span>
</div>
<ul class="space-y-3 text-left flex-grow mb-8">
<li class="flex items-center gap-3 text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-circle-check-big h-5 w-5 text-orange-500 flex-shrink-0">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path>
</svg>
<span>5 Premium Items</span>
</li>
<li class="flex items-center gap-3 text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-circle-check-big h-5 w-5 text-orange-500 flex-shrink-0">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path>
</svg>
<span>Standard Shipping</span>
</li>
<li class="flex items-center gap-3 text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-circle-check-big h-5 w-5 text-orange-500 flex-shrink-0">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path>
</svg>
<span>30-Day Return Policy</span>
</li>
<li class="flex items-center gap-3 text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-circle-check-big h-5 w-5 text-orange-500 flex-shrink-0">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path>
</svg>
<span>Online Style Guide Access</span>
</li>
</ul>
<button class="inline-flex items-center justify-center gap-2 whitespace-nowrap disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-10 has-[>svg]:px-4 w-full mt-auto px-8 py-4 text-lg font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 bg-gray-800 hover:bg-gray-900 text-white">
Add to Cart
</button>
</div>
<div class="relative bg-gray-50 p-8 rounded-xl shadow-lg flex flex-col transition-all duration-300 border-2 border-orange-500 scale-[1.03]">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-orange-500 text-white text-sm font-semibold px-4 py-1 rounded-full shadow-md">
Most Popular
</div>
<h3 class="text-3xl font-bold text-gray-900 mb-2">Signature Bundle</h3>
<p class="text-gray-600 mb-6">Our most popular bundle, offering versatility and timeless elegance.</p>
<div class="flex flex-col gap-1 items-center justify-center mb-6">
<span class="text-5xl font-bold text-gray-900">$299</span>
<span class="text-sm text-gray-600">One-time payment. No subscription</span>
</div>
<ul class="space-y-3 text-left flex-grow mb-8">
<li class="flex items-center gap-3 text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-circle-check-big h-5 w-5 text-orange-500 flex-shrink-0">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path>
</svg>
<span>10 Premium Items</span>
</li>
<li class="flex items-center gap-3 text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-circle-check-big h-5 w-5 text-orange-500 flex-shrink-0">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path>
</svg>
<span>Express Shipping</span>
</li>
<li class="flex items-center gap-3 text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-circle-check-big h-5 w-5 text-orange-500 flex-shrink-0">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path>
</svg>
<span>60-Day Return Policy</span>
</li>
<li class="flex items-center gap-3 text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-circle-check-big h-5 w-5 text-orange-500 flex-shrink-0">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path>
</svg>
<span>Online Style Guide Access</span>
</li>
<li class="flex items-center gap-3 text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-circle-check-big h-5 w-5 text-orange-500 flex-shrink-0">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path>
</svg>
<span>Personalized Styling Session (1-hour)</span>
</li>
<li class="flex items-center gap-3 text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-circle-check-big h-5 w-5 text-orange-500 flex-shrink-0">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<path d="m9 11 3 3L22 4"></path>
</svg>
<span>Exclusive Member Discounts</span>
</li>
</ul>
<button class="inline-flex items-center justify-center gap-2 whitespace-nowrap disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-10 has-[>svg]:px-4 w-full mt-auto px-8 py-4 text-lg font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 bg-orange-500 hover:bg-orange-600 text-white">
Buy Now
</button>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-lg text-gray-600">
Looking for a custom order or bulk purchase?
<a href="#" class="text-orange-500 hover:underline font-medium">Contact our sales team</a>
for special pricing.
</p>
</div>
</div>
</section>