Our Features
Discover what makes our product unique and why you'll love it.
Feature One
Description of the first feature. Highlight its benefits and unique aspects.
Feature Two
Description of the second feature. Explain its advantages and use cases.
Feature Three
Description of the third feature. Detail how it stands out from competitors.
<div class="container px-6 py-12 mx-auto">
<h2 class="text-3xl font-bold text-center text-gray-800">Our Features</h2>
<p class="mt-4 text-center text-gray-600">
Discover what makes our product unique and why you'll love it.
</p>
<div class="grid grid-cols-1 gap-8 mt-10 md:grid-cols-2 lg:grid-cols-3">
<!-- Feature 1 -->
<div class="p-6 bg-white border border-gray-200 rounded-lg shadow-sm">
<div class="flex items-center justify-center w-16 h-16 mx-auto text-indigo-600 bg-indigo-100 rounded-full">
<!-- Example Icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-8 h-8">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6M4 6h16M4 10h16m-7 10h3m4 0h-1a2 2 0 01-2-2v-3a2 2 0 012-2h1a2 2 0 012 2v3a2 2 0 01-2 2z" />
</svg>
</div>
<h3 class="mt-4 text-xl font-semibold text-center text-gray-800">Feature One</h3>
<p class="mt-2 text-center text-gray-600">
Description of the first feature. Highlight its benefits and unique aspects.
</p>
</div>
<!-- Feature 2 -->
<div class="p-6 bg-white border border-gray-200 rounded-lg shadow-sm">
<div class="flex items-center justify-center w-16 h-16 mx-auto text-indigo-600 bg-indigo-100 rounded-full">
<!-- Example Icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-8 h-8">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m0 4v4m-4 4h8M5 9l4 4m0-4l-4 4" />
</svg>
</div>
<h3 class="mt-4 text-xl font-semibold text-center text-gray-800">Feature Two</h3>
<p class="mt-2 text-center text-gray-600">
Description of the second feature. Explain its advantages and use cases.
</p>
</div>
<!-- Feature 3 -->
<div class="p-6 bg-white border border-gray-200 rounded-lg shadow-sm">
<div class="flex items-center justify-center w-16 h-16 mx-auto text-indigo-600 bg-indigo-100 rounded-full">
<!-- Example Icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-8 h-8">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h1m0-4h-1m4 12h-1a2 2 0 01-2-2v-3a2 2 0 012-2h1a2 2 0 012 2v3a2 2 0 01-2 2z" />
</svg>
</div>
<h3 class="mt-4 text-xl font-semibold text-center text-gray-800">Feature Three</h3>
<p class="mt-2 text-center text-gray-600">
Description of the third feature. Detail how it stands out from competitors.
</p>
</div>
</div>
</div>