<section class="py-16 bg-gray-50">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap justify-between items-center -mx-4 mb-10">
<div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
<span class="text-sm font-semibold uppercase">Pricing</span>
<h2 class="max-w-xl font-heading text-3xl sm:text-4xl">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
</div>
<div class="w-full lg:w-auto px-4">
<div class="inline-flex items-center p-2 bg-gray-100 rounded"><a class="inline-block px-8 pt-2 pb-3 leading-6 font-heading font-medium text-green-500 bg-white rounded-sm" href="#">Monthly</a><a class="inline-block px-8 pt-2 pb-3 leading-6 font-heading font-medium text-gray-900 hover:text-gray-700" href="#">Yearly</a></div>
</div>
</div>
<div class="max-w-md lg:max-w-6xl mx-auto">
<div class="flex flex-wrap items-center">
<div class="w-full lg:w-1/3">
<div class="p-8 bg-white rounded-md">
<div class="text-center mb-20">
<span class="font-heading font-medium text-lg">Starter</span>
<div class="flex items-start justify-center mt-2">
<span class="font-heading font-medium text-lg">$</span>
<span class="font-heading font-medium text-3xl leading-10">9,99</span>
</div>
</div>
<ul class="mb-8">
<li class="flex items-center mb-3">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
</svg>
<span class="ml-4 text-sm">Complete documentation</span>
</li>
<li class="flex items-center mb-3">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
</svg>
<span class="ml-4 text-sm">Working materials in Figma</span>
</li>
<li class="flex items-center mb-3">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
</svg>
<span class="ml-4 text-sm">100GB cloud storage</span>
</li>
<li class="flex items-center">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
</svg>
<span class="ml-4 text-sm">500 team members</span>
</li>
</ul>
<a class="block py-4 px-6 text-center font-heading font-medium text-base text-green-500 hover:text-white border border-green-500 hover:bg-green-500 rounded-sm transition duration-200" href="#">Get started</a>
</div>
</div>
<div class="w-full lg:w-1/3">
<div class="relative py-12 px-8 bg-gray-900 rounded-md">
<img class="absolute top-0 left-0 -ml-1 -mt-1" src="acros-assets/elements/bestseller.svg" alt="">
<div class="text-center mb-20">
<span class="font-heading font-medium text-white text-lg">Pro</span>
<div class="flex items-start justify-center mt-2">
<span class="font-heading font-medium text-white text-lg">$</span>
<span class="font-heading font-medium text-white text-3xl leading-10">14,99</span>
</div>
</div>
<ul class="mb-8">
<li class="flex items-center mb-3">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
</svg>
<span class="ml-4 text-white text-sm">Complete documentation</span>
</li>
<li class="flex items-center mb-3">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
</svg>
<span class="ml-4 text-white text-sm">Working materials in Figma</span>
</li>
<li class="flex items-center mb-3">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
</svg>
<span class="ml-4 text-white text-sm">100GB cloud storage</span>
</li>
<li class="flex items-center">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
</svg>
<span class="ml-4 text-white text-sm">500 team members</span>
</li>
</ul>
<a class="block py-4 px-6 text-center font-heading font-medium text-base bg-white hover:bg-gray-100 border border-white hover:border-gray-100 rounded-sm transition duration-200" href="#">Get started</a>
</div>
</div>
<div class="w-full lg:w-1/3">
<div class="p-8 bg-white rounded-md">
<div class="text-center mb-20">
<span class="font-heading font-medium text-lg">Premium</span>
<div class="flex items-start justify-center mt-2">
<span class="font-heading font-medium text-lg">$</span>
<span class="font-heading font-medium text-3xl leading-10">19,99</span>
</div>
</div>
<ul class="mb-8">
<li class="flex items-center mb-3">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
</svg>
<span class="ml-4 text-sm">Complete documentation</span>
</li>
<li class="flex items-center mb-3">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
</svg>
<span class="ml-4 text-sm">Working materials in Figma</span>
</li>
<li class="flex items-center mb-3">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
</svg>
<span class="ml-4 text-sm">100GB cloud storage</span>
</li>
<li class="flex items-center">
<svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
</svg>
<span class="ml-4 text-sm">500 team members</span>
</li>
</ul>
<a class="block py-4 px-6 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Get started</a>
</div>
</div>
</div>
</div>
</div>
</section>