Home
SAURAV SINGH
Features

Features

A clean, responsive feature section with icons, smooth hover effects, soft backgrounds, and clear titles for modern website designs.

This tailwind example is contributed by SAURAV SINGH, on 16-Jul-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Services,Why choose us

Card Feature showcase

Author SAURAV SINGH

413

Fork Fullscreen

<section class="py-20 ">
  <div class="max-w-7xl mx-auto px-6">
    <h2 class="text-4xl font-bold text-center text-gray-800 mb-16">Our Features</h2>

<div class="grid gap-10 md:grid-cols-3">
      
      <div class="bg-white/80 backdrop-blur-lg border border-gray-200 rounded-xl p-8 shadow-lg hover:shadow-xl transition duration-300">
        <div class="flex items-center justify-center w-12 h-12 mb-4 bg-blue-100 rounded-full">
          
          <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" stroke-width="2"
               viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>
        <h3 class="text-xl font-semibold text-gray-800 mb-2">Fast Performance</h3>
        <p class="text-gray-500 text-sm">Optimized for speed and lightweight performance with utility-first styling.</p>
      </div>

<div class="bg-white/80 backdrop-blur-lg border border-gray-200 rounded-xl p-8 shadow-lg hover:shadow-xl transition duration-300">
        <div class="flex items-center justify-center w-12 h-12 mb-4 bg-green-100 rounded-full">
          
          <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" stroke-width="2"
               viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M3 12l2-2m0 0l7-7 7 7m-7-7v18" />
          </svg>
        </div>
        <h3 class="text-xl font-semibold text-gray-800 mb-2">Responsive Design</h3>
        <p class="text-gray-500 text-sm">Looks stunning on all screens — mobile, tablet, and desktop.</p>
      </div>

<div class="bg-white/80 backdrop-blur-lg border border-gray-200 rounded-xl p-8 shadow-lg hover:shadow-xl transition duration-300">
        <div class="flex items-center justify-center w-12 h-12 mb-4 bg-purple-100 rounded-full">
          
          <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" stroke-width="2"
               viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M4 6h16M4 12h16M4 18h7" />
          </svg>
        </div>
        <h3 class="text-xl font-semibold text-gray-800 mb-2">Easy Customization</h3>
        <p class="text-gray-500 text-sm">Tailor components to match your brand or project needs with ease.</p>
      </div>
    </div>
  </div>
</section>

Related Examples