Simple Features ection Using Tailwind UI

A Features Section crafted with Tailwind presents a visually engaging and organized showcase of product or service features, enabling users to quickly grasp the key benefits and functionalities.
features
Loading component...
index.html
69 lines
<!-- Component Inspired design by https://acquire.io/ -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
    href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
    rel="stylesheet">

<style>
    body {
        font-family: 'Plus Jakarta Sans', sans-serif;
    }
</style>

<section class="py-20 bg-white">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap mt-12 -mx-4">
            <div class="w-full px-4 mb-8 md:w-1/3">
                <div class="pb-8 bg-white border-t border-black">
                    <div class="flex items-start justify-between mb-6">
                        <img class="w-24 h-24 border-b border-black border-x"
                            src="https://assets-global.website-files.com/637610b6e8be874e65dadb0d/649eff209aef9fa62eff8a6b_01.png"
                            alt="">
                        <div class="p-2 mb-4 text-base font-bold uppercase border-b border-black border-x">
                            Simplify</div>
                    </div>
                    <div class="px-4 mb-4">
                        <h3 class="mb-4 text-2xl font-bold">SLAs + Alerts</h3>
                        <p class="mb-4 text-gray-600">Use SLAs to maintain customer service response times,
                            handle/resolution time.</p>
                    </div>
                </div>
            </div>
            <div class="w-full px-4 mb-8 md:w-1/3">
                <div class="pb-8 bg-white border-t border-black">
                    <div class="flex items-start justify-between mb-6">
                        <img class="w-24 h-24 border-b border-black border-x"
                            src="https://assets-global.website-files.com/637610b6e8be874e65dadb0d/649eff20a0f423d754a0e0cb_01-1.png"
                            alt="">
                        <div class="p-2 mb-4 text-base font-bold uppercase border-b border-black border-x">
                            ENGAGE</div>
                    </div>
                    <div class="px-4 mb-4">
                        <h3 class="mb-4 text-2xl font-bold">Prioritization</h3>
                        <p class="mb-4 text-gray-600">Prioritize customers based on type, wait times, custom attributes
                            etc.</p>
                    </div>
                </div>
            </div>

            <div class="w-full px-4 mb-8 md:w-1/3">
                <div class="pb-8 bg-white border-t border-black">
                    <div class="flex items-start justify-between mb-6">
                        <img class="w-24 h-24 border-b border-black border-x"
                            src="https://assets-global.website-files.com/637610b6e8be874e65dadb0d/649f04bdbd6355ca336bda59_01.png"
                            alt="">
                        <div class="p-2 mb-4 text-base font-bold uppercase border-b border-black border-x">
                            PRIORITIZE</div>
                    </div>
                    <div class="px-4 mb-4">
                        <h3 class="mb-4 text-2xl font-bold">Routing</h3>
                        <p class="mb-4 text-gray-600">Setup multiple routing configurations for the fastest response
                            times.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
Simple Features ection Using Tailwind UI

Preview - Simple Features ection Using Tailwind UI
