Search Components

Accordion

Expandable/collapsible content panels

Material Design Accordion Component - Tailwind CSS

An accordion component with Material Design styling, including responsive effects and dark theme support. Uses Tailwind CSS and includes placeholder images/avatars.

Open Preview

                <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>

Accordion Component

Accordion Component with Neumorphism design, responsive effects and dark theme support.

Open Preview

                <div class="max-w-md mx-auto p-8">
  <div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg mb-4">
    <div class="p-4 cursor-pointer">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 1</h3>
    </div>
    <div class="p-4 hidden">
      <p class="text-gray-700 dark:text-gray-300">Content for section 1.</p>
    </div>
  </div>

  <div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg mb-4">
    <div class="p-4 cursor-pointer">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 2</h3>
    </div>
    <div class="p-4 hidden">
      <p class="text-gray-700 dark:text-gray-300">Content for section 2.</p>
    </div>
  </div>

  <div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg">
    <div class="p-4 cursor-pointer">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 3</h3>
    </div>
    <div class="p-4 hidden">
      <p class="text-gray-700 dark:text-gray-300">Content for section 3.</p>
    </div>
  </div>
</div>

<style>
.shadow-neumorphism-light {
  box-shadow: 7px 7px 15px #cbced1, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-dark {
  box-shadow: 7px 7px 15px #222222, -7px -7px 15px #444444;
}
</style>

Neumorphism Accordion Component

Accordion Component with Neumorphic design, responsive effects, and dark theme support using Tailwind CSS.

Open Preview

                <div x-data="{ activeTab: 1 }" class="max-w-3xl mx-auto p-8 dark:bg-gray-800 dark:text-white rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">

  <div class="mb-6">
    <button @click="activeTab = activeTab === 1 ? null : 1" class="w-full text-left py-3 px-4 text-gray-700 font-semibold rounded-md focus:outline-none focus:ring focus:ring-blue-300 dark:text-gray-300 dark:focus:ring-blue-700 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition duration-300 ease-in-out">
      <h2>Section 1</h2>
    </button>
    <div x-show="activeTab === 1" class="mt-2 p-4 text-gray-600 leading-relaxed dark:text-gray-400">
      <p>Content for section 1. This is where the detailed information for the first section goes.</p>
    </div>
  </div>

  <div class="mb-6">
    <button @click="activeTab = activeTab === 2 ? null : 2" class="w-full text-left py-3 px-4 text-gray-700 font-semibold rounded-md focus:outline-none focus:ring focus:ring-blue-300 dark:text-gray-300 dark:focus:ring-blue-700 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition duration-300 ease-in-out">
      <h2>Section 2</h2>
    </button>
    <div x-show="activeTab === 2" class="mt-2 p-4 text-gray-600 leading-relaxed dark:text-gray-400">
      <p>Content for section 2. More detailed information can be added here for the second section.</p>
    </div>
  </div>

  <div class="mb-6">
    <button @click="activeTab = activeTab === 3 ? null : 3" class="w-full text-left py-3 px-4 text-gray-700 font-semibold rounded-md focus:outline-none focus:ring focus:ring-blue-300 dark:text-gray-300 dark:focus:ring-blue-700 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition duration-300 ease-in-out">
      <h2>Section 3</h2>
    </button>
    <div x-show="activeTab === 3" class="mt-2 p-4 text-gray-600 leading-relaxed dark:text-gray-400">
      <p>Content for section 3. This is the content for the third and final section of the accordion.</p>
    </div>
  </div>

</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #cbced1, -7px -7px 15px #ffffff;
  }

  .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #4b5563, -7px -7px 15px #374151;
  }

  .shadow-neumorphic-light-inset {
    box-shadow: inset 5px 5px 10px #cbced1, inset -5px -5px 10px #ffffff;
  }

  .shadow-neumorphic-dark-inset {
    box-shadow: inset 5px 5px 10px #4b5563, inset -5px -5px 10px #374151;
  }

  /* Basic responsiveness */
  @media (max-width: 768px) {
    .p-8 {
      padding: 2rem;
    }
  }
</style>

An accordion component with 3D design, responsive effects, and dark theme support using only HTML and CSS (Tailwind CSS). The component uses CSS for dark mode and includes transitions for smooth accordions. It is fully responsive. No JavaScript is used.

Open Preview

                <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>

Search Components

Categories

Accordion

Material Design Accordion Component - Tailwind CSS

Accordion Component

Neumorphism Accordion Component

Accordion Component