mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
38 lines
1.3 KiB
Plaintext
38 lines
1.3 KiB
Plaintext
---
|
|
import Icon from '@ui/Icon.astro'
|
|
import Button from '@ui/Button.astro'
|
|
---
|
|
|
|
<div class="card card-gradient card-gradient-love">
|
|
<div class="ribbon bg-pink">Featured</div>
|
|
<div class="card-body">
|
|
<div class="subheader text-pink">Professional</div>
|
|
<div class="d-flex align-items-baseline mt-5">
|
|
<div class="display-5">$199</div>
|
|
<div class="text-secondary">/ month</div>
|
|
</div>
|
|
<ul class="list-unstyled mt-6 space-y space-y-2">
|
|
<li class="d-flex gap-2">
|
|
<div><Icon name="check" color="success" /></div>
|
|
<div><strong>Unlimited</strong> target audience</div>
|
|
</li>
|
|
<li class="d-flex gap-2">
|
|
<div><Icon name="check" color="success" /></div>
|
|
<div><strong>1</strong> user account</div>
|
|
</li>
|
|
<li class="d-flex gap-2">
|
|
<div><Icon name="check" color="success" /></div>
|
|
<div><strong>100+</strong> video tutorials</div>
|
|
</li>
|
|
<li class="d-flex gap-2">
|
|
<div><Icon name="x" color="secondary" /></div>
|
|
<div class="text-secondary">Public displays</div>
|
|
</li>
|
|
</ul>
|
|
<p class="mt-4 text-secondary">This plan is perfect for small businesses and startups. It includes all the features you need to get started.</p>
|
|
<div class="mt-6">
|
|
<Button text="Purchase now" color="primary" block />
|
|
</div>
|
|
</div>
|
|
</div>
|