<div class="bg-gray-100">
<div class="container mx-auto">
<div class="py-8 px-4">
<div class="flex flex-col md:flex-row justify-between items-start">
<div class="px-4 md:px-0">
<h3 class="text-left text-4xl text-gray-800 font-extrabold">Simple, transparent pricing</h3>
<p class="mt-4">No contracts. No surprise fees.</p>
</div>
<div class="w-full md:w-1/2 flex flex-row justify-start md:justify-end items-center">
<ul class="text-xl text-gray-600 text-center font-semibold mt-6 md:mt-0 md:px-4 flex flex-row justify-start md:justify-end items-start md:items-end">
<li class="px-4">Monthly</li>
<li class="bg-black rounded-full w-16 h-8 flex flex-row justify-start p-1 cursor-pointer">
<span class="bg-white h-6 w-6 rounded-full inline-block"></span>
</li>
<li class="px-4">Yearly</li>
</ul>
</div>
</div>
<ul class="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<li class="p-8 rounded-2xl bg-amber-200">
<h3 class="font-bold text-xl">Intro</h3>
<div class="font-extrabold pt-8 pb-4 text-5xl">
$19<span class="text-base relative -top-1">/month</span>
</div>
<p class="text-gray-800">
For most businesses that want to optimize web queries
</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>
All limited links
</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>
Own analytics platform
</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>
Chat support
</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>
Optimizie hashtags
</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 users
</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"
>
Choose Plan
</button>
</li>
<li class="p-8 rounded-2xl bg-indigo-200">
<h3 class="font-bold text-xl">Base</h3>
<div class="font-extrabold pt-8 pb-4 text-5xl">
$39<span class="text-base relative -top-1">/month</span>
</div>
<p class="text-gray-800">
For most businesses that want to optimize web queries
</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>
All limited links
</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>
Own analytics platform
</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>
Chat support
</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>
Optimizie hashtags
</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 users
</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"
>
Choose Plan
</button>
</li>
<li class="p-8 rounded-2xl bg-green-200">
<h3 class="font-bold text-xl">Popular</h3>
<div class="font-extrabold pt-8 pb-4 text-5xl">
$99<span class="text-base relative -top-1">/month</span>
</div>
<p class="text-gray-800">
For most businesses that want to optimize web queries
</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>
All limited links
</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>
Own analytics platform
</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>
Chat support
</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>
Optimizie hashtags
</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 users
</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"
>
Choose Plan
</button>
</li>
<li class="p-8 rounded-2xl bg-red-200">
<h3 class="font-bold text-xl">Enterprise</h3>
<div class="font-extrabold pt-8 pb-4 text-5xl">
$199<span class="text-base relative -top-1">/month</span>
</div>
<p class="text-gray-800">
For most businesses that want to optimize web queries
</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>
All limited links
</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>
Own analytics platform
</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>
Chat support
</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>
Optimizie hashtags
</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 users
</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"
>
Choose Plan
</button>
</li>
</ul>
</div>
</div>
</div>
const PricingPlan = () => {
return (
<div className="bg-gray-100">
<div className="container mx-auto">
<div className="py-8 px-4">
<div className="flex flex-col md:flex-row justify-between items-start">
<div className="px-4 md:px-0">
<h3 className="text-left text-4xl text-gray-800 font-extrabold">
Simple, transparent pricing
</h3>
<p className="mt-4">
No contracts. No surprise fees.
</p>
</div>
<div className="w-full md:w-1/2 flex flex-row justify-start md:justify-end items-center">
<ul className="text-xl text-gray-600 text-center font-semibold mt-6 md:mt-0 md:px-4 flex flex-row justify-start md:justify-end items-start md:items-end">
<li className="px-4">Monthly</li>
<li className="bg-black rounded-full w-16 h-8 flex flex-row justify-start p-1 cursor-pointer">
<span className="bg-white h-6 w-6 rounded-full inline-block" />
</li>
<li className="px-4">Yearly</li>
</ul>
</div>
</div>
<ul className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<li className="p-8 rounded-2xl bg-amber-200">
<h3 className="font-bold text-xl">Intro</h3>
<div className="font-extrabold pt-8 pb-4 text-5xl">
$19
<span className="text-base relative -top-1">
/month
</span>
</div>
<p className="text-gray-800">
For most businesses that want to optimize web
queries
</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>
All limited links
</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>
Own analytics platform
</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>
Chat support
</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>
Optimizie hashtags
</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 users
</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">
Choose Plan
</button>
</li>
<li className="p-8 rounded-2xl bg-indigo-200">
<h3 className="font-bold text-xl">Base</h3>
<div className="font-extrabold pt-8 pb-4 text-5xl">
$39
<span className="text-base relative -top-1">
/month
</span>
</div>
<p className="text-gray-800">
For most businesses that want to optimize web
queries
</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>
All limited links
</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>
Own analytics platform
</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>
Chat support
</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>
Optimizie hashtags
</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 users
</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">
Choose Plan
</button>
</li>
<li className="p-8 rounded-2xl bg-green-200">
<h3 className="font-bold text-xl">Popular</h3>
<div className="font-extrabold pt-8 pb-4 text-5xl">
$99
<span className="text-base relative -top-1">
/month
</span>
</div>
<p className="text-gray-800">
For most businesses that want to optimize web
queries
</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>
All limited links
</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>
Own analytics platform
</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>
Chat support
</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>
Optimizie hashtags
</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 users
</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">
Choose Plan
</button>
</li>
<li className="p-8 rounded-2xl bg-red-200">
<h3 className="font-bold text-xl">Enterprise</h3>
<div className="font-extrabold pt-8 pb-4 text-5xl">
$199
<span className="text-base relative -top-1">
/month
</span>
</div>
<p className="text-gray-800">
For most businesses that want to optimize web
queries
</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>
All limited links
</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>
Own analytics platform
</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>
Chat support
</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>
Optimizie hashtags
</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 users
</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">
Choose Plan
</button>
</li>
</ul>
</div>
</div>
</div>
);
}
export default PricingPlan;