mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Don't use tabs in editor

Browse Source
This commit is contained in:
prototypa
2023-01-09 21:44:06 -05:00
parent 58484dfca8
commit f641767078
56 changed files with 2217 additions and 2203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

494
src/components/widgets/Pricing.astro
View File

@ -3,272 +3,272 @@
<!-- Pricing -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Title -->
<div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Pricing</h2>
<p class="mt-1 text-gray-600 dark:text-gray-400">
Whatever your status, our offers evolve according to your needs.
</p>
</div>
<!-- End Title -->
<!-- Title -->
<div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">Pricing</h2>
<p class="mt-1 text-gray-600 dark:text-gray-400">
Whatever your status, our offers evolve according to your needs.
</p>
</div>
<!-- End Title -->
<!-- Grid -->
<div class="mt-12 grid sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:items-center">
<!-- Card -->
<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Free</h4>
<span class="mt-7 font-bold text-5xl text-gray-800 dark:text-gray-200">Free</span>
<p class="mt-2 text-sm text-gray-500">Forever free</p>
<!-- Grid -->
<div class="mt-12 grid sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:items-center">
<!-- Card -->
<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Free</h4>
<span class="mt-7 font-bold text-5xl text-gray-800 dark:text-gray-200">Free</span>
<p class="mt-2 text-sm text-gray-500">Forever free</p>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 1 user</span>
</li>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 1 user</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
<!-- Card -->
<div class="flex flex-col border-2 border-blue-600 text-center shadow-xl rounded-xl p-8 dark:border-blue-500">
<p class="mb-3">
<span
class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs uppercase font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-white"
>Most popular</span
>
</p>
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Startup</h4>
<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
<span class="font-bold text-2xl -mr-2">$</span>
39
</span>
<p class="mt-2 text-sm text-gray-500">All the basics for starting a new business</p>
<!-- Card -->
<div class="flex flex-col border-2 border-blue-600 text-center shadow-xl rounded-xl p-8 dark:border-blue-500">
<p class="mb-3">
<span
class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs uppercase font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-white"
>Most popular</span
>
</p>
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Startup</h4>
<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
<span class="font-bold text-2xl -mr-2">$</span>
39
</span>
<p class="mt-2 text-sm text-gray-500">All the basics for starting a new business</p>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 2 users</span>
</li>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 2 users</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
<!-- Card -->
<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Team</h4>
<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
<span class="font-bold text-2xl -mr-2">$</span>
89
</span>
<p class="mt-2 text-sm text-gray-500">Everything you need for a growing business</p>
<!-- Card -->
<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Team</h4>
<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
<span class="font-bold text-2xl -mr-2">$</span>
89
</span>
<p class="mt-2 text-sm text-gray-500">Everything you need for a growing business</p>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 5 users</span>
</li>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 5 users</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
<!-- Card -->
<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Enterprise</h4>
<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
<span class="font-bold text-2xl -mr-2">$</span>
149
</span>
<p class="mt-2 text-sm text-gray-500">Advanced features for scaling your business</p>
<!-- Card -->
<div class="flex flex-col border border-gray-200 text-center rounded-xl p-8 dark:border-gray-700">
<h4 class="font-medium text-lg text-gray-800 dark:text-gray-200">Enterprise</h4>
<span class="mt-5 font-bold text-5xl text-gray-800 dark:text-gray-200">
<span class="font-bold text-2xl -mr-2">$</span>
149
</span>
<p class="mt-2 text-sm text-gray-500">Advanced features for scaling your business</p>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 10 users</span>
</li>
<ul class="mt-7 space-y-2.5 text-sm">
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> 10 users</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Plan features</span>
</li>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<li class="flex space-x-2">
<svg
class="flex-shrink-0 h-5 w-5 text-blue-600"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5219 4.0949C11.7604 3.81436 12.181 3.78025 12.4617 4.01871C12.7422 4.25717 12.7763 4.6779 12.5378 4.95844L6.87116 11.6251C6.62896 11.91 6.1998 11.94 5.9203 11.6916L2.9203 9.02494C2.64511 8.78033 2.62032 8.35894 2.86493 8.08375C3.10955 7.80856 3.53092 7.78378 3.80611 8.02839L6.29667 10.2423L11.5219 4.0949Z"
fill="currentColor"></path>
</svg>
<span class="text-gray-800 dark:text-gray-400"> Product support</span>
</li>
</ul>
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
</div>
<!-- End Grid -->
<button class="mt-5 btn">Sign up</button>
</div>
<!-- End Card -->
</div>
<!-- End Grid -->
</div>
<!-- End Pricing -->