Feature

A feature section can be used to showcase the offerings of a service or product in a single, organized unit.

Features: centered title and description three items (with icons and text)

            <div class="text-gray-900 font-sans bg-gray-100">
    <div class="container text-center py-20 lg:py-32">
        <h2 class="text-xl font-bold md:text-2xl">Elit Condimentum Purus Justo Fermentum</h2>
        <p class="mt-2 text-lg text-gray-700">Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus.</p>

        <div class="-mx-4 mt-6 flex flex-wrap items-start justify-center md:mt-12">
            <div class="flex flex-col items-center w-full p-4 md:w-1/2 lg:w-1/3">
                <div class="w-20 h-20 bg-gray-400 rounded-full"></div>
                <h3 class="mt-4 font-bold">Condimentum Egestas Lorem Fusce</h3>
                <p class="mt-2 text-sm text-gray-700">Nullam id dolor id nibh ultricies vehicula ut id elit.snjdnenf snamds m</p>
            </div>
            <div class="flex flex-col items-center w-full p-4 md:w-1/2 lg:w-1/3">
                <div class="w-20 h-20 bg-gray-400 rounded-full"></div>
                <h3 class="mt-4 font-bold">Condimentum Egestas Lorem Fusce</h3>
                <p class="mt-2 text-sm text-gray-700">Nullam id dolor id nibh ultricies vehicula ut id elit.snjdnenf snamds m</p>
            </div>
            <div class="flex flex-col items-center w-full p-4 md:w-1/2 lg:w-1/3">
                <div class="w-20 h-20 bg-gray-400 rounded-full"></div>
                <h3 class="mt-4 font-bold">Condimentum Egestas Lorem Fusce</h3>
                <p class="mt-2 text-sm text-gray-700">Nullam id dolor id nibh ultricies vehicula ut id elit.snjdnenf snamds m</p>
            </div>
        </div>
    </div>

</div>

        

Features: Three columns: 1 with title and description; 2 and 3 with two messaging items each

            <div class="text-gray-900 font-sans bg-gray-100">
    <div class="container py-20 lg:py-32">
        <div class="grid grid-cols-1 gap-8 lg:gap-0 lg:grid-cols-5">
            <div class="px-8 lg:px-12 lg:col-span-2">
                <h2 class="text-2xl font-bold">Elit Condimentum Purus Justo Fermentum</h2>
                <p class="mt-2 text-lg text-gray-700">Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus.</p>
            </div>
            <div class="px-8 lg:px-12 lg:col-span-3">
                <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 sm:gap-16">
                    <div>
                        <h3 class="font-bold">Condimentum Egestas Lorem Fusce</h3>
                        <p class="mt-2 text-sm text-gray-700">Nullam id dolor id nibh ultricies vehicula ut id elit.snjdnenf snamds m</p>
                        <a href="#" class="mt-4 px-0 border-0 border-b-2 btn-sm text-black border-black hover:text-gray-800 hover:border-gray-600">
                            View More
                        </a>
                    </div>
                    <div>
                        <h3 class="font-bold">Condimentum Egestas Lorem Fusce</h3>
                        <p class="mt-2 text-sm text-gray-700">Nullam id dolor id nibh ultricies vehicula ut id elit.snjdnenf snamds m</p>
                        <a href="#" class="mt-4 px-0 border-0 border-b-2 btn-sm text-black border-black hover:text-gray-800 hover:border-gray-600">
                            View More
                        </a>
                    </div>
                    <div>
                        <h3 class="font-bold">Condimentum Egestas Lorem Fusce</h3>
                        <p class="mt-2 text-sm text-gray-700">Nullam id dolor id nibh ultricies vehicula ut id elit.snjdnenf snamds m</p>
                        <a href="#" class="mt-4 px-0 border-0 border-b-2 btn-sm text-black border-black hover:text-gray-800 hover:border-gray-600">
                            View More
                        </a>
                    </div>
                    <div>
                        <h3 class="font-bold">Condimentum Egestas Lorem Fusce</h3>
                        <p class="mt-2 text-sm text-gray-700">Nullam id dolor id nibh ultricies vehicula ut id elit.snjdnenf snamds m</p>
                        <a href="#" class="mt-4 px-0 border-0 border-b-2 btn-sm text-black border-black hover:text-gray-800 hover:border-gray-600">
                            View More
                        </a>
                    </div>
                </div>                
            </div>
        </div>
    </div>

