Componentes Acordeón Acordeón en modo oscuro

Acordeón en modo oscuro

Componente de acordeón de modo oscuro receptivo para el tablero

Vista previa

Código HTML

<div class="w-full max-w-md mx-auto rounded-lg overflow-hidden">
  <div class="bg-gray-800 text-gray-200 p-4 cursor-pointer flex justify-between items-center" onclick="this.nextElementSibling.classList.toggle('hidden')">
    <span>Section 1</span>
    <svg class="w-5 h-5 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
    </svg>
  </div>
  <div class="p-4 bg-gray-700 hidden">
    <p>Content for section 1.</p>
  </div>

  <div class="bg-gray-800 text-gray-200 p-4 cursor-pointer flex justify-between items-center" onclick="this.nextElementSibling.classList.toggle('hidden')">
    <span>Section 2</span>
    <svg class="w-5 h-5 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
    </svg>
  </div>
  <div class="p-4 bg-gray-700 hidden">
    <p>Content for section 2.</p>
  </div>

  <div class="bg-gray-800 text-gray-200 p-4 cursor-pointer flex justify-between items-center" onclick="this.nextElementSibling.classList.toggle('hidden')">
    <span>Section 3</span>
    <svg class="w-5 h-5 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
    </svg>
  </div>
  <div class="p-4 bg-gray-700 hidden">
    <p>Content for section 3.</p>
  </div>
</div>

Componentes relacionados

Componente de acordeón

Un componente de acordeón complejo y receptivo diseñado para sitios web de alimentos / restaurantes, con un estilo de tipografía suizo / internacional limpio con una combinación de colores alegres y dulces. Incluye soporte para modo oscuro.

Abrir

Salpicadero Retro Acordeón

Componente de acordeón retro / vintage para tablero con combinación de colores complementaria y complejidad compleja. Incluye diseño responsivo y soporte de temas oscuros usando Tailwind CSS. Sin JavaScript. Imágenes vía picsum.photos y avatares vía randomuser.me.

Abrir

Componente de acordeón neumórfico

Un componente de acordeón neumórfico con un esquema de color triádico, adecuado para sitios web comerciales. Cuenta con un diseño responsivo con soporte para modo oscuro, implementado puramente con HTML y Tailwind CSS.

Abrir