<!-- Pricing Start -->
<section class="py-12 container mx-auto px-6" >
<div class="flex justify-center">
<div class="lg:w-2/3 space-y-5 text-center">
<!-- Section Title -->
<h1 class="text-2xl text-gray-800 uppercase tracking-widest">
Hosting made easy
</h1>
<div class="h-0.5 bg-purple-500 w-14 mx-auto"></div>
<p class="text-gray-400">
Set your site up for success with the perfect mix of eCommerce
tools, plugins, security and expert guidance.
</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
<!-- Pricing Card Economy -->
<div
class="shadow rounded border border-gray-100 bg-white text-center transform transition ease-in-out duration-300 hover:-translate-y-4 mb-4"
>
<div class="py-10 px-11">
<div class="space-y-2">
<h1 class="uppercase text-sm">BASIC</h1>
<h1 class="text-4xl">$9.90</h1>
<h1 class="uppercase text-gray-400 text-xs">
Billing Per Month
</h1>
</div>
<hr class="my-7" />
<div class="space-y-5">
<p>
Bandwidth:
<span class="text-purple-500 font-medium">1GB</span>
</p>
<p>
Onlinespace:
<span class="text-purple-500 font-medium">50MB</span>
</p>
<p>
Support: <span class="text-purple-500 font-medium">No</span>
</p>
<p><span class="text-purple-500 font-medium">1</span> Domain</p>
<p>
<span class="text-purple-500 font-medium">No</span> Hidden
Fees
</p>
</div>
<!-- Button -->
<a
href="#"
class="inline-block px-5 py-2.5 rounded text-sm cursor-pointer select-none outline-none transition-all duration-500 focus:outline-none focus:ring-0 focus:ring-offset-0 hover:-translate-y-1.5 bg-purple-500 text-white mt-10"
>Join Now</a
>
</div>
</div>
<!-- Pricing Card Deluxe (shadow-xl to Active Card) -->
<div
class="rounded border border-gray-100 bg-white text-center transform transition ease-in-out duration-300 hover:-translate-y-4 shadow-xl mb-4"
>
<div class="py-10 px-11">
<div class="space-y-2">
<h1 class="uppercase text-sm">PLUS</h1>
<h1 class="text-4xl">$19.90</h1>
<h1 class="uppercase text-gray-400 text-xs">
Billing Per Month
</h1>
</div>
<hr class="my-7" />
<div class="space-y-5">
<p>
Bandwidth:
<span class="text-purple-500 font-medium">10GB</span>
</p>
<p>
Onlinespace:
<span class="text-purple-500 font-medium">500MB</span>
</p>
<p>
Support: <span class="text-purple-500 font-medium">Yes</span>
</p>
<p>
<span class="text-purple-500 font-medium">10</span> Domain
</p>
<p>
<span class="text-purple-500 font-medium">No</span> Hidden
Fees
</p>
</div>
<!-- Button -->
<a
href="#"
class="inline-block px-5 py-2.5 rounded text-sm cursor-pointer select-none outline-none transition-all duration-500 focus:outline-none focus:ring-0 focus:ring-offset-0 hover:-translate-y-1.5 bg-purple-500 text-white mt-10"
>Join Now</a
>
</div>
</div>
<!-- Pricing Card Ultimate -->
<div
class="shadow rounded border border-gray-100 bg-white text-center transform transition ease-in-out duration-300 hover:-translate-y-4 mb-4"
>
<div class="py-10 px-11">
<div class="space-y-2">
<h1 class="uppercase text-sm">Ultimate</h1>
<h1 class="text-4xl">$29.90</h1>
<h1 class="uppercase text-gray-400 text-xs">
Billing Per Month
</h1>
</div>
<hr class="my-7" />
<div class="space-y-5">
<p>
Bandwidth:
<span class="text-purple-500 font-medium">1GB</span>
</p>
<p>
Onlinespace:
<span class="text-purple-500 font-medium">2GB</span>
</p>
<p>
Support: <span class="text-purple-500 font-medium">Yes</span>
</p>
<p>
<span class="text-purple-500 font-medium">Unlimited</span>
Domain
</p>
<p>
<span class="text-purple-500 font-medium">No</span> Hidden
Fees
</p>
</div>
<!-- Button -->
<a
href="#"
class="inline-block px-5 py-2.5 rounded text-sm cursor-pointer select-none outline-none transition-all duration-500 focus:outline-none focus:ring-0 focus:ring-offset-0 hover:-translate-y-1.5 bg-purple-500 text-white mt-10"
>Join Now</a
>
</div>
</div>
</div>
</section>
<!-- Pricing End -->
