검색 구성 요소

카테고리

아코디언

확장 가능/축소 가능한 콘텐츠 패널

머티리얼 디자인 아코디언 컴포넌트 - Tailwind CSS

반응형 효과 및 어두운 테마 지원을 포함한 Material Design 스타일의 아코디언 구성 요소입니다. Tailwind CSS를 사용하고 자리 표시자 이미지/아바타를 포함합니다.

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

아코디언 구성 요소

Neumorphism 디자인, 반응형 효과 및 어두운 테마를 지원하는 아코디언 구성 요소.

열다 미리 보기

                <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 구성 요소

뉴모픽 디자인, 반응형 효과 및 Tailwind CSS를 사용하는 어두운 테마를 지원하는 아코디언 구성 요소.

열다 미리 보기

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

아코디언 구성 요소

3D 디자인, 반응형 효과 및 어두운 테마가 있는 아코디언 구성 요소는 HTML 및 CSS(Tailwind CSS)만 사용합니다. 구성 요소는 다크 모드에 CSS를 사용하며 부드러운 아코디언을 위한 전환을 포함합니다. 완벽하게 반응합니다. JavaScript는 사용되지 않습니다.

열다 미리 보기

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