Composants Accordéon Composant d’accordéon de conception matérielle - Tailwind CSS

Composant d’accordéon de conception matérielle - Tailwind CSS

Un composant d’accordéon avec un style Material Design, y compris des effets réactifs et la prise en charge du thème sombre. Utilise Tailwind CSS et inclut des images/avatars de substitution.

Aperçu

HTML Code

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">
      <h2 class="accordion-title">Section 1</h2>
    </div>
    <div class="accordion-content">
      <p>Content for section 1.</p>
      <img src="https://picsum.photos/seed/picsum/200/300" alt="Placeholder image">
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      <h2 class="accordion-title">Section 2</h2>
    </div>
    <div class="accordion-content">
      <p>Content for section 2.</p>
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <span>User Name</span>
      </div>
    </div>
  </div>
</div>

<style>
.accordion-item {
  border: 1px solid #ddd;
  margin-bottom: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.accordion-header {
  background-color: #f5f5f5;
  padding: 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.accordion-content {
  padding: 16px;
  display: none; /* Initially hidden */
}

.accordion-item.active .accordion-content {
  display: block; /* Show when active */
}

@media (max-width: 768px) {
  .accordion-header {
    padding: 12px;
  }
  .accordion-title {
    font-size: 16px;
  }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .accordion-item {
    border-color: #555;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  .accordion-header {
    background-color: #333;
    color: #eee;
  }
}
</style>

Composants associés

Neon_Glow_Sepia_Photography_Accordion

Un composant d’accordéon complexe et réactif avec un effet néon/lueur dans les tons sépia/brun, conçu pour les portfolios de photographie, avec des éléments interactifs et la prise en charge du mode sombre.

Ouvrir

Accordéon Bauhaus pour les organisations à but non lucratif

Un composant d’accordéon simple et réactif conçu avec des influences Bauhaus et une palette de couleurs chaudes de coucher de soleil, adapté aux organisations à but non lucratif. Inclut la prise en charge du mode sombre.

Ouvrir

Composant accordéon

Un composant d’accordéon avec une conception 3D, des effets réactifs et une prise en charge du thème sombre en utilisant uniquement HTML et CSS (Tailwind CSS). Le composant utilise CSS pour le mode sombre et inclut des transitions pour des accordéons fluides. Il est entièrement réactif. Aucun JavaScript n’est utilisé.

Ouvrir