The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<div class="xl:container m-auto px-6 py-20 md:px-12 lg:px-20">
<div class="m-auto text-center lg:w-8/12 xl:w-7/12">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white md:text-4xl">
A Tailus Blocks subscription gives you access to our components and more.
</h2>
</div>
<div
class="m-auto mt-12 items-center justify-center -space-y-4 md:flex md:space-y-0 md:-space-x-4 xl:w-10/12"
>
<div class="group relative z-10 -mx-4 md:mx-0 md:w-6/12 lg:w-5/12">
<div
aria-hidden="true"
class="absolute top-0 h-full w-full rounded-3xl border border-gray-100 dark:border-gray-700 dark:shadow-none bg-white dark:bg-gray-800 shadow-2xl shadow-gray-600/10 transition duration-500 group-hover:scale-105"
></div>
<div class="relative space-y-6 p-8 sm:p-12">
<h3 class="text-center text-3xl font-semibold text-gray-700 dark:text-white">Organisation</h3>
<div>
<div class="relative flex justify-around">
<div class="flex items-end">
<span class="leading-0 text-8xl font-bold text-gray-800 dark:text-white">35</span>
<div class="pb-2">
<span class="block text-2xl font-bold text-gray-700 dark:text-white">%</span>
<span class="block text-xl font-bold text-primary">Off</span>
</div>
</div>
</div>
</div>
<ul role="list" class="m-auto w-max space-y-4 py-6 text-gray-600 dark:text-gray-300">
<li class="space-x-2">
<span class="font-semibold text-primary">✓</span>
<span>First premium advantage</span>
</li>
<li class="space-x-2">
<span class="font-semibold text-primary">✓</span>
<span>Second advantage weekly</span>
</li>
<li class="space-x-2">
<span class="font-semibold text-primary">✓</span>
<span>Third advantage donate to project</span>
</li>
</ul>
<p
class="mt-6 flex items-center justify-center space-x-4 text-center text-lg text-gray-600 dark:text-gray-300"
>
<span>Call us at</span>
<a href="tel:+24300" class="flex items-center space-x-2 text-primary">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="w-6"
viewBox="0 0 16 16"
>
<path
d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"
/>
</svg>
<span class="font-semibold">+1 000 000</span>
</a>
<span>or</span>
</p>
<a href="mailto:" class="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95">
<span class="relative text-base font-semibold text-white dark:text-dark">Send us an Email</span>
</a>
</div>
</div>
<div class="group relative md:w-6/12 lg:w-7/12">
<div
aria-hidden="true"
class="absolute top-0 h-full w-full rounded-3xl border border-gray-100 dark:border-gray-700 dark:shadow-none bg-white dark:bg-gray-800 shadow-2xl shadow-gray-600/10 transition duration-500 group-hover:scale-105"
></div>
<div class="relative p-6 pt-16 md:rounded-r-2xl md:p-8 md:pl-12 lg:p-16 lg:pl-20">
<ul role="list" class="space-y-4 py-6 text-gray-600 dark:text-gray-300">
<li class="space-x-2">
<span class="font-semibold text-primary">✓</span>
<span>First premium advantage</span>
</li>
<li class="space-x-2">
<span class="font-semibold text-primary">✓</span>
<span>Second advantage weekly</span>
</li>
<li class="space-x-2">
<span class="font-semibold text-primary">✓</span>
<span>Third advantage donate to project</span>
</li>
<li class="space-x-2">
<span class="font-semibold text-primary">✓</span>
<span>Fourth, access to all components weekly</span>
</li>
</ul>
<p class="text-gray-700 dark:text-white">
Team can be any size, and you can add or switch members as needed. Companies using
our platform include:
</p>
<div class="mt-6 flex justify-between gap-6">
<img
class="w-16 lg:w-24"
src="images/clients/airbnb.svg"
loading="lazy"
alt="airbnb"
/>
<img
class="w-8 lg:w-16"
src="images/clients/bissell.svg"
loading="lazy"
alt="bissell"
/>
<img class="w-6 lg:w-12" src="images/clients/ge.svg" loading="lazy" alt="ge" />
<img
class="w-20 lg:w-28"
src="images/clients/microsoft.svg"
loading="lazy"
alt="microsoft"
/>
</div>
</div>
</div>
</div>
</div>
The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<div class="xl:container m-auto px-6 py-20 md:px-12 lg:px-20">
<div class="m-auto text-center lg:w-8/12 xl:w-7/12">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white md:text-4xl">
A Tailus Blocks subscription gives you access to our components and more.
</h2>
</div>
<div
class="m-auto mt-12 items-center justify-center space-y-6 lg:flex lg:space-y-0 lg:space-x-6 xl:w-10/12"
>
<div class="group relative z-10 mx-auto sm:w-7/12 lg:w-4/12">
<div
aria-hidden="true"
class="absolute top-0 h-full w-full rounded-3xl border border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-2xl shadow-gray-600/10 dark:shadow-none transition duration-500 group-hover:scale-105 lg:group-hover:scale-110"
></div>
<div class="relative space-y-8 p-8">
<div class="flex items-center justify-between">
<h5 class="text-xl font-semibold text-gray-700 dark:text-white">Monthly</h5>
<div class="relative flex justify-around">
<div class="flex">
<span class="-ml-6 text-xl font-bold text-sky-500">$</span>
<span class="leading-0 text-4xl font-bold text-gray-800 dark:text-white">19</span>
</div>
</div>
</div>
<img
src="images/tanzanite.webp"
width="512"
height="512"
class="m-auto w-16"
alt="tanzanite illustration"
/>
<p class="text-center text-gray-600 dark:text-gray-300">
If you only require access for one developer, this may be the plan for you.
</p>
<button class="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-sky-50 before:border before:border-sky-500 dark:before:border-gray-600 dark:before:bg-gray-700 before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95">
<span class="relative text-base font-semibold text-sky-600 dark:text-white">Get Started</span>
</button>
</div>
</div>
<div class="group relative m-auto md:w-10/12 lg:w-8/12">
<div
aria-hidden="true"
class="absolute top-0 h-full w-full rounded-3xl border border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-2xl shadow-gray-600/10 dark:shadow-none transition duration-500 group-hover:scale-105 lg:group-hover:scale-110"
></div>
<div class="relative sm:flex">
<div class="space-y-8 p-8 pb-20 sm:w-7/12 sm:pb-8">
<div class="flex items-center justify-between">
<h5 class="text-xl font-semibold text-gray-700 dark:text-white">Complete pack</h5>
<div class="relative flex justify-around">
<div class="flex">
<span class="-ml-6 text-xl font-bold text-sky-500">$</span>
<span class="leading-0 text-4xl font-bold text-gray-800 dark:text-white">1900</span>
</div>
</div>
</div>
<img
src="images/premium.webp"
width="512"
height="512"
class="m-auto w-16"
alt="premium illustration"
/>
<p class="text-center text-gray-600 dark:text-gray-300">
Wire your account to support 5 developers with a year's worth of unlimited access
to tailus blocks!
</p>
<div class="absolute inset-x-0 bottom-6 w-full px-6 sm:static sm:px-0">
<button class="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95">
<span class="relative text-base font-semibold text-white dark:text-dark">Start plan</span>
</button>
</div>
</div>
<div class="-mt-16 pb-20 sm:mt-0 sm:w-5/12 sm:pb-0">
<div
class="relative h-full before:absolute before:left-0 before:top-1 before:my-auto before:h-0.5 before:w-full before:rounded-full before:bg-gray-200 dark:before:bg-gray-700 sm:pt-0 sm:before:inset-y-0 sm:before:h-[85%] sm:before:w-0.5"
>
<div class="relative -mt-1 h-full overflow-x-auto pt-7 pb-6 sm:-ml-1 sm:pl-1">
<ul
class="flex h-full w-max justify-center space-x-2 px-6 sm:w-full sm:flex-col sm:space-x-0 sm:space-y-6 sm:px-8"
>
<li>
<div class="relative">
<input checked hidden class="peer" type="radio" name="devs" id="devs20" />
<label
for="devs20"
class="block w-full cursor-pointer rounded-full bg-sky-50 dark:bg-gray-700 py-2 px-4 text-center text-sky-800 dark:text-sky-300 peer-checked:text-primary peer-checked:ring-1 peer-checked:ring-primary"
>
<span class="mx-auto text-sm font-semibold">20 developers</span>
</label>
<div
aria-hidden="true"
class="absolute inset-x-0 top-[-2.20rem] z-[1] mx-auto h-6 w-6 scale-0 rounded-full border-8 border-white dark:border-gray-800 bg-primary transition peer-checked:scale-100 sm:inset-y-0 sm:left-[-2.70rem] sm:my-auto sm:ml-0"
></div>
</div>
</li>
<li>
<div class="relative">
<input hidden class="peer" type="radio" name="devs" id="devs15" />
<label
for="devs15"
class="block cursor-pointer rounded-full bg-sky-50 dark:bg-gray-700 py-2 px-4 text-center text-sky-800 dark:text-sky-300 peer-checked:text-primary peer-checked:ring-1 peer-checked:ring-primary"
>
<span class="mx-auto block w-max text-sm font-semibold"
>15 developers</span
>
</label>
<div
aria-hidden="true"
class="absolute inset-x-0 top-[-2.20rem] z-[1] mx-auto h-6 w-6 scale-0 rounded-full border-8 border-white dark:border-gray-800 bg-primary transition peer-checked:scale-100 sm:inset-y-0 sm:left-[-2.70rem] sm:my-auto sm:ml-0"
></div>
</div>
</li>
<li>
<div class="relative">
<input hidden class="peer" type="radio" name="devs" id="devs10" />
<label
for="devs10"
class="block cursor-pointer rounded-full bg-sky-50 dark:bg-gray-700 py-2 px-4 text-center text-sky-800 dark:text-sky-300 peer-checked:text-primary peer-checked:ring-1 peer-checked:ring-primary"
>
<span class="mx-auto block w-max text-sm font-semibold"
>10 developers</span
>
</label>
<div
aria-hidden="true"
class="absolute inset-x-0 top-[-2.20rem] z-[1] mx-auto h-6 w-6 scale-0 rounded-full border-8 border-white dark:border-gray-800 bg-primary transition peer-checked:scale-100 sm:inset-y-0 sm:left-[-2.70rem] sm:my-auto sm:ml-0"
></div>
</div>
</li>
<li>
<div class="relative">
<input hidden class="peer" type="radio" name="devs" id="devs5" />
<label
for="devs5"
class="block cursor-pointer rounded-full bg-sky-50 dark:bg-gray-700 py-2 px-4 text-center text-sky-800 dark:text-sky-300 peer-checked:text-primary peer-checked:ring-1 peer-checked:ring-primary"
>
<span class="mx-auto block w-max text-sm font-semibold"
>5 developers</span
>
</label>
<div
aria-hidden="true"
class="absolute inset-x-0 top-[-2.20rem] z-[1] mx-auto h-6 w-6 scale-0 rounded-full border-8 border-white dark:border-gray-800 bg-primary transition peer-checked:scale-100 sm:inset-y-0 sm:left-[-2.70rem] sm:my-auto sm:ml-0"
></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<div class="xl:container m-auto px-6 py-20 md:px-12 lg:px-20">
<div class="m-auto text-center lg:w-7/12">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white md:text-4xl">
A Tailus Blocks subscription gives you access to our components and more.
</h2>
</div>
<div class="mt-12 grid items-center gap-6 md:grid-cols-2 lg:flex lg:space-x-8">
<div class="group relative md:col-span-1 lg:w-[32%]">
<div
aria-hidden="true"
class="absolute top-0 h-full w-full rounded-3xl border border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-2xl shadow-gray-600/10 dark:shadow-none transition duration-500 group-hover:scale-105 lg:group-hover:scale-110"
></div>
<div class="relative space-y-8 p-8">
<h3 class="text-center text-3xl font-semibold text-gray-700 dark:text-white">Monthly</h3>
<div class="relative flex justify-around">
<div class="flex">
<span class="-ml-6 mt-2 text-3xl font-bold text-primary">$</span>
<span class="leading-0 text-8xl font-bold text-gray-800 dark:text-white">19</span>
</div>
<span class="absolute right-9 bottom-2 text-xl font-bold text-primary"
>/ Month</span
>
</div>
<ul role="list" class="m-auto w-max space-y-4 pb-6 text-gray-600 dark:text-gray-300">
<li class="space-x-2">
<span class="font-semibold text-primary">✓</span>
<span>First premium advantage</span>
</li>
<li class="space-x-2">
<span class="font-semibold text-primary">✓</span>
<span>Second premium advantage</span>
</li>
<li class="space-x-2">
<span class="font-semibold text-primary">✓</span>
<span>Third advantage</span>
</li>
</ul>
<button class="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95">
<span class="relative text-base font-semibold text-white dark:text-dark">Start plan</span>
</button>
</div>
</div>
<div class="group relative row-start-1 md:col-span-2 lg:w-[36%]">
<div
aria-hidden="true"
class="absolute top-0 h-full w-full rounded-3xl border border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-2xl shadow-gray-600/10 dark:shadow-none transition duration-500 group-hover:scale-105 lg:group-hover:scale-110"
></div>
<div class="relative space-y-8 p-8">
<h3 class="text-center text-3xl font-semibold text-gray-700 dark:text-white">Annual</h3>
<div class="overflow-hidden">
<div class="-mr-20 flex items-end justify-center">
<div class="flex">
<span class="-ml-6 mt-2 text-3xl font-bold text-primary">$</span>
<span class="leading-0 text-8xl font-bold text-gray-800 dark:text-white">15</span>
</div>
<div class="mb-2">
<span class="block text-xl font-bold text-gray-500 dark:text-gray-400">.56</span>
<span class="block text-xl font-bold text-primary">/ Month</span>
</div>
</div>
<div class="text-center text-2xl font-medium">
<span class="text-gray-400 line-through">$234</span>
<span class="font-semibold text-gray-700 dark:text-white">$190</span>
</div>
<span class="block text-center text-xs uppercase text-primary">BILLED YEARLY</span>
<span
class="m-auto mt-4 block w-max rounded-full bg-gradient-to-r from-yellow-300 to-pink-300 px-4 py-1 text-sm font-medium text-yellow-900"
>1 Discount applied</span
>
</div>
<ul role="list" class="m-auto w-max space-y-4 pb-6 text-gray-600 dark:text-gray-300">
<li class="space-x-2">
<span class="font-semibold text-primary">✓</span>
<span>First premium advantage</span>
</li>
<li class="space-x-2">
<span class="font-semibold text-primary">✓</span>
<span>Second premium advantage</span>
</li>
<li class="space-x-2">
<span class="font-semibold text-primary">✓</span>
<span>Third advantage</span>
</li>
<li class="space-x-2">
<span class="font-semibold text-primary">✓</span>
<span>Fourth organizations advantage</span>
</li>
</ul>
<button class="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95">
<span class="relative text-base font-semibold text-white dark:text-dark">Start plan</span>
</button>
</div>
</div>
<div class="group relative md:col-span-1 lg:w-[32%]">
<div
aria-hidden="true"
class="absolute top-0 h-full w-full rounded-3xl border border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-2xl shadow-gray-600/10 dark:shadow-none transition duration-500 group-hover:scale-105 lg:group-hover:scale-110"
></div>
<div class="relative space-y-8 p-8">
<h3 class="text-center text-3xl font-semibold text-gray-700 dark:text-white">Free</h3>
<div class="relative flex justify-around">
<div class="flex">
<span class="-ml-2 mt-2 text-3xl font-bold text-primary">$</span>
<span class="leading-0 text-8xl font-bold text-gray-800 dark:text-white">0</span>
</div>
</div>
<ul role="list" class="m-auto w-max space-y-4 pb-6 text-gray-600 dark:text-gray-300">
<li class="space-x-2">
<span class="font-semibold text-primary">✓</span>
<span>First premium advantage</span>
</li>
<li class="space-x-2">
<span class="font-semibold text-primary">✓</span>
<span>Second premium advantage</span>
</li>
<li class="space-x-2">
<span class="font-semibold text-primary">✓</span>
<span>Third advantage</span>
</li>
</ul>
<button class="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-sky-50 before:border before:border-sky-500 dark:before:border-gray-600 dark:before:bg-gray-700 before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95">
<span class="relative text-base font-semibold text-sky-600 dark:text-white">Get Started</span>
</button>
</div>
</div>
</div>
</div>
The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.
<div class="xl:container m-auto px-6 py-20 md:px-12 lg:px-20 xl:px-0">
<div class="m-auto text-center">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white md:text-4xl">A plan for everyone</h2>
</div>
<div class="m-auto mt-12">
<div class="relative z-10">
<div class="relative overflow-auto p-6">
<table class="w-full border-t border-gray-100 dark:border-gray-700">
<thead>
<tr>
<td class="p-4 sm:sticky">
</td>
<td class="p-8 space-y-8">
<img src="images/pro.webp" class="h-12 w-auto" alt="organization icon" width="" height="">
<div class="space-y-4">
<h4 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Starter</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Delectus natus illum in, iste ut facilis ex sit culpa fuga dolor atque? Quis.</p>
</div>
<h3 class="text-4xl text-gray-900 dark:text-white font-bold flex"><span class="text-lg text-gray-500">$</span>15 <span class="ml-4 h-max mt-auto text-lg text-gray-500 font-light">/ Month</span> </h3>
<button class="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-sky-50 before:border before:border-sky-500 dark:before:border-gray-700 dark:before:bg-gray-800 before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95">
<span class="relative text-base font-semibold text-sky-600 dark:text-white">Get Started</span>
</button>
</td>
<td class="p-8 space-y-8">
<img src="images/team.webp" class="h-12 w-auto" alt="team icon" width="" height="">
<div class="space-y-4">
<h4 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Team</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Delectus natus illum vel veritatis in, iste ut facilis ex sit culpa fuga dolor atque? Quis.</p>
</div>
<h3 class="text-4xl text-gray-900 dark:text-white font-bold flex"><span class="text-lg text-gray-500">$</span>189 <span class="ml-4 h-max mt-auto text-lg text-gray-500 font-light">/ Month</span> </h3>
<button class="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary dark:before:bg-white before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95">
<span class="relative text-base font-semibold text-white dark:text-dark">Buy Now</span>
</button>
</td>
<td class="p-8 space-y-8">
<img src="images/organization.webp" class="h-12 w-auto" alt="organization icon" width="" height="">
<div class="space-y-4">
<h4 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Organization</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Delectus natus illum vel veritatis in, iste ut facilis ex sit culpa fuga dolor atque? Quis.</p>
</div>
<h3 class="text-4xl text-gray-900 dark:text-white font-bold flex"><span class="text-lg text-gray-500">$</span>379 <span class="ml-4 h-max mt-auto text-lg text-gray-500 font-light">/ Month</span> </h3>
<button class="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary dark:before:bg-white before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95">
<span class="relative text-base font-semibold text-white dark:text-dark">Buy Now</span>
</button>
</td>
</tr>
</thead>
<tbody>
<tr>
<td
class="left-0 border border-sky-100 dark:border-gray-700 bg-sky-50 dark:bg-gray-800 p-4 font-medium text-sky-900 dark:text-gray-200 sm:sticky"
>
<span class="block w-max"> Favorite profile </span>
</td>
<td class="border border-gray-100 dark:border-gray-700 p-4 text-center text-green-500">✓</td>
<td class="border border-gray-100 dark:border-gray-700 p-4 text-center text-green-500">✓</td>
<td class="border border-gray-100 dark:border-gray-700 p-4 text-center text-green-500">✓</td>
</tr>
<tr>
<td
class="left-0 border border-sky-100 dark:border-gray-700 bg-sky-50 dark:bg-gray-800 p-4 font-medium text-sky-900 dark:text-gray-200 sm:sticky"
>
<span class="block w-max"> All courses and videos </span>
</td>
<td class="border border-gray-100 dark:border-gray-700 text-center text-2xl text-red-500">×</td>
<td class="border border-gray-100 dark:border-gray-700 text-center text-2xl text-red-500">×</td>
<td class="border border-gray-100 dark:border-gray-700 p-4 text-center text-green-500">✓</td>
</tr>
<tr>
<td
class="left-0 border border-gray-100 dark:border-gray-700 bg-sky-50 dark:bg-gray-800 p-4 font-medium text-sky-900 dark:text-gray-200 sm:sticky"
>
<span class="block w-max"> Questions & Answers (soon) </span>
</td>
<td class="border border-gray-100 dark:border-gray-700 p-4 text-center text-green-500">✓</td>
<td class="border border-gray-100 dark:border-gray-700 p-4 text-center text-green-500">✓</td>
<td class="border border-gray-100 dark:border-gray-700 p-4 text-center text-green-500">✓</td>
</tr>
<tr>
<td
class="left-0 border border-gray-100 dark:border-gray-700 bg-sky-50 dark:bg-gray-800 p-4 font-medium text-sky-900 dark:text-gray-200 sm:sticky"
>
<span class="block w-max"> Source files, ePub </span>
</td>
<td class="border border-gray-100 dark:border-gray-700 text-center text-2xl text-red-500">×</td>
<td class="border border-gray-100 dark:border-gray-700 p-4 text-center text-green-500">✓</td>
<td class="border border-gray-100 dark:border-gray-700 p-4 text-center text-green-500">✓</td>
</tr>
<tr>
<td
class="left-0 border border-gray-100 dark:border-gray-700 bg-sky-50 dark:bg-gray-800 p-4 font-medium text-sky-900 dark:text-gray-200 sm:sticky"
>
<span class="block w-max"> UI templates, icons, illustrations </span>
</td>
<td class="border border-gray-100 dark:border-gray-700 p-4 text-center text-gray-600 dark:text-gray-300">
<span class="m-auto block w-max"> Limited to 5 </span>
</td>
<td class="border border-gray-100 dark:border-gray-700 p-4 text-center text-green-500">✓</td>
<td class="border border-gray-100 dark:border-gray-700 p-4 text-center text-green-500">✓</td>
</tr>
<tr>
<td
class="left-0 border border-gray-100 dark:border-gray-700 bg-sky-50 dark:bg-gray-800 p-4 font-medium text-sky-900 dark:text-gray-200 sm:sticky"
>
<span class="block w-max"> Premium tutorials </span>
</td>
<td class="border border-gray-100 dark:border-gray-700 text-center text-2xl text-red-500">×</td>
<td class="border border-gray-100 dark:border-gray-700 p-4 text-center text-green-500">✓</td>
<td class="border border-gray-100 dark:border-gray-700 p-4 text-center text-green-500">✓</td>
</tr>
<tr>
<td
class="left-0 border border-gray-100 dark:border-gray-700 bg-sky-50 dark:bg-gray-800 p-4 font-medium text-sky-900 dark:text-gray-200 sm:sticky"
>
<span class="block w-max"> Commercial use </span>
</td>
<td class="border border-gray-100 dark:border-gray-700 text-center text-2xl text-red-500">×</td>
<td class="border border-gray-100 dark:border-gray-700 text-center text-2xl text-red-500">×</td>
<td class="border border-gray-100 dark:border-gray-700 p-4 text-center text-green-500">✓</td>
</tr>
<tr>
<td
class="left-0 border border-gray-100 dark:border-gray-700 bg-sky-50 dark:bg-gray-800 p-4 font-medium text-sky-900 dark:text-gray-200 sm:sticky"
>
<span class="block w-max"> Manage team and see progress </span>
</td>
<td class="border border-gray-100 dark:border-gray-700 text-center text-2xl text-red-500">×</td>
<td class="border border-gray-100 dark:border-gray-700 text-center text-2xl text-red-500">×</td>
<td class="border border-gray-100 dark:border-gray-700 p-4 text-center text-green-500">✓</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>