Hoverable Feature Card with Icon

<div class="group rounded-2xl bg-white ring-1 ring-black/10 p-5 transition-colors">
      <div class="flex items-center justify-between">
        <span class="text-[11px] text-neutral-400 transition-colors group-hover:text-emerald-600">{ 01 }</span>
      </div>
      <div class="mt-6">
        <div class="h-10 w-10 rounded-lg bg-emerald-100 text-emerald-700 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="moon" class="lucide lucide-moon h-5 w-5"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path></svg>
        </div>
        <p class="mt-4 text-neutral-900 font-medium tracking-tight transition-colors group-hover:text-emerald-700">E-ink Display</p>
        <p class="text-neutral-600 text-sm transition-colors group-hover:text-emerald-600">Paper-like clarity</p>
      </div>
    </div>