</div>

        

Features: 2/3-width with title, messaging, three options in a single column; 1/3-width image

            <div class="relative text-gray-900 font-sans bg-gray-100">
    <div class="container px-0 py-20 lg:px-0 lg:py-32">
        <div class="md:flex md:items-center">
            <div class="px-4 md:w-3/5 lg:px-16">
                <h2 class="text-xl font-bold md:text-2xl">Elit Condimentum Purus Justo Fermentum</h2>
                <p class="mt-2 text-lg text-gray-700">Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus.</p>

                <div class="-mx-4 mt-6 flex flex-wrap items-start justify-center md:mt-8">
                    <a href="#" class="flex items-center w-full p-4 transition-colors hover:text-gray-700">
                        <div class="flex-shrink-0 relative w-20 h-20 bg-gray-400 rounded-full overflow-hidden">
                            <!-- <img class="inset-0 w-full h-full object-cover" src="..." /> -->
                        </div>
                        <div class="ml-4">
                            <div class="flex items-center space-x-2">
                                <h3 class="font-bold text-lg">Condimentum Egestas Lorem Fusce</h3>
                                <i data-feather="chevron-right" class="w-5 h-5"></i>
                            </div>
                            <p class="mt-2 text-sm text-gray-700">Nullam id dolor id nibh ultricies vehicula ut id elit.snjdnenf snamds m</p>
                        </div>
                    </a>
                    <a href="#" class="flex items-center w-full p-4 transition-colors hover:text-gray-700">
                        <div class="flex-shrink-0 relative w-20 h-20 bg-gray-400 rounded-full overflow-hidden">
                            <!-- <img class="inset-0 w-full h-full object-cover" src="..." /> -->
                        </div>
                        <div class="ml-4">
                            <div class="flex items-center space-x-2">
                                <h3 class="font-bold text-lg">Condimentum Egestas Lorem Fusce</h3>
                                <i data-feather="chevron-right" class="w-5 h-5"></i>
                            </div>
                            <p class="mt-2 text-sm text-gray-700">Nullam id dolor id nibh ultricies vehicula ut id elit.snjdnenf snamds m</p>
                        </div>
                    </a>
                    <a href="#" class="flex items-center w-full p-4 transition-colors hover:text-gray-700">
                        <div class="flex-shrink-0 relative w-20 h-20 bg-gray-400 rounded-full overflow-hidden">
                            <!-- <img class="inset-0 w-full h-full object-cover" src="..." /> -->
                        </div>
                        <div class="ml-4">
                            <div class="flex items-center space-x-2">
                                <h3 class="font-bold text-lg">Condimentum Egestas Lorem Fusce</h3>
                                <i data-feather="chevron-right" class="w-5 h-5"></i>
                            </div>
                            <p class="mt-2 text-sm text-gray-700">Nullam id dolor id nibh ultricies vehicula ut id elit.snjdnenf snamds m</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="w-full h-80 bg-gray-800 md:absolute md:inset-y-0 md:right-0 md:w-2/5 md:h-full">
        <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1589486798469-d6307f873733?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=628&q=80" alt="Laptop on table">
    </div>
</div>

        

