FAQ sections

<!-- This example requires Tailwind CSS v2.0+ -->
<div class="">
    <div class="flex justify-center w-full py-4">
        <div class="font-bold text-3xl">{{ cms_heading('faq') }}</div>
    </div>
    <div class="grid grid-cols-12 md:gap-10 gap-y-4 md:p-10 p-5">
        <div class="md:col-span-4 col-span-12 border-b">
            <div class="font-bold text-xl">{{ cms_heading('faq-1') }}</div>
        </div>
        <div class="md:col-span-8 col-span-12 border-b">
           {{ cms_text('faq-1') }}
        </div>
        <div class="md:col-span-4 col-span-12 border-b">
            <div class="font-bold text-xl">{{ cms_heading('faq-2') }}</div>
        </div>
        <div class="md:col-span-8 col-span-12  border-b">
            {{ cms_text('faq-2') }}
        </div>
        <div class="md:col-span-4 col-span-12 border-b">
            <div class="font-bold text-xl">{{ cms_heading('faq-3') }}</div>
        </div>
        <div class="md:col-span-8 col-span-12  border-b">
            {{ cms_text('faq-3') }}
        </div>
        <div class="md:col-span-4 col-span-12 border-b">
            <div class="font-bold text-xl">{{ cms_heading('faq-4') }}</div>
        </div>
        <div class="md:col-span-8 col-span-12 border-b">
            {{ cms_text('faq-4') }}
        </div>
    </div>
</div>
<div class="max-w-7xl mx-auto">
    <div class="grid grid-cols-12 p-10">
        <div class="md:col-span-4 sm:col-span-6 col-span-12  p-3">
            <h2 class="font-bold text-3xl">{{ cms_heading('faq') }}</h2>
        </div>
        <div class="md:col-span-4 sm:col-span-6 col-span-12 p-3">
            <div class="font-bold text-xl">{{ cms_heading('faq-1') }}</div>
            {{ cms_text('faq-1') }}
        </div>
        <div class="md:col-span-4 sm:col-span-6 col-span-12 p-3">
            <div class="font-bold text-xl">{{ cms_heading('faq-2') }}</div>
            {{ cms_text('faq-2') }}
        </div>
        <div class="md:col-span-4 sm:col-span-6 col-span-12 p-3">
            <div class="font-bold text-xl">{{ cms_heading('faq-3') }}</div>
            {{ cms_text('faq-3') }}
        </div>
        <div class="md:col-span-4 sm:col-span-6 col-span-12 p-3">
            <div class="font-bold text-xl">{{ cms_heading('faq-4') }}</div>
            {{ cms_text('faq-4') }}
        </div>
        <div class="md:col-span-4 sm:col-span-6 col-span-12 p-3">
            <div class="font-bold text-xl">{{ cms_heading('faq-5') }}</div>
            {{ cms_text('faq-5') }}
        </div>
        <div class="md:col-span-4 sm:col-span-6 col-span-12 p-3">
            <div class="font-bold text-xl">{{ cms_heading('faq-6') }}</div>
            {{ cms_text('faq-6') }}
        </div>
    </div>
</div>