Feature Card With Icon
A clean and modern feature card component with an icon, title, and description. Perfect for showcasing product features, services, or benefits on landing pages. Features hover effects and smooth transitions.
card feature icon
Loading component...
59 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feature Card With Icon</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl">
<!-- Feature Card 1 -->
<div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 group">
<div
class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-blue-600 transition-colors duration-300">
<svg class="w-6 h-6 text-blue-600 group-hover:text-white transition-colors duration-300" fill="none"
stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-2">Fast Performance</h3>
<p class="text-gray-600">Lightning-fast load times and optimized code ensure the best user experience
possible.</p>
</div>
<!-- Feature Card 2 -->
<div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 group">
<div
class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-green-600 transition-colors duration-300">
<svg class="w-6 h-6 text-green-600 group-hover:text-white transition-colors duration-300" fill="none"
stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-2">Secure & Reliable</h3>
<p class="text-gray-600">Built with security in mind, protecting your data with industry-standard
encryption.</p>
</div>
<!-- Feature Card 3 -->
<div class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 group">
<div
class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-purple-600 transition-colors duration-300">
<svg class="w-6 h-6 text-purple-600 group-hover:text-white transition-colors duration-300" fill="none"
stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
</svg>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-2">Easy Customization</h3>
<p class="text-gray-600">Fully customizable components that adapt to your brand and design requirements.</p>
</div>
</div>
</body>
</html>