BASIC-LIBRARY / SECTION / PRICING
Pricing Four
Select Your Learning Path
Whether you're starting out or aiming to sharpen your skills, we offer content-rich bundles designed to help you make measurable progress.
Starter Kit
Beginner Guide
$29
$49
- PDF handbook
- Real-world tasks
- Community access
Complete Bundle
Full course + Extras
$49
$89
- Step-by-step guide
- Interactive lessons
- Downloadable templates
- 1-on-1 feedback
@import url("/template/basic-library/section/pricing/pricing-four/raw/styles.css");
<div
class="bg-white pt-6 pb-6 py-6 sm:pt-8 sm:pb-8 sm:py-8 lg:pt-12 lg:pb-12 lg:py-12"
>
<div
class="ml-auto mr-auto mx-auto max-w-screen-lg pl-4 pr-4 px-4 md:pl-8 md:pr-8 md:px-8"
>
<div class="mb-10 md:mb-16">
<h2
class="mb-4 text-center text-2xl font-bold text-gray-800 md:mb-6 lg:text-3xl"
>
Select Your Learning Path
</h2>
<p
class="ml-auto mr-auto mx-auto max-w-screen-md text-center text-gray-500 md:text-lg"
>
Whether you're starting out or aiming to sharpen your skills, we
offer content-rich bundles designed to help you make measurable
progress.
</p>
</div>
<div class="flex flex-wrap items-center justify-center gap-4 sm:gap-0">
<div
class="sm:rounded-r-none w-full rounded-lg bg-gray-800 pt-6 pr-6 pb-6 pl-6 sm:w-1/2 sm:pt-8 sm:pr-8 sm:pb-8 sm:pl-8 lg:w-1/3"
>
<div class="mb-4">
<h3 class="text-2xl font-semibold text-gray-100 sm:text-3xl">
Starter Kit
</h3>
<p class="text-gray-300">Beginner Guide</p>
</div>
<div class="space-x-2 mb-4">
<span class="text-4xl font-bold text-gray-100">$29</span>
<span class="line-through text-2xl text-gray-300">$49</span>
</div>
<ul class="space-y-2 mb-6 text-gray-300">
<li class="flex items-center gap-1.5">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 shrink-0"
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"
></path>
</svg>
<span class>PDF handbook</span>
</li>
<li class="flex items-center gap-1.5">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 shrink-0"
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"
></path>
</svg>
<span class>Real-world tasks</span>
</li>
<li class="flex items-center gap-1.5">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 shrink-0"
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"
></path>
</svg>
<span class>Community access</span>
</li>
</ul>
<a
href="#"
class="block transition duration-100 active:text-gray-300 rounded-lg bg-gray-500 pl-8 pr-8 px-8 pt-3 pb-3 py-3 text-center text-sm font-semibold text-gray-100 outline-none ring-indigo-300 hover:bg-gray-600 focus-visible:ring md:text-base"
>
Get the Starter Kit
</a>
</div>
<div
class="bg-gradient-to-tr from-indigo-500 to-violet-400 w-full rounded-lg pt-6 pr-6 pb-6 pl-6 shadow-xl sm:w-1/2 sm:pt-8 sm:pr-8 sm:pb-8 sm:pl-8"
>
<div
class="mb-4 flex flex-col items-start justify-between gap-4 lg:flex-row"
>
<div class>
<h3 class="text-2xl font-semibold text-white sm:text-3xl">
Complete Bundle
</h3>
<p class="text-indigo-100">Full course + Extras</p>
</div>
<span
class="order-first inline-block uppercase tracking-wider lg:order-none rounded-full bg-indigo-200 bg-opacity-50 pl-3 pr-3 px-3 pt-1 pb-1 py-1 text-xs font-semibold text-white"
>
Most popular
</span>
</div>
<div class="space-x-2 mb-4">
<span class="text-4xl font-bold text-white">$49</span>
<span class="line-through text-2xl text-indigo-100">$89</span>
</div>
<ul class="space-y-2 mb-6 text-indigo-100">
<li class="flex items-center gap-1.5">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 shrink-0"
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"
></path>
</svg>
<span class>Step-by-step guide</span>
</li>
<li class="flex items-center gap-1.5">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 shrink-0"
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"
></path>
</svg>
<span class>Interactive lessons</span>
</li>
<li class="flex items-center gap-1.5">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 shrink-0"
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"
></path>
</svg>
<span class>Downloadable templates</span>
</li>
<li class="flex items-center gap-1.5">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 shrink-0"
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"
></path>
</svg>
<span class>1-on-1 feedback</span>
</li>
</ul>
<a
href="#"
class="block transition duration-100 active:bg-indigo-400 rounded-lg bg-indigo-200 bg-opacity-50 pl-8 pr-8 px-8 pt-3 pb-3 py-3 text-center text-sm font-semibold text-white outline-none ring-indigo-300 hover:bg-indigo-300 focus-visible:ring md:text-base"
>
Get the Complete Bundle
</a>
</div>
</div>
</div>
</div>
© 2025 tailsections.com. All rights reserved