Responsive Feature Grid with Tailwind Hover Effects

<section class="mt-8">
  <div class="text-center">
    <p class="text-neutral-600 text-xs transition-colors hover:text-emerald-600">Core features</p>
    <h2 class="mt-1 text-4xl font-semibold tracking-tight text-neutral-900 transition-colors hover:text-emerald-700">
      Built for deep focus</h2>
  </div>

  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mt-6">
    <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>

    <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">{ 02 }</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="battery"
            class="lucide lucide-battery h-5 w-5">
            <path d="M 22 14 L 22 10"></path>
            <rect x="2" y="6" width="16" height="12" rx="2"></rect>
          </svg>
        </div>
        <p class="mt-4 text-neutral-900 font-medium tracking-tight transition-colors group-hover:text-emerald-700">Long
          Battery</p>
        <p class="text-neutral-600 text-sm transition-colors group-hover:text-emerald-600">3 days of use</p>
      </div>
    </div>

    <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">{ 03 }</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="target"
            class="lucide lucide-target h-5 w-5">
            <circle cx="12" cy="12" r="10"></circle>
            <circle cx="12" cy="12" r="6"></circle>
            <circle cx="12" cy="12" r="2"></circle>
          </svg>
        </div>
        <p class="mt-4 text-neutral-900 font-medium tracking-tight transition-colors group-hover:text-emerald-700">
          Minimal OS</p>
        <p class="text-neutral-600 text-sm transition-colors group-hover:text-emerald-600">Zero distractions</p>
      </div>
    </div>

    <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">{ 04 }</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="keyboard"
            class="lucide lucide-keyboard h-5 w-5">
            <path d="M10 8h.01"></path>
            <path d="M12 12h.01"></path>
            <path d="M14 8h.01"></path>
            <path d="M16 12h.01"></path>
            <path d="M18 8h.01"></path>
            <path d="M6 8h.01"></path>
            <path d="M7 16h10"></path>
            <path d="M8 12h.01"></path>
            <rect width="20" height="16" x="2" y="4" rx="2"></rect>
          </svg>
        </div>
        <p class="mt-4 text-neutral-900 font-medium tracking-tight transition-colors group-hover:text-emerald-700">
          Tactile Keys</p>
        <p class="text-neutral-600 text-sm transition-colors group-hover:text-emerald-600">Satisfying typing</p>
      </div>
    </div>

    <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">{ 05 }</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="wifi"
            class="lucide lucide-wifi h-5 w-5">
            <path d="M12 20h.01"></path>
            <path d="M2 8.82a15 15 0 0 1 20 0"></path>
            <path d="M5 12.859a10 10 0 0 1 14 0"></path>
            <path d="M8.5 16.429a5 5 0 0 1 7 0"></path>
          </svg>
        </div>
        <p class="mt-4 text-neutral-900 font-medium tracking-tight transition-colors group-hover:text-emerald-700">
          Always Connected</p>
        <p class="text-neutral-600 text-sm transition-colors group-hover:text-emerald-600">Built-in WiFi</p>
      </div>
    </div>

    <div
      class="relative overflow-hidden rounded-2xl ring-1 ring-emerald-300 p-5 bg-gradient-to-tr from-emerald-700 to-emerald-500 text-white">
      <div class="absolute inset-0"
        style="background: radial-gradient(160px 160px at 30% 30%, rgba(255,255,255,0.25), transparent 60%), radial-gradient(220px 220px at 70% 70%, rgba(0,0,0,0.25), transparent 60%);">
      </div>
      <div class="relative flex items-center justify-between">
        <span class="text-[11px] text-white/80">{ 06 }</span>
      </div>
      <div class="relative mt-6">
        <p class="text-white font-medium tracking-tight">Premium Build</p>
        <p class="text-white/90 text-sm">Aluminum body</p>
      </div>
      <button class="relative mt-8 h-9 w-9 rounded-full bg-white text-neutral-900 flex items-center justify-center shadow-sm transition-colors hover:text-emerald-700">
        <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="arrow-up-right" class="lucide lucide-arrow-up-right h-4 w-4"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg>
      </button>
    </div>

    <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">{ 07 }</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="sun"
            class="lucide lucide-sun h-5 w-5">
            <circle cx="12" cy="12" r="4"></circle>
            <path d="M12 2v2"></path>
            <path d="M12 20v2"></path>
            <path d="m4.93 4.93 1.41 1.41"></path>
            <path d="m17.66 17.66 1.41 1.41"></path>
            <path d="M2 12h2"></path>
            <path d="M20 12h2"></path>
            <path d="m6.34 17.66-1.41 1.41"></path>
            <path d="m19.07 4.93-1.41 1.41"></path>
          </svg>
        </div>
        <p class="mt-4 text-neutral-900 font-medium tracking-tight transition-colors group-hover:text-emerald-700">
          Ambient Light</p>
        <p class="text-neutral-600 text-sm transition-colors group-hover:text-emerald-600">Auto adjusting</p>
      </div>
    </div>

    <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">{ 08 }</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="cloud"
            class="lucide lucide-cloud h-5 w-5">
            <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"></path>
          </svg>
        </div>
        <p class="mt-4 text-neutral-900 font-medium tracking-tight transition-colors group-hover:text-emerald-700">Cloud
          Sync</p>
        <p class="text-neutral-600 text-sm transition-colors group-hover:text-emerald-600">Seamless backup</p>
      </div>
    </div>
  </div>
</section>