Componentes Acordeón Componente de acordeón

Componente de acordeón

Un componente de acordeón con diseño 3D, efectos responsivos y soporte de temas oscuros que usa solo HTML y CSS (Tailwind CSS). El componente utiliza CSS para el modo oscuro e incluye transiciones para acordeones suaves. Es totalmente responsivo. No se utiliza JavaScript.

Vista previa

Código HTML

<div class="accordion-3d">
  <div class="accordion-item">
    <input type="checkbox" id="item-1" class="accordion-toggle" />
    <label for="item-1" class="accordion-header">Section 1</label>
    <div class="accordion-content">
      <p>Content for section 1 goes here.</p>
    </div>
  </div>
  <div class="accordion-item">
    <input type="checkbox" id="item-2" class="accordion-toggle" />
    <label for="item-2" class="accordion-header">Section 2</label>
    <div class="accordion-content">
      <p>Content for section 2 goes here.</p>
    </div>
  </div>
  <div class="accordion-item">
    <input type="checkbox" id="item-3" class="accordion-toggle" />
    <label for="item-3" class="accordion-header">Section 3</label>
    <div class="accordion-content">
      <p>Content for section 3 goes here.</p>
    </div>
  </div>
</div>

<style>
/* Basic Accordion Styling */
.accordion-3d .accordion-item {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

.accordion-3d .accordion-header {
  display: block;
  padding: 15px;
  cursor: pointer;
  background-color: #f0f0f0;
  position: relative;
  z-index: 2;
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.accordion-3d .accordion-toggle {
  display: none;
}

.accordion-3d .accordion-content {
  padding: 15px;
  background-color: #fff;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease-in-out;
  position: relative;
  z-index: 1;
}

.accordion-3d .accordion-toggle:checked ~ .accordion-content {
  max-height: 500px; /* Adjust as needed */
}

/* 3D Effect */
.accordion-3d .accordion-item:hover {
  transform: translateY(-5px) rotateX(5deg);
}

.accordion-3d .accordion-header::after {
  content: '>';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.3s ease-in-out;
}

.accordion-3d .accordion-toggle:checked ~ .accordion-header::after {
  transform: translateY(-50%) rotate(-90deg);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .accordion-3d .accordion-item {
    border-bottom: 1px solid #555;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  }

  .accordion-3d .accordion-header {
    background-color: #333;
    color: #eee;
  }

  .accordion-3d .accordion-content {
    background-color: #222;
    color: #ccc;
  }
}

/* Responsive adjustments (optional) */
@media (max-width: 768px) {
  .accordion-3d .accordion-item {
    margin-bottom: 5px;
  }
  .accordion-3d .accordion-header {
    padding: 10px;
  }
  .accordion-3d .accordion-content {
    padding: 10px;
  }
}
</style>

Componentes relacionados

Componente de acordeón retro vintage

Un componente de acordeón de estilo retro / vintage con tonos tierra para la visualización de datos en el tablero. Diseñado para complejidad media con soporte de temas responsivos y oscuros.

Abrir

Componente de acordeón

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

Abrir

Acordeón en modo oscuro (Finanzas/Banca)

Un componente de acordeón simple, monocromático y de temática oscura diseñado para interfaces financieras y bancarias. Cuenta con un diseño responsivo y compatibilidad con el modo oscuro, utilizando tonos de un solo color para una apariencia limpia.

Abrir