Features: 2/3-width with title and messaging, 1/3-width small list; three offset tiles bottom right

            <div class="container px-0 pb-20">
    <div class="px-4 py-10 text-gray-900 font-sans bg-gray-200 lg:py-20 lg:px-16">
        <div class="-m-4 sm:flex sm:items-start">
            <div class="px-4 py-6 sm:w-2/3 md:w-3/4">
                <h2 class="text-sm font-bold md:text-base">Sed posuere </h2>
                <h2 class="text-xl font-bold md:text-2xl">Elit Condimentum Purus Justo Fermentum</h2>
                <p class="mt-4 text-sm max-w-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus mollitia vel, doloribus adipisci velit maiores magnam, culpa odio repellat blanditiis magni et, excepturi corrupti provident dolores repellendus ipsa reprehenderit saepe!</p>
            </div>
            <div class="px-4 py-6 sm:w-1/3 md:w-1/4">
                <h3 class="md:text-lg">Venenatis Malesuada</h3>
                <ul class="mt-4 space-y-2">
                    <li>
                        <a href="#" class="inline-flex items-center text-sm hover:text-gray-700">
                            <span>Link Example 1</span>
                            <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="inline-flex items-center text-sm hover:text-gray-700">
                            <span>Link Example 2</span>
                            <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" class="inline-flex items-center text-sm hover:text-gray-700">
                            <span>Link Example 3</span>
                            <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="mt-16 sm:flex sm:justify-end">
            <div class="sm:-mb-32">
                <h3 class="text-lg md:text-xl">Amet Pellentesque</h3>
                <div class="mt-4 space-y-4 sm:space-y-0 sm:space-x-4 sm:flex sm:justify-end">
                    <a href="#" class="flex items-end h-48 w-48 p-4 text-sm bg-gray-400 hover:bg-gray-300">
                        <div>
                            <h4 class="uppercase">Vestibulum Fringilla</h4>
                            <p class="font-bold">Fusce Quam Ornare</p>
                        </div>
                    </a>
                    <a href="#" class="flex items-end h-48 w-48 p-4 text-sm bg-gray-400 hover:bg-gray-300">
                        <div>
                            <h4 class="uppercase">Vestibulum Fringilla</h4>
                            <p class="font-bold">Fusce Quam Ornare</p>
                        </div>
                    </a>
                    <a href="#" class="flex items-end h-48 w-48 p-4 text-sm bg-gray-400 hover:bg-gray-300">
                        <div>
                            <h4 class="uppercase">Vestibulum Fringilla</h4>
                            <p class="font-bold">Fusce Quam Ornare</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

        

Features: 2x2 grid with images

            <div class="text-gray-900 font-sans bg-gray-100">
    <div class="container py-20 lg:py-32">
        <div class="max-w-4xl">
            <h2 class="text-xl md:text-2xl">Elit Condimentum Purus Justo Fermentum</h2>
            <p class="mt-2 text-lg md:text-xl">Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus.</p>
            <p class="mt-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam necessitatibus rem vitae excepturi, itaque odit laborum nemo explicabo sequi quasi aliquam cum perspiciatis vel voluptatum. Tempore facilis distinctio doloremque sed.</p>
        </div>
        <div class="mt-6 md:mt-12 grid grid-cols-1 md:grid-cols-2 gap-8">
            <div class="flex items-start">
                <!-- Replace these circles with images or icons -->
                <div class="flex-shrink-0 w-20 h-20 bg-gray-400 rounded-full"></div>
                <div class="ml-4">
                    <h3 class="text-lg font-bold">Condimentum Egestas Lorem Fusce</h3>
                    <p class="mt-2 text-sm text-gray-700">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo inventore tenetur harum ab mollitia quas amet aliquam? Quaerat tempora voluptatem quam, nam, quibusdam quas eaque dolores ullam, ipsa placeat expedita?</p>
                </div>
            </div>
            <div class="flex items-start">
                <!-- Replace these circles with images or icons -->
                <div class="flex-shrink-0 w-20 h-20 bg-gray-400 rounded-full"></div>
                <div class="ml-4">
                    <h3 class="text-lg font-bold">Condimentum Egestas Lorem Fusce</h3>
                    <p class="mt-2 text-sm text-gray-700">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo inventore tenetur harum ab mollitia quas amet aliquam? Quaerat tempora voluptatem quam, nam, quibusdam quas eaque dolores ullam, ipsa placeat expedita?</p>
                </div>
            </div>
            <div class="flex items-start">
                <!-- Replace these circles with images or icons -->
                <div class="flex-shrink-0 w-20 h-20 bg-gray-400 rounded-full"></div>
                <div class="ml-4">
                    <h3 class="text-lg font-bold">Condimentum Egestas Lorem Fusce</h3>
                    <p class="mt-2 text-sm text-gray-700">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo inventore tenetur harum ab mollitia quas amet aliquam? Quaerat tempora voluptatem quam, nam, quibusdam quas eaque dolores ullam, ipsa placeat expedita?</p>
                </div>
            </div>
            <div class="flex items-start">
                <!-- Replace these circles with images or icons -->
                <div class="flex-shrink-0 w-20 h-20 bg-gray-400 rounded-full"></div>
                <div class="ml-4">
                    <h3 class="text-lg font-bold">Condimentum Egestas Lorem Fusce</h3>
                    <p class="mt-2 text-sm text-gray-700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos sapiente repellat sed dignissimos culpa ea necessitatibus exercitationem enim minus atque porro at eligendi asperiores sunt, consequatur error omnis perferendis quisquam?</p>
                </div>
            </div>
        </div>
    </div>
</div>