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