bootstrap-with-tailwind/source/_examples/pricing.html.twig

80 lines
2.1 KiB
Twig

---
title: Pricing
prices:
- name: Full
price: 0
features:
- 10 users included
- 2 GB of storage
- Email support
- Help center access
button:
text: Sign up for free
inverted: true
- name: Pro
price: 15
features:
- 20 users included
- 10 GB of storage
- Priority email support
- Help center access
button:
text: Get started
- name: Enterprise
price: 29
features:
- 30 users included
- 15 GB of storage
- Phone and email support
- Help center access
button:
text: Contact us
---
<section class="mt-16">
<div class="max-w-2xl mx-auto px-4 text-center">
<h1 class="text-5xl">{{ page.title }}</h1>
<p class="mt-4 text-xl leading-relaxed">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.</p>
</div>
</section>
<div class="max-w-5xl px-6 mt-8 mx-auto grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3">
{% for price in page.prices %}
<div class="max-w-sm w-full mx-auto border border-gray-300 overflow-hidden rounded-md shadow-md shadow-gray-200 text-center md:max-w-full">
<h2 class="px-4 py-3 text-2xl border-b border-gray-300 bg-gray-100">
{{ price.name }}
</h2>
<div class="p-6">
<p>
<span class="text-4xl">{{ price.price }}</span>
<span class="ml-1 text-3xl text-gray-600">
/ mo<span class="sr-only">nth</span>
</span>
</p>
<div class="mt-5">
<h3 class="sr-only">Features</h3>
<ul class="space-y-1">
{% for feature in price.features %}
<li>{{ feature }}</li>
{% endfor %}
</ul>
</div>
<div class="mt-7">
{% include 'button' with {
inverted: price.button.inverted,
shape: 'rounded',
size: 'large',
text: price.button.text,
type: 'primary'
} only %}
</div>
</div>
</div>
{% endfor %}
</div>