<div class="bg-gray-900">
<div class="container mx-auto">
<div class="py-8">
<h3 class="text-center text-4xl text-gray-100 font-extrabold">Pricing</h3>
<ul class="text-xl text-gray-400 text-center font-semibold mt-6 px-4 w-72 flex flex-row justify-center items-center mx-auto">
<li class="px-4">Monthly</li>
<li class="bg-gray-700 rounded-full w-16 h-8 flex flex-row justify-start p-1 cursor-pointer">
<span class="bg-gray-900 h-6 w-6 rounded-full inline-block"></span>
</li>
<li class="px-4">Yearly</li>
</ul>
<ul class="px-4 mt-16 grid grid-cols-1 md:grid-cols-3 gap-4">
<li class="p-8 rounded-2xl bg-amber-200">
<h3 class="font-bold text-xl">Basic</h3>
<div class="font-extrabold pt-8 pb-4 text-5xl">Free</div>
<p class="text-gray-800">Free plan for all users</p>
<ul class="my-8">
<li class="py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
Store upto 20 songs
</li>
<li class="py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
2 Collaborators
</li>
<li class="py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
Unlimited shares
</li>
<li class="py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
12b bit encryption
</li>
<li class="py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
MacOS, Android, iOS and much more
</li>
</ul>
<button
class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800"
>
Get Free Plan
</button>
</li>
<li class="p-8 rounded-2xl bg-indigo-200">
<h3 class="font-bold text-xl">Professional</h3>
<div class="font-extrabold pt-8 pb-4 text-5xl">
$15<span class="text-base relative -top-1">/month</span>
</div>
<p class="text-gray-800">Free plan for all users</p>
<ul class="my-8">
<li class="py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
Store upto 20 songs
</li>
<li class="py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
2 Collaborators
</li>
<li class="py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
Unlimited shares
</li>
<li class="py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
12b bit encryption
</li>
<li class="py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
MacOS, Android, iOS and much more
</li>
</ul>
<button
class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800"
>
Get Professional Plan
</button>
</li>
<li class="p-8 rounded-2xl bg-green-200">
<h3 class="font-bold text-xl">Team</h3>
<div class="font-extrabold pt-8 pb-4 text-5xl">
$25<span class="text-base relative -top-1">/month</span>
</div>
<p class="text-gray-800">Free plan for all users</p>
<ul class="my-8">
<li class="py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
Store upto 20 songs
</li>
<li class="py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
2 Collaborators
</li>
<li class="py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
Unlimited shares
</li>
<li class="py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
12b bit encryption
</li>
<li class="py-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
MacOS, Android, iOS and much more
</li>
</ul>
<button
class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800"
>
Get Team Plan
</button>
</li>
</ul>
</div>
</div>
</div>
const PricingPlan = () => {
return (
<div className="bg-gray-900">
<div className="container mx-auto">
<div className="py-8">
<h3 className="text-center text-4xl text-gray-100 font-extrabold">
Pricing
</h3>
<ul className="text-xl text-gray-400 text-center font-semibold mt-6 px-4 w-72 flex flex-row justify-center items-center mx-auto">
<li className="px-4">Monthly</li>
<li className="bg-gray-700 rounded-full w-16 h-8 flex flex-row justify-start p-1 cursor-pointer">
<span className="bg-gray-900 h-6 w-6 rounded-full inline-block" />
</li>
<li className="px-4">Yearly</li>
</ul>
<ul className="px-4 mt-16 grid grid-cols-1 md:grid-cols-3 gap-4">
<li className="p-8 rounded-2xl bg-amber-200">
<h3 className="font-bold text-xl">Basic</h3>
<div className="font-extrabold pt-8 pb-4 text-5xl">
Free
</div>
<p className="text-gray-800">
Free plan for all users
</p>
<ul className="my-8">
<li className="py-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 inline-block mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clipRule="evenodd"
/>
</svg>
Store upto 20 songs
</li>
<li className="py-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 inline-block mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clipRule="evenodd"
/>
</svg>
2 Collaborators
</li>
<li className="py-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 inline-block mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clipRule="evenodd"
/>
</svg>
Unlimited shares
</li>
<li className="py-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 inline-block mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clipRule="evenodd"
/>
</svg>
12b bit encryption
</li>
<li className="py-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 inline-block mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clipRule="evenodd"
/>
</svg>
MacOS, Android, iOS and much more
</li>
</ul>
<button className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800">
Get Free Plan
</button>
</li>
<li className="p-8 rounded-2xl bg-indigo-200">
<h3 className="font-bold text-xl">Professional</h3>
<div className="font-extrabold pt-8 pb-4 text-5xl">
$15
<span className="text-base relative -top-1">
/month
</span>
</div>
<p className="text-gray-800">
Free plan for all users
</p>
<ul className="my-8">
<li className="py-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 inline-block mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clipRule="evenodd"
/>
</svg>
Store upto 20 songs
</li>
<li className="py-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 inline-block mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clipRule="evenodd"
/>
</svg>
2 Collaborators
</li>
<li className="py-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 inline-block mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clipRule="evenodd"
/>
</svg>
Unlimited shares
</li>
<li className="py-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 inline-block mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clipRule="evenodd"
/>
</svg>
12b bit encryption
</li>
<li className="py-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 inline-block mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clipRule="evenodd"
/>
</svg>
MacOS, Android, iOS and much more
</li>
</ul>
<button className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800">
Get Professional Plan
</button>
</li>
<li className="p-8 rounded-2xl bg-green-200">
<h3 className="font-bold text-xl">Team</h3>
<div className="font-extrabold pt-8 pb-4 text-5xl">
$25
<span className="text-base relative -top-1">
/month
</span>
</div>
<p className="text-gray-800">
Free plan for all users
</p>
<ul className="my-8">
<li className="py-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 inline-block mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clipRule="evenodd"
/>
</svg>
Store upto 20 songs
</li>
<li className="py-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 inline-block mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clipRule="evenodd"
/>
</svg>
2 Collaborators
</li>
<li className="py-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 inline-block mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clipRule="evenodd"
/>
</svg>
Unlimited shares
</li>
<li className="py-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 inline-block mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clipRule="evenodd"
/>
</svg>
12b bit encryption
</li>
<li className="py-2">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 inline-block mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clipRule="evenodd"
/>
</svg>
MacOS, Android, iOS and much more
</li>
</ul>
<button className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800">
Get Team Plan
</button>
</li>
</ul>
</div>
</div>
</div>
);
}
export default PricingPlan;