Fractal demo

Section: Centered 

<section class="section py-6 md:py-8 lg:py-10 xl:py-20">
    <div class="container">

        <header class="max-w-3xl mx-auto sm:text-center">
            <h2 class="text-2xl sm:text-3xl lg:text-4xl leading-9 font-bold mb-3">Key features</h2>
            <p class="text-lg text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta optio placeat quisquam minus rem omnis, aliquam consequatur at deleniti, laudantium fugiat ratione? Minima voluptatem, aliquam quod dolorem necessitatibus, blanditiis, itaque deleniti.</p>
        </header>

        <div class="mt-6 md:mt-8 lg:mt-10">
            <div class="space-y-8 sm:space-y-0 sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:gap-8 md:gap-10 lg:gap-12">
                <div class="feature">
                    <svg class="inline-block align-middle -mt-1 stroke-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#globe" />
                    </svg>

                    <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Competitive</h4>
                    <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quisquam suscipit culpa sit vero eius voluptate? Repellendus fugit beatae eveniet!</p>
                </div>
                <div class="feature">
                    <svg class="inline-block align-middle -mt-1 stroke-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#key" />
                    </svg>

                    <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Accessible</h4>
                    <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus doloribus reprehenderit fuga. Eligendi provident ipsa dolor, consequatur soluta obcaecati? Error!</p>
                </div>
                <div class="feature">
                    <svg class="inline-block align-middle -mt-1 stroke-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#user" />
                    </svg>

                    <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Personnal</h4>
                    <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita sequi cumque odio perspiciatis soluta iste voluptatem eveniet magni assumenda distinctio.</p>
                </div>
                <div class="feature">
                    <svg class="inline-block align-middle -mt-1 stroke-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#gift" />
                    </svg>

                    <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Approachable</h4>
                    <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quisquam suscipit culpa sit vero eius voluptate? Repellendus fugit beatae eveniet!</p>
                </div>
                <div class="feature">
                    <svg class="inline-block align-middle -mt-1 stroke-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#bulb" />
                    </svg>

                    <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Original</h4>
                    <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus doloribus reprehenderit fuga. Eligendi provident ipsa dolor, consequatur soluta obcaecati? Error!</p>
                </div>
                <div class="feature">
                    <svg class="inline-block align-middle -mt-1 stroke-current w-12 h-12 mb-2 text-teal-500" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#lightning" />
                    </svg>

                    <h4 class="text-lg md:text-xl lg:text-2xl font-medium mb-2">Fast</h4>
                    <p class="text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita sequi cumque odio perspiciatis soluta iste voluptatem eveniet magni assumenda distinctio.</p>
                </div>
            </div>

        </div>

        <div class="mt-6 md:mt-8 lg:mt-10 sm:text-center">
            <button type="button" class="inline-block
    px-8 py-3 font-medium text-center rounded-lg shadow hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 transition-ease-outw-full sm:w-auto text-white bg-pink-600 hover:bg-pink-500">
                Take the tour
            </button>

        </div>

    </div>
</section>
 
{% extends "@section-wrapper" %}

{% block content %}
    <header class="max-w-3xl mx-auto sm:text-center">
        <h2 class="text-2xl sm:text-3xl lg:text-4xl leading-9 font-bold mb-3">{{ title }}</h2>
        <p class="text-lg text-gray-600">{{ body }}</p>
    </header>

    {% if component %}
        <div class="mt-6 md:mt-8 lg:mt-10">
            {% render '@' + component.handle, component.context, true %}
        </div>
    {% endif %}

    {% if button %}
        <div class="mt-6 md:mt-8 lg:mt-10 sm:text-center">
            {% render '@button', button, true %}
        </div>
    {% endif %}
{% endblock %}
 
{
  "title": "Key features",
  "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta optio placeat quisquam minus rem omnis, aliquam consequatur at deleniti, laudantium fugiat ratione? Minima voluptatem, aliquam quod dolorem necessitatibus, blanditiis, itaque deleniti.",
  "component": {
    "handle": "features-grid",
    "context": {}
  },
  "button": {
    "label": "Take the tour",
    "class": "w-full sm:w-auto"
  }
}

No notes defined.