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>