Tailwind CSS 4 Feature Card

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Feature Card</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script>
</head>
<body class="bg-gray-50 flex items-center justify-center min-h-screen p-6 antialiased">

<div class="w-full max-w-sm bg-white rounded-[2.5rem] p-10 shadow-2xl border border-white group hover:bg-slate-900 transition-all duration-500">
    <div class="h-16 w-16 bg-indigo-50 rounded-2xl flex items-center justify-center text-indigo-600 mb-8 border border-indigo-100 group-hover:bg-indigo-600 group-hover:text-white group-hover:border-indigo-500 transition-all duration-500">
      <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
    </div>
    <h3 class="text-2xl font-black text-slate-900 tracking-tighter italic mb-4 group-hover:text-white transition-colors">Kinetic Logic.</h3>
    <p class="text-slate-500 font-bold leading-relaxed italic group-hover:text-white/60 transition-colors">Engineered for lightning-fast execution protocols and zero-latency data processing in high-density environments.</p>
  </div>

</body>
</html>