tabler/preview/pages/_includes/marketing/sections/pricing.html

<section class="section{% if include.background %} section-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
	<div class="container">
		<div class="pricing">
			<div class="pricing-card">
				<h4 class="pricing-title">Free</h4>
				<div class="pricing-price">
					<span class="pricing-price-currency">$</span>99
					<div class="pricing-price-description">
						<div>per user</div>
						<div>per year</div>
					</div>
				</div>
				<ul class="pricing-features my-5">
					<li>
						{% include "ui/icon.html" icon="check" color="green" class="icon-inline me-1" %}Up to 5 developers
					</li>
					<li>
						{% include "ui/icon.html" icon="check" color="green" class="icon-inline me-1" %}All marketing + app components
					</li>
					<li>
						{% include "ui/icon.html" icon="check" color="green" class="icon-inline me-1" %}Figma UI Kit
					</li>
					<li>
						{% include "ui/icon.html" icon="check" color="green" class="icon-inline me-1" %}Lifetime free updates
					</li>
				</ul>
				<div class="pricing-btn"><a href="#" class="btn w-100">Get started</a></div>
			</div>
			<div class="pricing-card featured">
				<div class="pricing-label"><div class="badge bg-primary text-primary-fg">Popular</div></div>
				<h4 class="pricing-title">All features</h4>
				<div class="pricing-price">
					<span class="pricing-price-currency">$</span>199
					<div class="pricing-price-description">
						<div>per user</div>
						<div>per year</div>
					</div>
				</div>
				<ul class="pricing-features my-5">
					<li>
						{% include "ui/icon.html" icon="check" color="green" class="icon-inline me-1" %}Up to 5 developers
					</li>
					<li>
						{% include "ui/icon.html" icon="check" color="green" class="icon-inline me-1" %}All marketing + app components
					</li>
					<li>
						{% include "ui/icon.html" icon="check" color="green" class="icon-inline me-1" %}Figma UI Kit
					</li>
					<li>
						{% include "ui/icon.html" icon="check" color="green" class="icon-inline me-1" %}Lifetime free updates
					</li>
				</ul>
				<div class="pricing-btn"><a href="#" class="btn w-100 btn-primary">Get started</a></div>
			</div>
			<div class="pricing-card">
				<h4 class="pricing-title">Other</h4>
				<div class="pricing-price">
					<span class="pricing-price-currency">$</span>99
					<div class="pricing-price-description">
						<div>per user</div>
						<div>per year</div>
					</div>
				</div>
				<ul class="pricing-features my-5">
					<li>
						{% include "ui/icon.html" icon="check" color="green" class="icon-inline me-1" %}Up to 5 developers
					</li>
					<li>
						{% include "ui/icon.html" icon="check" color="green" class="icon-inline me-1" %}All marketing + app components
					</li>
					<li>
						{% include "ui/icon.html" icon="check" color="green" class="icon-inline me-1" %}Figma UI Kit
					</li>
					<li>
						{% include "ui/icon.html" icon="check" color="green" class="icon-inline me-1" %}Lifetime free updates
					</li>
				</ul>
				<div class="pricing-btn"><a href="#" class="btn w-100">Get started</a></div>
			</div>
		</div>
	</div>
</section>