Add pricing example

source/_examples/pricing.html.twig

@@ -0,0 +1,80 @@
+---
+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>
+

source/_includes/button.html.twig

@@ -0,0 +1,11 @@
+{% set classes = [
+  'block border transition-colors ease-in-out duration-200',
+  shape == "rounded" ? "rounded-md",
+  shape == "square" ? "rounded-none",
+  size == 'large' ? "py-3 px-5 text-xl" : "py-2 px-5 text-lg",
+  type == "primary" and not inverted ? "bg-blue-500 border-blue-500 text-white hocus:bg-blue-600 hocus:text-white",
+  type == "primary" and inverted ? "bg-white border-blue-500 text-blue-600 hocus:bg-blue-600 hocus:text-white",
+  type == "secondary" ? "bg-gray-500 text-white hocus:bg-gray-600 hocus:text-white",
+] %}
+
+<a class="{{ classes|join(' ') }}" href="#0">{{ text }}</a>