Componentes Acordeón Componente de acordeón

Componente de acordeón

Componente de acordeón de modo oscuro con combinación de colores de tonos tierra, complejidad moderada, para fines de redes sociales, con diseño receptivo y soporte de tema oscuro. Sin JavaScript.

Vista previa

Código HTML

<div class="max-w-md mx-auto rounded-md overflow-hidden shadow-lg bg-stone-800 dark:bg-stone-900">
  <div class="accordion">
    <div class="accordion-item">
      <input type="checkbox" id="accordion1" class="hidden">
      <label for="accordion1" class="flex justify-between items-center p-4 cursor-pointer bg-stone-700 dark:bg-stone-800 text-stone-200 dark:text-stone-300">
        Section 1
        <svg class="w-5 h-5 text-stone-200 dark:text-stone-300 transform transition-transform duration-300 ease-in-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="accordion-content px-4 pb-4 text-stone-300 dark:text-stone-400 hidden">
        <p>Content for section 1.</p>
      </div>
    </div>
    <div class="accordion-item">
      <input type="checkbox" id="accordion2" class="hidden">
      <label for="accordion2" class="flex justify-between items-center p-4 cursor-pointer bg-stone-700 dark:bg-stone-800 text-stone-200 dark:text-stone-300">
        Section 2
        <svg class="w-5 h-5 text-stone-200 dark:text-stone-300 transform transition-transform duration-300 ease-in-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="accordion-content px-4 pb-4 text-stone-300 dark:text-stone-400 hidden">
        <p>Content for section 2.</p>
      </div>
    </div>
  </div>
</div>

<style>
.accordion-item input:checked ~ label svg {
  transform: rotate(180deg);
}
.accordion-item input:checked ~ .accordion-content {
  display: block;
}
</style>

Componentes relacionados

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

CorporativoProfesionalAcordeón

Un componente de acordeón de alto contraste, de temática corporativa/profesional, adecuado para organizaciones benéficas y sin fines de lucro. Presenta un diseño limpio, combinaciones de colores llamativos y capacidad de respuesta total con soporte para modo oscuro.

Abrir