<section class="relative py-24 bg-black overflow-x-hidden" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
<img class="absolute top-0 left-1/2 transform -translate-x-1/2 object-contain" src="boldui-assets/elements/shadow-blue-pricing.svg" alt="">
<div class="relative container mx-auto px-4">
<div class="flex flex-wrap justify-between items-center -mx-4 mb-16">
<div class="w-full lg:w-auto max-w-md px-4 mb-8 lg:mb-0">
<span class="text-lg font-semibold text-blue-400">Lorem ipsum</span>
<h2 class="mt-6 text-2xl text-white uppercase font-heading">Increase your brand's regular profit</h2>
</div>
<div class="w-full lg:w-auto px-4">
<div class="flex flex-wrap items-center">
<a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" class="inline-block w-full md:w-auto mb-4 md:mb-0 md:mr-8 py-3 px-4 font-bold text-xs text-center rounded-full uppercase font-heading bg-blue-500 hover:bg-blue-600 transform duration-200" :class="{ 'bg-blue-500 hover:bg-blue-600': tab == $refs.tab1.textContent, 'text-gray-500 hover:text-gray-400 border hover:border-gray-500': tab != $refs.tab1.textContent }" href="#">Active demo</a>
<a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" class="inline-block w-full md:w-auto py-3 px-4 font-bold text-xs text-center rounded-full uppercase font-heading text-gray-500 hover:text-gray-400 border hover:border-gray-500" :class="{ 'bg-blue-500 hover:bg-blue-600': tab == $refs.tab2.textContent, 'text-gray-500 hover:text-gray-400 border hover:border-gray-500': tab != $refs.tab2.textContent }" href="#">Normal Tab</a>
</div>
</div>
</div>
<div class="flex flex-wrap items-center">
<div class="w-full lg:w-1/3">
<div class="py-14 px-10 border lg:border-r-0">
<h3 class="text-2xl text-white font-heading">Starter</h3>
<p class="mb-10 text-lg text-gray-500 font-heading">$34.99</p>
<ul class="mb-14">
<li class="flex items-center mb-4">
<svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
</svg>
<span class="text-gray-50">Complete documentation</span>
</li>
<li class="flex items-center mb-4">
<svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
</svg>
<span class="text-gray-50">100GB cloud storage</span>
</li>
<li class="flex items-center">
<svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
</svg>
<span class="text-gray-50">Complete documentation</span>
</li>
</ul>
<a class="inline-flex items-center py-4 text-white hover:underline" href="#">
<span class="mr-2 text-sm font-heading">Activate demo</span>
<svg class="text-yellow-300" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.0099 3.28373H-6.10352e-05V5.37603H12.0099V8.51449L15.9999 4.32988L12.0099 0.145264V3.28373Z" fill="currentColor"></path>
</svg>
</a>
</div>
</div>
<div class="w-full lg:w-1/3">
<div class="py-20 px-10 border">
<div class="flex items-center justify-between mb-10">
<div>
<h3 class="text-5xl text-yellow-400 font-heading">Pro</h3>
<p class="text-lg text-gray-500 font-heading">$65.99</p>
</div>
<div class="relative w-1/2">
<img class="absolute top-1/2 left-1/2 h-16 md:h-32 w-16 md:w-32 transform -translate-y-1/2 -translate-x-1/2" src="boldui-assets/elements/best-choice-text.svg" alt="">
</div>
</div>
<ul class="mb-14">
<li class="flex items-center mb-4">
<svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
</svg>
<span class="text-gray-50">Complete documentation</span>
</li>
<li class="flex items-center mb-4">
<svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
</svg>
<span class="text-gray-50">100GB cloud storage</span>
</li>
<li class="flex items-center">
<svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
</svg>
<span class="text-gray-50">Complete documentation</span>
</li>
</ul>
<a class="inline-flex items-center justify-center w-full py-4 md:px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
<svg class="text-black mr-3" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="currentColor"></path>
</svg>
<span class="text-sm font-heading">Activate demo</span>
</a>
</div>
</div>
<div class="w-full lg:w-1/3">
<div class="py-14 px-10 border lg:border-l-0">
<h3 class="text-2xl text-white font-heading">Premium</h3>
<p class="mb-10 text-lg text-gray-500 font-heading">$99.99</p>
<ul class="mb-14">
<li class="flex items-center mb-4">
<svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
</svg>
<span class="text-gray-50">Complete documentation</span>
</li>
<li class="flex items-center mb-4">
<svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
</svg>
<span class="text-gray-50">100GB cloud storage</span>
</li>
<li class="flex items-center">
<svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
</svg>
<span class="text-gray-50">Complete documentation</span>
</li>
</ul>
<a class="inline-flex items-center py-4 text-white hover:underline" href="#">
<span class="mr-2 text-sm font-heading">Activate demo</span>
<svg class="text-yellow-300" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.0099 3.28373H-6.10352e-05V5.37603H12.0099V8.51449L15.9999 4.32988L12.0099 0.145264V3.28373Z" fill="currentColor"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
