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

Componente de acordeón

Componente de acordeón con diseño de neumorfismo, efectos responsivos y soporte para temas oscuros.

Abrir

Acordeón Bauhaus para organizaciones sin fines de lucro

Un componente de acordeón simple y sensible diseñado con influencias de Bauhaus y una combinación de colores cálidos al atardecer, adecuado para organizaciones sin fines de lucro. Incluye soporte para modo oscuro.

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