Feature Section in Tailwind CSS
feature section in Tailwind CSS
Tailwind CSS
With Testimonials
Feature section with a beautiful testimonial
Feature Section in Tailwind CSS
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<!-- LEFT SIDE CONTENT -->
<div>
<h2 class="text-base font-semibold text-indigo-600">
Deploy faster
</h2>
<p
class="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl"
>
A better workflow
</p>
<p class="mt-6 text-lg leading-8 text-gray-600">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
impedit perferendis suscipit eaque, iste dolor cupiditate
blanditiis ratione.
</p>
<!-- Button starts -->
<div class="mt-8 space-y-8">
<button
class="bg-indigo-600 text-white font-bold px-6 py-4 rounded-lg"
>
Get Started
</button>
</div>
<!-- Button ends -->
<!-- Testimonial starts -->
<div class="border-l-2 border-slate-200">
<div class="mt-10 space-y-8 pl-6">
<p class="text-lg leading-8 text-gray-600">
“Vel ultricies morbi odio facilisi ultrices accumsan donec
lacus purus. Lectus nibh ullamcorper ac dictum justo in
euismod. Risus aenean ut elit massa. In amet aliquet eget
cras. Sem volutpat enim tristique.”
</p>
<div class="flex gap-x-4 items-center">
<img
class="rounded-full h-8 w-8"
src="https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80"
alt="avatar"
/>
<h3 class="text-md font-semibold text-gray-900">
Maria Gill -
<span class="text-gray-600 font-normal"
>Marketing Manager</span
>
</h3>
</div>
</div>
</div>
<!-- Testimonial ends -->
</div>
<!-- RIGHT SIDE IMAGE -->
<div
class="relative rounded-3xl overflow-hidden bg-indigo-600 h-[700px] border border-zinc-200"
>
<div
class="absolute inset-0 bg-gradient-to-tr from-indigo-500/50 via-transparent to-transparent"
></div>
<div class="h-full w-full rounded-3xl">
<img
src="https://tailwindcss.com/plus-assets/img/component-images/dark-project-app-screenshot.png"
alt="App screenshot"
class="object-cover object-left h-full w-full"
/>
</div>
</div>
</div>
</div>
</div>
With Product Screenshot
with responsive design
Feature Section in Tailwind CSS
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<!-- LEFT SIDE CONTENT -->
<div>
<h2 class="text-base font-semibold text-indigo-600">
Deploy faster
</h2>
<p
class="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl"
>
A better workflow
</p>
<p class="mt-6 text-lg leading-8 text-gray-600">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
impedit perferendis suscipit eaque, iste dolor cupiditate
blanditiis ratione.
</p>
<div class="mt-10 space-y-8">
<div class="flex gap-x-4">
<div class="flex-none">
<div
class="h-10 w-10 rounded-lg bg-indigo-600 flex items-center justify-center text-white"
>
<!-- You can put an icon here -->
<svg
class="h-6 w-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
</div>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900">
Push to deploy
</h3>
<p class="mt-1 text-base leading-7 text-gray-600">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Maiores impedit perferendis suscipit eaque.
</p>
</div>
</div>
<div class="flex gap-x-4">
<div class="flex-none">
<div
class="h-10 w-10 rounded-lg bg-indigo-600 flex items-center justify-center text-white"
>
<!-- Another icon -->
<svg
class="h-6 w-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 11c0-1.657-1.343-3-3-3S6 9.343 6 11s1.343 3 3 3 3-1.343 3-3z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 11a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</div>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900">
SSL certificates
</h3>
<p class="mt-1 text-base leading-7 text-gray-600">
Anim aute id magna aliqua ad ad non deserunt sunt.
</p>
</div>
</div>
<div class="flex gap-x-4">
<div class="flex-none">
<div
class="h-10 w-10 rounded-lg bg-indigo-600 flex items-center justify-center text-white"
>
<!-- Another icon -->
<svg
class="h-6 w-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 17v-2a2 2 0 012-2h2a2 2 0 012 2v2m-6 0h6m-6 0v2a2 2 0 002 2h2a2 2 0 002-2v-2"
/>
</svg>
</div>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900">
Database backups
</h3>
<p class="mt-1 text-base leading-7 text-gray-600">
Ac tincidunt sapien vehicula erat auctor pellentesque
rhoncus.
</p>
</div>
</div>
</div>
</div>
<!-- RIGHT SIDE IMAGE -->
<div
class="relative rounded-3xl overflow-hidden bg-indigo-600 h-[700px] border border-zinc-200"
>
<div
class="absolute inset-0 bg-gradient-to-tr from-indigo-500/50 via-transparent to-transparent"
></div>
<div class="h-full w-full rounded-3xl pl-20 pt-20">
<img
src="https://tailwindcss.com/plus-assets/img/component-images/project-app-screenshot.png"
alt="App screenshot"
class="object-cover object-left h-full w-full"
/>
</div>
</div>
</div>
</div>
</div>
Two By Two Centered
With responsive design
Feature Section in Tailwind CSS
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">
Deploy faster
</h2>
<p
class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl lg:text-balance"
>
Transform your idea to production
</p>
<p class="mt-6 text-lg/8 text-gray-600">
Quis tellus eget adipiscing convallis sit sit eget aliquet quis.
Suspendisse eget egestas a elementum pulvinar et feugiat blandit at.
In mi viverra elit nunc.
</p>
</div>
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
<dl
class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16"
>
<div class="relative pl-16">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="absolute top-0 left-0 flex size-10 items-center justify-center rounded-lg bg-indigo-600"
>
<svg
class="size-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z"
/>
</svg>
</div>
Push to deploy
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Morbi viverra dui mi arcu sed. Tellus semper adipiscing
suspendisse semper morbi. Odio urna massa nunc massa.
</dd>
</div>
<div class="relative pl-16">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="absolute top-0 left-0 flex size-10 items-center justify-center rounded-lg bg-indigo-600"
>
<svg
class="size-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
/>
</svg>
</div>
SSL certificates
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Sit quis amet rutrum tellus ullamcorper ultricies libero dolor
eget. Sem sodales gravida quam turpis enim lacus amet.
</dd>
</div>
<div class="relative pl-16">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="absolute top-0 left-0 flex size-10 items-center justify-center rounded-lg bg-indigo-600"
>
<svg
class="size-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
</div>
Simple queues
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Quisque est vel vulputate cursus. Risus proin diam nunc commodo.
Lobortis auctor congue commodo diam neque.
</dd>
</div>
<div class="relative pl-16">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="absolute top-0 left-0 flex size-10 items-center justify-center rounded-lg bg-indigo-600"
>
<svg
class="size-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M7.864 4.243A7.5 7.5 0 0 1 19.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 0 0 4.5 10.5a7.464 7.464 0 0 1-1.15 3.993m1.989 3.559A11.209 11.209 0 0 0 8.25 10.5a3.75 3.75 0 1 1 7.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 0 1-3.6 9.75m6.633-4.596a18.666 18.666 0 0 1-2.485 5.33"
/>
</svg>
</div>
Advanced security
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Arcu egestas dolor vel iaculis in ipsum mauris. Tincidunt mattis
aliquet hac quis. Id hac maecenas ac donec pharetra eget.
</dd>
</div>
</dl>
</div>
</div>
</div>
Three Columns with small icons
With responsive design
Feature Section in Tailwind CSS
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">
Deploy faster
</h2>
<p
class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl lg:text-balance"
>
Transform your idea to production
</p>
<p class="mt-6 text-lg/8 text-gray-600">
Quis tellus eget adipiscing convallis sit sit eget aliquet quis.
Suspendisse eget egestas a elementum pulvinar et feugiat blandit at.
In mi viverra elit nunc.
</p>
</div>
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-7xl">
<dl
class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-3 lg:gap-y-16"
>
<div class="relative pl-16">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="absolute top-0 left-0 flex size-10 items-center justify-center rounded-lg"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
class="size-7 text-indigo-600"
>
<path
fill-rule="evenodd"
d="M5.5 17a4.5 4.5 0 0 1-1.44-8.765 4.5 4.5 0 0 1 8.302-3.046 3.5 3.5 0 0 1 4.504 4.272A4 4 0 0 1 15 17H5.5Zm3.75-2.75a.75.75 0 0 0 1.5 0V9.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0l-3.25 3.5a.75.75 0 1 0 1.1 1.02l1.95-2.1v4.59Z"
clip-rule="evenodd"
></path>
</svg>
</div>
Push to deploy
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Morbi viverra dui mi arcu sed. Tellus semper adipiscing
suspendisse semper morbi. Odio urna massa nunc massa.
</dd>
</div>
<div class="relative pl-16">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="absolute top-0 left-0 flex size-10 items-center justify-center rounded-lg"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
class="size-7 text-indigo-600"
>
<path
fill-rule="evenodd"
d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z"
clip-rule="evenodd"
></path>
</svg>
</div>
SSL certificates
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Sit quis amet rutrum tellus ullamcorper ultricies libero dolor
eget. Sem sodales gravida quam turpis enim lacus amet.
</dd>
</div>
<div class="relative pl-16">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="absolute top-0 left-0 flex size-10 items-center justify-center rounded-lg"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
class="size-7 text-indigo-600"
>
<path
fill-rule="evenodd"
d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z"
clip-rule="evenodd"
></path>
</svg>
</div>
Simple queues
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Quisque est vel vulputate cursus. Risus proin diam nunc commodo.
Lobortis auctor congue commodo diam neque.
</dd>
</div>
</dl>
</div>
</div>
</div>
Three Columns with large icons
With responsive design in Tailwind CSS
Feature Section in Tailwind CSS
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:text-center">
<h2 class="text-base/7 font-semibold text-indigo-600">
Deploy faster
</h2>
<p
class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl lg:text-balance"
>
Transform your idea to production
</p>
<p class="mt-6 text-lg/8 text-gray-600">
Quis tellus eget adipiscing convallis sit sit eget aliquet quis.
Suspendisse eget egestas a elementum pulvinar et feugiat blandit at.
In mi viverra elit nunc.
</p>
</div>
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-7xl">
<dl
class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-3 lg:gap-y-16"
>
<div class="relative pl-16">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="flex flex-col items-center space-y-2 size-10 justify-center rounded-lg bg-indigo-600 mb-4"
>
<svg
class="size-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z"
/>
</svg>
</div>
Push to deploy
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Morbi viverra dui mi arcu sed. Tellus semper adipiscing
suspendisse semper morbi. Odio urna massa nunc massa.
</dd>
</div>
<div class="relative pl-16">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="flex flex-col items-center space-y-2 size-10 justify-center rounded-lg bg-indigo-600 mb-4"
>
<svg
class="size-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
/>
</svg>
</div>
SSL certificates
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Sit quis amet rutrum tellus ullamcorper ultricies libero dolor
eget. Sem sodales gravida quam turpis enim lacus amet.
</dd>
</div>
<div class="relative pl-16">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="flex flex-col items-center space-y-2 size-10 justify-center rounded-lg bg-indigo-600 mb-4"
>
<svg
class="size-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
</div>
Simple queues
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Quisque est vel vulputate cursus. Risus proin diam nunc commodo.
Lobortis auctor congue commodo diam neque.
</dd>
</div>
</dl>
</div>
</div>
</div>
Offset with feature list
With responsive design
Feature Section in Tailwind CSS
<div class="bg-white py-24 sm:py-32">
<div
class="mx-auto max-w-7xl grid grid-cols-1 lg:grid-cols-2 px-6 lg:px-8"
>
<div class="mx-auto max-w-2xl mb-10">
<h2 class="text-base/7 font-semibold text-indigo-600">
Everything you need
</h2>
<p
class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl lg:text-balance"
>
All-in-one platform
</p>
<p class="mt-6 text-lg/8 text-gray-600">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores
impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis
ratione.
</p>
</div>
<div class="mx-auto max-w-2xl lg:max-w-4xl">
<dl
class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16"
>
<div class="relative pl-9">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="absolute top-0 left-0 flex size-6 items-center justify-center rounded-lg"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
class="text-indigo-500"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
></path>
</svg>
</div>
Invite team members
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Rerum repellat labore necessitatibus reprehenderit molestiae
praesentium.
</dd>
</div>
<div class="relative pl-9">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="absolute top-0 left-0 flex size-6 items-center justify-center rounded-lg"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
class="text-indigo-500"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
></path>
</svg>
</div>
List view
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Rerum repellat labore necessitatibus reprehenderit molestiae
praesentium.
</dd>
</div>
<div class="relative pl-9">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="absolute top-0 left-0 flex size-6 items-center justify-center rounded-lg"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
class="text-indigo-500"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
></path>
</svg>
</div>
Keyboard shortcuts
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Rerum repellat labore necessitatibus reprehenderit molestiae
praesentium.
</dd>
</div>
<div class="relative pl-9">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="absolute top-0 left-0 flex size-6 items-center justify-center rounded-lg"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
class="text-indigo-500"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
></path>
</svg>
</div>
Calendars
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Rerum repellat labore necessitatibus reprehenderit molestiae
praesentium.
</dd>
</div>
<div class="relative pl-9">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="absolute top-0 left-0 flex size-6 items-center justify-center rounded-lg"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
class="text-indigo-500"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
></path>
</svg>
</div>
Notifications
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Rerum repellat labore necessitatibus reprehenderit molestiae
praesentium.
</dd>
</div>
<div class="relative pl-9">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="absolute top-0 left-0 flex size-6 items-center justify-center rounded-lg"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
class="text-indigo-500"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
></path>
</svg>
</div>
Boards
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Rerum repellat labore necessitatibus reprehenderit molestiae
praesentium.
</dd>
</div>
<div class="relative pl-9">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="absolute top-0 left-0 flex size-6 items-center justify-center rounded-lg"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
class="text-indigo-500"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
></path>
</svg>
</div>
Reporting
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Rerum repellat labore necessitatibus reprehenderit molestiae
praesentium.
</dd>
</div>
<div class="relative pl-9">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="absolute top-0 left-0 flex size-6 items-center justify-center rounded-lg"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
class="text-indigo-500"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
clip-rule="evenodd"
></path>
</svg>
</div>
Mobile app
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Rerum repellat labore necessitatibus reprehenderit molestiae
praesentium.
</dd>
</div>
</dl>
</div>
</div>
</div>
Offset 2x2 grid
With responsive design
Feature Section in Tailwind CSS
<div class="bg-white py-24 sm:py-32">
<div
class="mx-auto max-w-7xl grid grid-cols-1 lg:grid-cols-2 px-6 lg:px-8"
>
<div class="mx-auto max-w-2xl mb-10">
<h2
class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl lg:text-balance"
>
Stay on top of customer support
</h2>
</div>
<div class="mx-auto lg:max-w-4xl">
<dl
class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16"
>
<div class="relative">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="mb-4 top-0 left-0 flex size-10 items-center justify-center rounded-lg bg-indigo-600"
>
<svg
class="size-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z"
/>
</svg>
</div>
Push to deploy
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Morbi viverra dui mi arcu sed. Tellus semper adipiscing
suspendisse semper morbi. Odio urna massa nunc massa.
</dd>
</div>
<div class="relative">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="mb-4 top-0 left-0 flex size-10 items-center justify-center rounded-lg bg-indigo-600"
>
<svg
class="size-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
/>
</svg>
</div>
SSL certificates
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Sit quis amet rutrum tellus ullamcorper ultricies libero dolor
eget. Sem sodales gravida quam turpis enim lacus amet.
</dd>
</div>
<div class="relative">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="mb-4 top-0 left-0 flex size-10 items-center justify-center rounded-lg bg-indigo-600"
>
<svg
class="size-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
</div>
Simple queues
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Quisque est vel vulputate cursus. Risus proin diam nunc commodo.
Lobortis auctor congue commodo diam neque.
</dd>
</div>
<div class="relative">
<dt class="text-base/7 font-semibold text-gray-900">
<div
class="mb-4 top-0 left-0 flex size-10 items-center justify-center rounded-lg bg-indigo-600"
>
<svg
class="size-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M7.864 4.243A7.5 7.5 0 0 1 19.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 0 0 4.5 10.5a7.464 7.464 0 0 1-1.15 3.993m1.989 3.559A11.209 11.209 0 0 0 8.25 10.5a3.75 3.75 0 1 1 7.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 0 1-3.6 9.75m6.633-4.596a18.666 18.666 0 0 1-2.485 5.33"
/>
</svg>
</div>
Advanced security
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Arcu egestas dolor vel iaculis in ipsum mauris. Tincidunt mattis
aliquet hac quis. Id hac maecenas ac donec pharetra eget.
</dd>
</div>
</dl>
</div>
</div>
</div>
Simple Design
With responsive design
Feature Section in Tailwind CSS
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto">
<p
class="mt-2 text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl lg:text-balance"
>
All-in-one platform
</p>
<p class="mt-6 text-lg/8 max-w-2xl text-gray-600">
Quis tellus eget adipiscing convallis sit sit eget aliquet quis.
Suspendisse eget egestas a elementum pulvinar et feugiat blandit at.
In mi viverra elit nunc.
</p>
</div>
<div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-7xl">
<dl
class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-3 lg:gap-y-16"
>
<div class="relative">
<dt class="text-base/7 font-semibold text-gray-900">
Push to deploy
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Morbi viverra dui mi arcu sed. Tellus semper adipiscing
suspendisse semper morbi. Odio urna massa nunc massa.
</dd>
</div>
<div class="relative">
<dt class="text-base/7 font-semibold text-gray-900">
SSL certificates
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Morbi viverra dui mi arcu sed. Tellus semper adipiscing
suspendisse semper morbi. Odio urna massa nunc massa.
</dd>
</div>
<div class="relative">
<dt class="text-base/7 font-semibold text-gray-900">
Simple queues
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Morbi viverra dui mi arcu sed. Tellus semper adipiscing
suspendisse semper morbi. Odio urna massa nunc massa.
</dd>
</div>
<div class="relative">
<dt class="text-base/7 font-semibold text-gray-900">
Advanced security
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Morbi viverra dui mi arcu sed. Tellus semper adipiscing
suspendisse semper morbi. Odio urna massa nunc massa.
</dd>
</div>
<div class="relative">
<dt class="text-base/7 font-semibold text-gray-900">
Powerful API
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Morbi viverra dui mi arcu sed. Tellus semper adipiscing
suspendisse semper morbi. Odio urna massa nunc massa.
</dd>
</div>
<div class="relative">
<dt class="text-base/7 font-semibold text-gray-900">
Database backups
</dt>
<dd class="mt-2 text-base/7 text-gray-600">
Morbi viverra dui mi arcu sed. Tellus semper adipiscing
suspendisse semper morbi. Odio urna massa nunc massa.
</dd>
</div>
</dl>
</div>
</div>
</div>
Code copied to clipboard