Back to marketing components
Feature Grids
Explore a curated collection of feature grid components built with Tailwind CSS. Display product features, benefits, and service highlights with modern, responsive layouts perfect for marketing websites.
4/4 Dark Mode Updated: Jul 4, 2026
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="mx-auto max-w-lg text-center">
<h2 class="text-3xl/tight font-bold text-gray-900 sm:text-4xl">Features for growth</h2>
<p class="mt-4 text-lg text-pretty text-gray-700">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis tenetur, nemo quam
voluptas sunt impedit dolorem asperiores aliquid doloribus fugit.
</p>
</div>
<div class="mt-8 grid grid-cols-1 gap-8 md:grid-cols-3">
<div class="rounded-lg border border-gray-200 p-6">
<div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"
/>
</svg>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900">High performance</h3>
<p class="mt-2 text-pretty text-gray-700">
Lightning-quick load times optimized for every device
</p>
</div>
<div class="rounded-lg border border-gray-200 p-6">
<div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<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>
<h3 class="mt-4 text-lg font-semibold text-gray-900">Enterprise security</h3>
<p class="mt-2 text-pretty text-gray-700">
Enterprise-grade security built into every layer
</p>
</div>
<div class="rounded-lg border border-gray-200 p-6">
<div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5"
/>
</svg>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900">Highly configurable</h3>
<p class="mt-2 text-pretty text-gray-700">
Adapt every aspect to match your brand and needs
</p>
</div>
</div>
</div><div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="mx-auto max-w-lg text-center">
<h2 class="text-3xl/tight font-bold text-gray-900 sm:text-4xl dark:text-white">
Features for growth
</h2>
<p class="mt-4 text-lg text-pretty text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis tenetur, nemo quam
voluptas sunt impedit dolorem asperiores aliquid doloribus fugit.
</p>
</div>
<div class="mt-8 grid grid-cols-1 gap-8 md:grid-cols-3">
<div class="rounded-lg border border-gray-200 p-6 dark:border-gray-700">
<div
class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"
/>
</svg>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">High performance</h3>
<p class="mt-2 text-pretty text-gray-700 dark:text-gray-200">
Lightning-quick load times optimized for every device
</p>
</div>
<div class="rounded-lg border border-gray-200 p-6 dark:border-gray-700">
<div
class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<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>
<h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">
Enterprise security
</h3>
<p class="mt-2 text-pretty text-gray-700 dark:text-gray-200">
Enterprise-grade security built into every layer
</p>
</div>
<div class="rounded-lg border border-gray-200 p-6 dark:border-gray-700">
<div
class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5"
/>
</svg>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">
Highly configurable
</h3>
<p class="mt-2 text-pretty text-gray-700 dark:text-gray-200">
Adapt every aspect to match your brand and needs
</p>
</div>
</div>
</div><div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
<div class="col-span-1">
<h2 class="text-3xl/tight font-bold text-gray-900 sm:text-4xl">Features for growth</h2>
<p class="mt-4 text-lg text-pretty text-gray-700">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis tenetur, nemo quam
voluptas sunt impedit dolorem asperiores aliquid doloribus fugit.
</p>
</div>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="shrink-0 rounded-lg bg-gray-100 p-3 text-gray-700">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6"
/>
</svg>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900">Advanced reporting</h3>
<p class="mt-1 text-gray-700">Track metrics that matter with instant insights</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="shrink-0 rounded-lg bg-gray-100 p-3 text-gray-700">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"
/>
</svg>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900">Collaboration tools</h3>
<p class="mt-1 text-gray-700">Work together seamlessly across your organization</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="shrink-0 rounded-lg bg-gray-100 p-3 text-gray-700">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z"
/>
</svg>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900">Third-party connectors</h3>
<p class="mt-1 text-gray-700">Connect with your favorite tools and services</p>
</div>
</div>
</div>
</div>
</div><div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
<div class="col-span-1">
<h2 class="text-3xl/tight font-bold text-gray-900 sm:text-4xl dark:text-white">
Features for growth
</h2>
<p class="mt-4 text-lg text-pretty text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis tenetur, nemo quam
voluptas sunt impedit dolorem asperiores aliquid doloribus fugit.
</p>
</div>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="shrink-0 rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6"
/>
</svg>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Advanced reporting
</h3>
<p class="mt-1 text-gray-700 dark:text-gray-200">
Track metrics that matter with instant insights
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="shrink-0 rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"
/>
</svg>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Collaboration tools
</h3>
<p class="mt-1 text-gray-700 dark:text-gray-200">
Work together seamlessly across your organization
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="shrink-0 rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z"
/>
</svg>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Third-party connectors
</h3>
<p class="mt-1 text-gray-700 dark:text-gray-200">
Connect with your favorite tools and services
</p>
</div>
</div>
</div>
</div>
</div><div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
<div class="text-center">
<div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"
/>
</svg>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900">High performance</h3>
<p class="mt-2 text-pretty text-gray-700">Optimized load times</p>
</div>
<div class="text-center">
<div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<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>
<h3 class="mt-4 text-lg font-semibold text-gray-900">Enterprise security</h3>
<p class="mt-2 text-pretty text-gray-700">Every layer secured</p>
</div>
<div class="text-center">
<div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5"
/>
</svg>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900">Highly configurable</h3>
<p class="mt-2 text-pretty text-gray-700">Adapt every aspect</p>
</div>
<div class="text-center">
<div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6"
/>
</svg>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900">Advanced reporting</h3>
<p class="mt-2 text-pretty text-gray-700">Metrics that matter</p>
</div>
</div>
</div><div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
<div class="text-center">
<div
class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"
/>
</svg>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">High performance</h3>
<p class="mt-2 text-pretty text-gray-700 dark:text-gray-200">Optimized load times</p>
</div>
<div class="text-center">
<div
class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<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>
<h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">
Enterprise security
</h3>
<p class="mt-2 text-pretty text-gray-700 dark:text-gray-200">Every layer secured</p>
</div>
<div class="text-center">
<div
class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5"
/>
</svg>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">
Highly configurable
</h3>
<p class="mt-2 text-pretty text-gray-700 dark:text-gray-200">Adapt every aspect</p>
</div>
<div class="text-center">
<div
class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6"
/>
</svg>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">
Advanced reporting
</h3>
<p class="mt-2 text-pretty text-gray-700 dark:text-gray-200">Metrics that matter</p>
</div>
</div>
</div><div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
<div class="flex items-start gap-4 rounded-lg border border-gray-200 p-6">
<div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"
/>
</svg>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900">High performance</h3>
<p class="mt-2 text-pretty text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut accusamus consectetur
eius quo ea ipsa illum eos amet velit assumenda.
</p>
</div>
</div>
<div class="flex items-start gap-4 rounded-lg border border-gray-200 p-6">
<div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<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>
<div>
<h3 class="text-lg font-semibold text-gray-900">Enterprise security</h3>
<p class="mt-2 text-pretty text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est optio fugit eos quia
ipsam ullam pariatur iusto accusantium possimus distinctio?
</p>
</div>
</div>
<div class="flex items-start gap-4 rounded-lg border border-gray-200 p-6">
<div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5"
/>
</svg>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900">Highly configurable</h3>
<p class="mt-2 text-pretty text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ea cum harum corporis
debitis. Nobis officia dignissimos aliquam praesentium quod?
</p>
</div>
</div>
<div class="flex items-start gap-4 rounded-lg border border-gray-200 p-6">
<div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6"
/>
</svg>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900">Advanced reporting</h3>
<p class="mt-2 text-pretty text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ea cum harum corporis
debitis. Nobis officia dignissimos aliquam praesentium quod?
</p>
</div>
</div>
</div>
</div><div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
<div
class="flex items-start gap-4 rounded-lg border border-gray-200 p-6 dark:border-gray-700"
>
<div
class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"
/>
</svg>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">High performance</h3>
<p class="mt-2 text-pretty text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut accusamus consectetur
eius quo ea ipsa illum eos amet velit assumenda.
</p>
</div>
</div>
<div
class="flex items-start gap-4 rounded-lg border border-gray-200 p-6 dark:border-gray-700"
>
<div
class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<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>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Enterprise security</h3>
<p class="mt-2 text-pretty text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est optio fugit eos quia
ipsam ullam pariatur iusto accusantium possimus distinctio?
</p>
</div>
</div>
<div
class="flex items-start gap-4 rounded-lg border border-gray-200 p-6 dark:border-gray-700"
>
<div
class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5"
/>
</svg>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Highly configurable</h3>
<p class="mt-2 text-pretty text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ea cum harum corporis
debitis. Nobis officia dignissimos aliquam praesentium quod?
</p>
</div>
</div>
<div
class="flex items-start gap-4 rounded-lg border border-gray-200 p-6 dark:border-gray-700"
>
<div
class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6"
/>
</svg>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Advanced reporting</h3>
<p class="mt-2 text-pretty text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ea cum harum corporis
debitis. Nobis officia dignissimos aliquam praesentium quod?
</p>
</div>
</div>
</div>
</div>