<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pricing Plans</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
.bg-primary { background-color: #4C3BCF; }
.bg-secondary { background-color: #4B70F5; }
.bg-tertiary { background-color: #3DC2EC; }
.text-primary { color: #4C3BCF; }
.text-secondary { color: #4B70F5; }
.text-tertiary { color: #3DC2EC; }
</style>
</head>
<body class="flex items-center justify-center h-screen bg-gray-100">
<div class="flex space-x-6">
<div class="bg-white p-6 rounded-lg shadow-lg transform transition duration-300 hover:-translate-y-2">
<h3 class="text-2xl text-primary font-semibold mb-4">Basic</h3>
<div class="text-4xl text-secondary font-bold mb-4">$19<span class="text-tertiary text-lg">/month</span></div>
<ul class="text-gray-700 mb-6">
<li class="mb-2">10 GB Storage</li>
<li class="mb-2">100 Emails</li>
<li>24/7 Support</li>
</ul>
<button class="bg-secondary text-white py-2 px-4 rounded-lg hover:bg-tertiary transition duration-300">Choose Plan</button>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg transform transition duration-300 hover:-translate-y-2">
<h3 class="text-2xl text-primary font-semibold mb-4">Pro</h3>
<div class="text-4xl text-secondary font-bold mb-4">$49<span class="text-tertiary text-lg">/month</span></div>
<ul class="text-gray-700 mb-6">
<li class="mb-2">50 GB Storage</li>
<li class="mb-2">500 Emails</li>
<li>Priority Support</li>
</ul>
<button class="bg-secondary text-white py-2 px-4 rounded-lg hover:bg-tertiary transition duration-300">Choose Plan</button>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg transform transition duration-300 hover:-translate-y-2">
<h3 class="text-2xl text-primary font-semibold mb-4">Enterprise</h3>
<div class="text-4xl text-secondary font-bold mb-4">$99<span class="text-tertiary text-lg">/month</span></div>
<ul class="text-gray-700 mb-6">
<li class="mb-2">200 GB Storage</li>
<li class="mb-2">2000 Emails</li>
<li>24/7 Priority Support</li>
</ul>
<button class="bg-secondary text-white py-2 px-4 rounded-lg hover:bg-tertiary transition duration-300">Choose Plan</button>
</div>
</div>
</body>
</html>