Acordeones ultra simples con details + Tailwind (sin JS)

Si alguna vez has montado un acordeón con JS «porque toca»… prueba esto: HTML nativo con <details> y <summary>.

✅ Accesible por defecto
✅ Soporta teclado (tab/enter)
✅ Cero dependencias
✅ Y con Tailwind se ve pro en 2 minutos

1) El acordeón mínimo (y ya funciona)

<details class="rounded-xl border p-4">
  <summary class="cursor-pointer font-medium">
    ¿Qué incluye Flowtitude?
  </summary>

  <div class="mt-3 text-sm opacity-80">
    Componentes, utilidades, patrones y una base sólida para construir rápido.
  </div>
</details>

2) Con icono animado usando open: (Tailwind)

open: te deja aplicar estilos cuando el acordeón está abierto.

<details class="rounded-xl border p-4 open:border-zinc-900/20">
  <summary class="flex cursor-pointer list-none items-center justify-between font-medium">
    ¿Necesito JS?
    <span class="transition-transform open:rotate-180">⌄</span>
  </summary>

  <div class="mt-3 text-sm opacity-80">
    Nope. Esto ya abre/cierra con HTML nativo 🙂
  </div>
</details>

3) Versión “pro” con group-open: (control total del interior)

Si quieres que otros elementos dentro reaccionen al estado abierto, usa group + group-open:.

<details class="group rounded-xl border p-4">
  <summary class="flex cursor-pointer list-none items-center justify-between font-medium">
    ¿Puedo estilizar todo al abrir?
    <span class="transition-transform group-open:rotate-180">⌄</span>
  </summary>

  <div class="mt-3 text-sm opacity-80 group-open:opacity-100">
    Sí: iconos, separadores, colores, sombras… lo que quieras.
  </div>
</details>

📌 Idea clave: si el acordeón no necesita lógica compleja, details/summary + open: / group-open: es de esas «victorias rápidas» que encajan perfecto con el enfoque Flowtitude: menos fricción, más avance.