Mirrors/tailShape
1
0
Fork 0
mirror of https://github.com/istiyakaminsanto/tailShape.git synced 2025-12-27 20:57:00 +00:00
Code Issues Projects Releases Wiki Activity

added faq's and fixed some pricing's

Browse Source
This commit is contained in:
merajjahir
2022-03-01 16:47:05 +06:00
parent 7fc551b9ae
commit beaeae9345
32 changed files with 6156 additions and 895 deletions
Download Patch File Download Diff File Expand all files Collapse all files

851
public/componets/pricing/pricing.html
View File

@@ -1243,6 +1243,857 @@
<!-- pricing 8 end -->
<!-- pricing 9 start -->
<section class="section_divider">
<div>Pricing 9</div>
</section>
<section class="bg-gray-100 dark:bg-gray-800">
<div class="max-w-7xl px-4 py-24 mx-auto text-left md:text-center ">
<div class="grid grid-cols-1 gap-24 md:grid-cols-2">
<div>
<p class="mb-1 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-300">For Developers</p>
<h1 class="mb-2 text-5xl font-bold leading-tight text-gray-900 dark:text-white md:font-extrabold">$9<span class="text-2xl font-medium text-gray-600 dark:text-gray-300"> per month</span></h1>
<p class="mb-6 text-lg text-gray-600 dark:text-gray-400">
One plan for any organization—from startups to Fortune 500s. We offer 50% off of for all students and universities. Please get in touch with us and provide proof of your status.
</p>
<div class="justify-center block space-x-0 space-y-2 md:flex md:space-x-2 md:space-y-0">
<a href="#" class="w-full bg-purple-700 px-4 py-2 text-lg font-semibold text-white rounded dark:bg-gray-800 dark:border-2 dark:border-gray-300 dark:text-gray-100 dark:hover:bg-gray-900 md:w-auto">Get Started</a>
<a href="#" class="w-full bg-gray-100 px-4 py-2 text-lg font-semibold text-gray-800 rounded hover:bg-gray-300 md:w-auto">Contact Us</a>
</div>
</div>
<div>
<p class="mb-1 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-300">For Designers</p>
<h1 class="mb-2 text-5xl font-bold leading-tight text-gray-900 dark:text-white md:font-extrabold">$19<span class="text-2xl font-medium text-gray-600 dark:text-gray-300 "> per month</span></h1>
<p class="mb-6 text-lg text-gray-600 dark:text-gray-400 ">
One plan for any organization—from startups to Fortune 500s. We offer 50% off of for all students and universities. Please get in touch with us and provide proof of your status.
</p>
<div class="justify-center block space-x-0 space-y-2 md:flex md:space-x-2 md:space-y-0">
<a href="#" class="w-full bg-purple-700 px-4 py-2 text-lg font-semibold text-white rounded dark:bg-gray-800 dark:border-2 dark:border-gray-300 dark:text-gray-100 dark:hover:bg-gray-900 md:w-auto">Get Started</a>
<a href="#" class="w-full bg-gray-100 px-4 py-2 text-lg font-semibold text-gray-800 rounded hover:bg-gray-300 md:w-auto">Contact Us</a>
</div>
</div>
</div>
</div>
</section>
<!-- pricing 9 end -->
<!-- pricing 10 start -->
<section class="section_divider">
<div>Pricing 10</div>
</section>
<section class="py-20 dark:bg-gray-800 dark:text-gray-100">
<div class="container px-4 mx-auto">
<div class="max-w-2xl mx-auto mb-16 text-center">
<span class="font-bold tracking-wider uppercase dark:text-violet-400 text-purple-700">Pricing</span>
<h2 class="text-4xl font-bold lg:text-5xl">Choose your best plan</h2>
</div>
<div class="flex flex-wrap items-stretch -mx-4">
<div class="flex w-full mb-8 sm:px-4 md:w-1/2 lg:w-1/3 lg:mb-0">
<div class="flex flex-col p-6 space-y-6 rounded shadow sm:p-8 dark:bg-gray-900">
<div class="space-y-2">
<h4 class="text-2xl font-bold">Beginner</h4>
<span class="text-6xl font-bold">Free</span>
</div>
<p class="mt-3 leading-relaxed dark:text-gray-400">Etiam ac convallis enim, eget euismod dolor.</p>
<ul class="flex-1 mb-6 dark:text-gray-400">
<li class="flex mb-2 space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
<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"></path>
</svg>
<span>Aenean quis</span>
</li>
<li class="flex mb-2 space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500 ">
<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"></path>
</svg>
<span>Morbi semper</span>
</li>
<li class="flex mb-2 space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500 ">
<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"></path>
</svg>
<span>Tristique enim nec</span>
</li>
</ul>
<button type="button" class="inline-block px-5 py-3 font-semibold tracking-wider text-center rounded dark:bg-violet-500 dark:text-gray-900 bg-purple-600 text-white">Get Started</button>
</div>
</div>
<div class="flex w-full mb-8 sm:px-4 md:w-1/2 lg:w-1/3 lg:mb-0">
<div class="flex flex-col p-6 space-y-6 rounded shadow sm:p-8 dark:bg-violet-400 dark:text-gray-900 bg-violet-700 first-letter:">
<div class="space-y-2">
<h4 class="text-2xl font-bold text-white">Pro</h4>
<span class="text-6xl font-bold text-white ">$24
<span class="text-sm tracking-wide">/month</span>
</span>
</div>
<p class="leading-relaxed text-white">Morbi cursus ut sapien sit amet consectetur.</p>
<ul class="flex-1 space-y-2">
<li class="flex items-center space-x-2 text-white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 ">
<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"></path>
</svg>
<span>Everything in Free</span>
</li>
<li class="flex items-center space-x-2 text-white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6">
<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"></path>
</svg>
<span>Phasellus tellus</span>
</li>
<li class="flex items-center space-x-2 text-white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6">
<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"></path>
</svg>
<span>Praesent faucibus</span>
</li>
<li class="flex items-center space-x-2 text-white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6">
<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"></path>
</svg>
<span>Aenean et lectus blandit</span>
</li>
</ul>
<a rel="noopener noreferrer" href="#" class="inline-block w-full px-5 py-3 font-bold tracking-wider text-center rounded dark:bg-gray-800 dark:text-violet-400 bg-gray-300 text-purple-700">Get Started</a>
</div>
</div>
<div class="w-full mb-8 sm:px-4 md:w-1/2 lg:w-1/3 lg:mb-0">
<div class="p-6 space-y-6 rounded shadow sm:p-8 dark:bg-gray-900">
<div class="space-y-2">
<h4 class="text-2xl font-bold">Team</h4>
<span class="text-6xl font-bold">$72
<span class="text-sm tracking-wide">/month</span>
</span>
</div>
<p class="leading-relaxed dark:text-gray-400">Phasellus ultrices bibendum nibh in vehicula.</p>
<ul class="space-y-2 dark:text-gray-400">
<li class="flex items-start space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
<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"></path>
</svg>
<span>Everything in Pro</span>
</li>
<li class="flex items-start space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
<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"></path>
</svg>
<span>Fusce sem ligula</span>
</li>
<li class="flex items-start space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
<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"></path>
</svg>
<span>Curabitur dictum</span>
</li>
<li class="flex items-start space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
<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"></path>
</svg>
<span>Duis odio eros</span>
</li>
<li class="flex items-start space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0 w-6 h-6 dark:text-violet-400 text-purple-500">
<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"></path>
</svg>
<span>Vivamus ut lectus ex</span>
</li>
</ul>
<a rel="noopener noreferrer" href="#" class="inline-block w-full px-5 py-3 font-semibold tracking-wider text-center rounded dark:bg-violet-400 dark:text-gray-900 bg-purple-600 text-white">Get Started</a>
</div>
</div>
</div>
</div>
</section>
<!-- pricing 10 end -->
<!-- pricingd 11 start -->
<section class="section_divider">
<div>Pricing 11</div>
</section>
<section class="py-6 dark:bg-gray-800 dark:text-gray-50 bg-gray-100 text-gray-900">
<div class="container mx-auto flex flex-col items-center justify-center max-w-lg p-4 lg:max-w-full sm:p-10 lg:flex-row">
<div class="flex flex-col items-center justify-center flex-1 p-4 pb-8 sm:p-8 lg:p-16 dark:bg-gray-900 bg-gray-50">
<span class="text-sm">Basic</span>
<p class="text-5xl font-bold text-center">39€</p>
<p class="font-semibold text-center">Nemo deserunt possimus quo provident recusandae! Dolores qui architecto omnis pariatur eos voluptatibus sequi cum, non nesciunt aspernatur a?</p>
<button class="px-8 py-3 mt-6 text-lg font-semibold border rounded sm:mt-12 dark:border-gray-700 border-gray-300">Sign up</button>
</div>
<div class="flex flex-col items-center justify-center flex-1 p-4 pb-8 text-center rounded-md sm:p-8 lg:p-16 dark:bg-violet-400 dark:text-gray-900 bg-violet-600 text-gray-50">
<span class="text-sm font-semibold">Advanced</span>
<p class="text-5xl font-bold">89€</p>
<p class="font-semibold">Nemo deserunt possimus quo provident recusandae! Dolores qui architecto omnis pariatur eos voluptatibus sequi cum, non nesciunt aspernatur a?</p>
<button class="px-8 py-3 mt-6 text-lg font-semibold rounded sm:mt-12 dark:bg-gray-800 dark:text-gray-50 bg-gray-100 text-gray-900">Sign up</button>
</div>
</div>
</section>
<!-- pricingd 11 end -->
<!-- pricing 12 start -->
<section class="section_divider">
<div>Pricing 12</div>
</section>
<section class="dark:bg-gray-800 dark:text-gray-100">
<div class="container mx-auto p-6 overflow-x-auto">
<table class="w-full">
<caption class="sr-only">Pricing plan comparison</caption>
<thead>
<tr>
<th></th>
<th scope="col">
<h2 class="px-2 text-lg font-medium">Starter</h2>
<p class="mb-3">
<span class="text-2xl font-bold sm:text-4xl dark:text-gray-50">0€</span>
<span class="font-medium dark:text-gray-400">/mo</span>
</p>
</th>
<th scope="col">
<h2 class="px-2 text-lg font-medium">Standard</h2>
<p class="mb-3">
<span class="text-2xl font-bold sm:text-4xl dark:text-gray-50">19€</span>
<span class="font-medium dark:text-gray-400">/mo</span>
</p>
</th>
<th scope="col">
<h2 class="px-2 text-lg font-medium">Premium</h2>
<p class="mb-3">
<span class="text-2xl font-bold sm:text-4xl dark:text-gray-50">49€</span>
<span class="font-medium dark:text-gray-400">/mo</span>
</p>
</th>
</tr>
</thead>
<tbody class="space-y-6 text-center divide-y divide-gray-700">
<tr>
<th scope="row" class="text-left">
<h3 class="py-3">Euismod</h3>
</th>
<td>
<span class="block text-sm">1</span>
</td>
<td>
<span class="block text-sm">10</span>
</td>
<td>
<span class="block text-sm">100</span>
</td>
</tr>
<tr>
<th scope="row" class="text-left">
<h3 class="py-3">Principes et</h3>
</th>
<td>
<span class="block text-sm">0,5 GB</span>
</td>
<td>
<span class="block text-sm">5 GB</span>
</td>
<td>
<span class="block text-sm">500 GB</span>
</td>
</tr>
<tr>
<th scope="row" class="text-left">
<h3 class="py-3">Et mel porro</h3>
</th>
<td>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Free plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
</td>
<td>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Standard plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
</td>
<td>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Premium plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
</td>
</tr>
<tr>
<th scope="row" class="text-left">
<h3 class="py-3">Veniam suscipiantur</h3>
</th>
<td>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Free plan" class="w-5 h-5 mx-auto dark:text-gray-600">
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
</svg>
</td>
<td>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Standard plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
</td>
<td>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Premium plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
</td>
</tr>
<tr>
<th scope="row" class="text-left">
<h3 class="py-3">Ornatus tacimates</h3>
</th>
<td>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Free plan" class="w-5 h-5 mx-auto dark:text-gray-600">
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
</svg>
</td>
<td>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Standard plan" class="w-5 h-5 mx-auto dark:text-gray-600">
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
</svg>
</td>
<td>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Premium plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600" >
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
</td>
</tr>
<tr>
<th scope="row" class="text-left">
<h3 class="py-3">Aliquam fastidii in mei</h3>
</th>
<td>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Free plan" class="w-5 h-5 mx-auto dark:text-gray-600">
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
</svg>
</td>
<td>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Not included in Standard plan" class="w-5 h-5 mx-auto dark:text-gray-600">
<path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
</svg>
</td>
<td>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-label="Included in Premium plan" class="w-5 h-5 mx-auto dark:text-green-400 text-green-600">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- pricing 12 end -->
<!-- pricing 13 start -->
<section class="section_divider">
<div>Pricing 13</div>
</section>
<div class="bg-white dark:bg-gray-900">
<div class="container px-6 py-8 mx-auto">
<p class="text-xl text-center text-gray-500 dark:text-gray-300">
Choose your plan
</p>
<h1 class="mt-4 text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">Pricing Plan</h1>
<div class="mt-6 space-y-8 xl:mt-12">
<div class="flex items-center justify-between max-w-2xl px-8 py-4 mx-auto border cursor-pointer rounded-xl dark:border-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-9 sm:w-9" 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>
<div class="flex flex-col items-center mx-5 space-y-1">
<h2 class="text-lg font-medium text-gray-700 sm:text-2xl dark:text-gray-200">Basic</h2>
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full sm:px-4 sm:py-1 dark:bg-gray-700 ">
Save 20%
</div>
</div>
</div>
<h2 class="text-2xl font-semibold text-gray-500 sm:text-4xl dark:text-gray-300">$49 <span class="text-base font-medium">/Month</span></h2>
</div>
<div class="flex items-center justify-between max-w-2xl px-8 py-4 mx-auto border border-blue-500 cursor-pointer rounded-xl">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-600 sm:h-9 sm:w-9" 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>
<div class="flex flex-col items-center mx-5 space-y-1">
<h2 class="text-lg font-medium text-gray-700 sm:text-2xl dark:text-gray-200">Popular</h2>
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full sm:px-4 sm:py-1 dark:bg-gray-700 ">
Save 20%
</div>
</div>
</div>
<h2 class="text-2xl font-semibold text-blue-600 sm:text-4xl">$99 <span class="text-base font-medium">/Month</span></h2>
</div>
<div class="flex items-center justify-between max-w-2xl px-8 py-4 mx-auto border cursor-pointer rounded-xl dark:border-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-9 sm:w-9" 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>
<div class="flex flex-col items-center mx-5 space-y-1">
<h2 class="text-lg font-medium text-gray-700 sm:text-2xl dark:text-gray-200">Enterprise</h2>
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full sm:px-4 sm:py-1 dark:bg-gray-700 ">
Save 20%
</div>
</div>
</div>
<h2 class="text-2xl font-semibold text-gray-500 sm:text-4xl dark:text-gray-300">$149 <span class="text-base font-medium">/Month</span></h2>
</div>
<div class="flex justify-center">
<button class="px-8 py-2 tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
Choose Plan
</button>
</div>
</div>
</div>
</div>
<!-- pricing 13 end -->
<!-- pricing 14 start -->
<section class="section_divider">
<div>Pricing 14</div>
</section>
<div class="bg-white dark:bg-gray-900">
<div class="container px-6 py-8 mx-auto">
<h1 class="text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl dark:text-white">Simple pricing plan</h1>
<p class="max-w-2xl mx-auto mt-4 text-center text-gray-500 xl:mt-6 dark:text-gray-300">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias quas magni libero consequuntur voluptatum velit amet id repudiandae ea, deleniti laborum in neque eveniet.
</p>
<div class="grid grid-cols-1 gap-8 mt-6 lg:grid-cols-3 xl:mt-12">
<div class="flex items-center justify-between px-8 py-4 border cursor-pointer rounded-xl dark:border-gray-700">
<div class="flex flex-col items-center space-y-1">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-7 sm:w-7" 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>
<h2 class="text-lg font-medium text-gray-700 sm:text-xl dark:text-gray-200">Basic</h2>
</div>
<h2 class="text-2xl font-semibold text-gray-500 sm:text-3xl dark:text-gray-300">Free</h2>
</div>
<div class="flex items-center justify-between px-8 py-4 border border-blue-500 cursor-pointer rounded-xl">
<div class="flex flex-col items-center space-y-1">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-600 dark:text-blue-500 sm:h-7 sm:w-7" 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>
<h2 class="text-lg font-medium text-gray-700 sm:text-xl dark:text-gray-200">Standard</h2>
</div>
<div class="flex flex-col items-center space-y-1">
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full dark:text-blue-400 sm:px-4 sm:py-1 dark:bg-gray-700 ">
Save 30%
</div>
<h2 class="text-2xl font-semibold text-blue-600 dark:text-blue-500 sm:text-3xl">$99 <span class="text-base font-medium">/Yearly</span></h2>
</div>
</div>
<div class="flex items-center justify-between px-8 py-4 border cursor-pointer rounded-xl dark:border-gray-700">
<div class="flex flex-col items-center space-y-1">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 sm:h-7 sm:w-7" 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>
<h2 class="text-lg font-medium text-gray-700 sm:text-xl dark:text-gray-200">Pro</h2>
</div>
<div class="flex flex-col items-center space-y-1">
<div class="px-2 text-xs text-blue-500 bg-gray-100 rounded-full dark:text-blue-400 sm:px-4 sm:py-1 dark:bg-gray-700 ">
Save 20%
</div>
<h2 class="text-2xl font-semibold text-gray-500 sm:text-3xl dark:text-gray-300">$149 <span class="text-base font-medium">/Month</span></h2>
</div>
</div>
</div>
<div class="p-8 mt-8 space-y-8 bg-gray-100 dark:bg-gray-800 rounded-xl">
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
<p class="textlg sm:text-xl">Unlimited Links</p>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" 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>
</div>
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
<p class="textlg sm:text-xl">Own analytics platfrom</p>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" 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>
</div>
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
<p class="textlg sm:text-xl">Full Support with discussion</p>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" 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>
</div>
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
<p class="textlg sm:text-xl">Optimize hashtags</p>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd" />
</svg>
</div>
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
<p class="textlg sm:text-xl">Mobile app</p>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500 sm:h-7 sm:w-7" 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>
</div>
<div class="flex items-center justify-between text-gray-800 dark:text-gray-200">
<p class="textlg sm:text-xl">Unlimited users</p>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd" />
</svg>
</div>
</div>
<div class="flex justify-center mt-8">
<button class="px-8 py-2 tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
Choose Plan
</button>
</div>
</div>
</div>
<!-- pricing 14 end -->
<!-- pricing 15 start -->
<section class="section_divider">
<div>Pricing 15</div>
</section>
<section class="bg-white dark:bg-gray-800">
<div class="container px-6 py-8 mx-auto">
<div class="sm:flex sm:items-center sm:justify-between">
<div>
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Simple, transparent pricing</h2>
<p class="mt-4 text-gray-500 dark:text-gray-400">No Contracts. No surorise fees.</p>
</div>
<div class="overflow-hidden p-0.5 mt-6 border rounded-lg dark:border-gray-700">
<div class="sm:-mx-0.5 flex">
<button class=" focus:outline-none px-3 w-1/2 sm:w-auto py-1 sm:mx-0.5 text-white bg-blue-500 rounded-lg">Monthly</button>
<button class=" focus:outline-none px-3 w-1/2 sm:w-auto py-1 sm:mx-0.5 text-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 bg-transparent rounded-lg hover:bg-gray-200">Yearly</button>
</div>
</div>
</div>
<div class="grid gap-6 mt-16 -mx-6 sm:gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<div class="px-6 py-4 transition-colors duration-200 transform rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
<p class="text-lg font-medium text-gray-800 dark:text-gray-100">Intro</p>
<h4 class="mt-2 text-4xl font-semibold text-gray-800 dark:text-gray-100">$19 <span class="text-base font-normal text-gray-600 dark:text-gray-400">/ Month</span></h4>
<p class="mt-4 text-gray-500 dark:text-gray-300">For most businesses that want to optimaize web queries.</p>
<div class="mt-8 space-y-8">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-700 dark:text-gray-300">All limited links</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-700 dark:text-gray-300">Own analytics platform</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-700 dark:text-gray-300">Chat support</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-700 dark:text-gray-300">Optimize hashtags</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-700 dark:text-gray-300">Unlimited users</span>
</div>
</div>
<button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
Choose plan
</button>
</div>
<div class="px-6 py-4 transition-colors duration-200 transform rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
<p class="text-lg font-medium text-gray-800 dark:text-gray-100">Base</p>
<h4 class="mt-2 text-4xl font-semibold text-gray-800 dark:text-gray-100">$39 <span class="text-base font-normal text-gray-600 dark:text-gray-400">/ Month</span></h4>
<p class="mt-4 text-gray-500 dark:text-gray-300">For most businesses that want to optimaize web queries.</p>
<div class="mt-8 space-y-8">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-700 dark:text-gray-300">All limited links</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-700 dark:text-gray-300">Own analytics platform</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-700 dark:text-gray-300">Chat support</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-700 dark:text-gray-300">Optimize hashtags</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-700 dark:text-gray-300">Unlimited users</span>
</div>
</div>
<button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
Choose plan
</button>
</div>
<div class="px-6 py-4 transition-colors duration-200 transform bg-gray-700 rounded-lg dark:bg-gray-600">
<p class="text-lg font-medium text-gray-100">Popular</p>
<h4 class="mt-2 text-4xl font-semibold text-gray-100">$99 <span class="text-base font-normal text-gray-400">/ Month</span></h4>
<p class="mt-4 text-gray-300">For most businesses that want to optimaize web queries.</p>
<div class="mt-8 space-y-8">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-300">All limited links</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-300">Own analytics platform</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-300">Chat support</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-300">Optimize hashtags</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-300">Unlimited users</span>
</div>
</div>
<button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
Choose plan
</button>
</div>
<div class="px-6 py-4 transition-colors duration-200 transform rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700">
<p class="text-lg font-medium text-gray-800 dark:text-gray-100">Exterprise</p>
<h4 class="mt-2 text-4xl font-semibold text-gray-800 dark:text-gray-100">$199 <span class="text-base font-normal text-gray-600 dark:text-gray-400">/ Month</span></h4>
<p class="mt-4 text-gray-500 dark:text-gray-300">For most businesses that want to optimaize web queries.</p>
<div class="mt-8 space-y-8">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-700 dark:text-gray-300">All limited links</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-700 dark:text-gray-300">Own analytics platform</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-700 dark:text-gray-300">Chat support</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-700 dark:text-gray-300">Optimize hashtags</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-500" 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>
<span class="mx-4 text-gray-700 dark:text-gray-300">Unlimited users</span>
</div>
</div>
<button class="w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">
Choose plan
</button>
</div>
</div>
</div>
</section>
<!-- pricing 15 end -->
<!-- pricing 16 start -->
<section class="section_divider">
<div>Pricing 16</div>
</section>
<section class="text-gray-600 body-font dark:bg-gray-800">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-20">
<h1 class="sm:text-4xl text-3xl font-medium title-font mb-2 text-gray-900 dark:text-gray-300">Pricing</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base dark:text-gray-300">Banh mi cornhole echo park skateboard authentic crucifix neutra tilde lyft biodiesel artisan direct trade mumblecore 3 wolf moon twee</p>
</div>
<div class="lg:w-2/3 w-full mx-auto overflow-auto">
<table class="table-auto w-full text-left whitespace-no-wrap">
<thead>
<tr>
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tl rounded-bl">Plan</th>
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">Speed</th>
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">Storage</th>
<th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">Price</th>
<th class="w-10 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tr rounded-br"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-4 py-3 dark:text-gray-300" >Start</td>
<td class="px-4 py-3 dark:text-gray-300">5 Mb/s</td>
<td class="px-4 py-3 dark:text-gray-300">15 GB</td>
<td class="px-4 py-3 text-lg text-gray-900 dark:text-gray-100">Free</td>
<td class="w-10 text-center">
<input name="plan" type="radio">
</td>
</tr>
<tr>
<td class="border-t-2 border-gray-200 dark:text-gray-300 px-4 py-3">Pro</td>
<td class="border-t-2 border-gray-200 dark:text-gray-300 px-4 py-3">25 Mb/s</td>
<td class="border-t-2 border-gray-200 dark:text-gray-300 px-4 py-3">25 GB</td>
<td class="border-t-2 border-gray-200 dark:text-gray-100 px-4 py-3 text-lg text-gray-900">$24</td>
<td class="border-t-2 border-gray-200 dark:text-gray-300 w-10 text-center">
<input name="plan" type="radio">
</td>
</tr>
<tr>
<td class="border-t-2 border-gray-200 dark:text-gray-300 px-4 py-3">Business</td>
<td class="border-t-2 border-gray-200 dark:text-gray-300 px-4 py-3">36 Mb/s</td>
<td class="border-t-2 border-gray-200 dark:text-gray-300 px-4 py-3">40 GB</td>
<td class="border-t-2 border-gray-200 dark:text-gray-100 px-4 py-3 text-lg text-gray-900">$50</td>
<td class="border-t-2 border-gray-200 dark:text-gray-300 w-10 text-center">
<input name="plan" type="radio">
</td>
</tr>
<tr>
<td class="border-t-2 border-b-2 border-gray-200 dark:text-gray-300 px-4 py-3">Exclusive</td>
<td class="border-t-2 border-b-2 border-gray-200 dark:text-gray-300 px-4 py-3">48 Mb/s</td>
<td class="border-t-2 border-b-2 border-gray-200 dark:text-gray-300 px-4 py-3">120 GB</td>
<td class="border-t-2 border-b-2 border-gray-200 dark:text-gray-100 px-4 py-3 text-lg text-gray-900">$72</td>
<td class="border-t-2 border-b-2 border-gray-200 dark:text-gray-300 w-10 text-center">
<input name="plan" type="radio">
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex pl-4 mt-4 lg:w-2/3 w-full mx-auto">
<a class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0">Learn More
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
<button class="flex ml-auto text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
</div>
</div>
</section>
<!-- pricing 16 end -->
<!-- start of script section -->