아코디언 구성 요소
음식/레스토랑 웹사이트를 위해 설계된 복잡하고 반응이 빠른 아코디언 구성 요소로, 쾌활한 사탕/달콤한 색 구성표와 함께 깨끗한 스위스/국제 타이포그래피 스타일을 특징으로 합니다. 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-pink-50 dark:bg-gray-800 rounded-lg shadow-xl">
<h2 class="text-4xl font-extrabold text-pink-600 dark:text-pink-400 mb-8 text-center tracking-tight leading-tight">Our Delicious Menu Categories</h2>
<div class="space-y-4">
<!-- Accordion Item 1 -->
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden group">
<input type="checkbox" id="accordion-1" class="hidden peer" />
<label for="accordion-1" class="flex justify-between items-center p-6 cursor-pointer select-none border-b-2 border-pink-100 dark:border-gray-600 group-hover:bg-pink-50 dark:group-hover:bg-gray-600 transition-colors duration-200">
<span class="text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-tight">Appetizers & Starters</span>
<svg class="w-8 h-8 text-pink-500 dark:text-pink-400 transform transition-transform duration-300 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</label>
<div class="peer-checked:max-h-screen max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
<div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 bg-pink-50 dark:bg-gray-800">
<div class="flex items-start">
<img src="https://picsum.photos/id/1080/60/60" alt="Spring Rolls" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Crispy Spring Rolls</h4>
<p class="text-gray-600 dark:text-gray-300">Vegetable-filled rolls served with sweet chili sauce.</p>
<span class="text-pink-600 dark:text-pink-400 font-bold text-lg">$6.99</span>
</div>
</div>
<div class="flex items-start">
<img src="https://picsum.photos/id/400/60/60" alt="Garlic Bread" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Cheesy Garlic Bread</h4>
<p class="text-gray-600 dark:text-gray-300">Toasted baguette with garlic butter and mozzarella.</p>
<span class="text-pink-600 dark:text-pink-400 font-bold text-lg">$5.49</span>
</div>
</div>
<div class="flex items-start">
<img src="https://picsum.photos/id/350/60/60" alt="Hummus Plate" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Classic Hummus Plate</h4>
<p class="text-gray-600 dark:text-gray-300">Creamy hummus with warm pita bread and olives.</p>
<span class="text-pink-600 dark:text-pink-400 font-bold text-lg">$7.99</span>
</div>
</div>
<div class="flex items-start">
<img src="https://picsum.photos/id/900/60/60" alt="Stuffed Mushrooms" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Spinach & Artichoke Dip</h4>
<p class="text-gray-600 dark:text-gray-300">Creamy dip with tortilla chips and fresh veggies.</p>
<span class="text-pink-600 dark:text-pink-400 font-bold text-lg">$8.75</span>
</div>
</div>
</div>
</div>
</div>
<!-- Accordion Item 2 -->
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden group">
<input type="checkbox" id="accordion-2" class="hidden peer" />
<label for="accordion-2" class="flex justify-between items-center p-6 cursor-pointer select-none border-b-2 border-pink-100 dark:border-gray-600 group-hover:bg-pink-50 dark:group-hover:bg-gray-600 transition-colors duration-200">
<span class="text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-tight">Main Courses</span>
<svg class="w-8 h-8 text-mint-500 dark:text-mint-400 transform transition-transform duration-300 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</label>
<div class="peer-checked:max-h-screen max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
<div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 bg-pink-50 dark:bg-gray-800">
<div class="flex items-start">
<img src="https://picsum.photos/id/200/60/60" alt="Grilled Salmon" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Grilled Atlantic Salmon</h4>
<p class="text-gray-600 dark:text-gray-300">Served with roasted vegetables and lemon-dill sauce.</p>
<span class="text-mint-600 dark:text-mint-400 font-bold text-lg">$22.50</span>
</div>
</div>
<div class="flex items-start">
<img src="https://picsum.photos/id/250/60/60" alt="Pasta Primavera" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Creamy Pasta Primavera</h4>
<p class="text-gray-600 dark:text-gray-300">Fettuccine with seasonal vegetables in a light cream sauce.</p>
<span class="text-mint-600 dark:text-mint-400 font-bold text-lg">$16.00</span>
</div>
</div>
<div class="flex items-start">
<img src="https://picsum.photos/id/237/60/60" alt="Beef Steak" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Ribeye Steak (10oz)</h4>
<p class="text-gray-600 dark:text-gray-300">Grilled to perfection, served with mashed potatoes and aspargus.</p>
<span class="text-mint-600 dark:text-mint-400 font-bold text-lg">$28.99</span>
</div>
</div>
<div class="flex items-start">
<img src="https://picsum.photos/id/167/60/60" alt="Mushroom Risotto" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Wild Mushroom Risotto</h4>
<p class="text-gray-600 dark:text-gray-300">Arborio rice cooked with assorted wild mushrooms and Parmesan.</p>
<span class="text-mint-600 dark:text-mint-400 font-bold text-lg">$17.50</span>
</div>
</div>
</div>
</div>
</div>
<!-- Accordion Item 3 -->
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden group">
<input type="checkbox" id="accordion-3" class="hidden peer" />
<label for="accordion-3" class="flex justify-between items-center p-6 cursor-pointer select-none border-b-2 border-pink-100 dark:border-gray-600 group-hover:bg-pink-50 dark:group-hover:bg-gray-600 transition-colors duration-200">
<span class="text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-tight">Desserts & Sweet Treats</span>
<svg class="w-8 h-8 text-purple-500 dark:text-purple-400 transform transition-transform duration-300 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</label>
<div class="peer-checked:max-h-screen max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
<div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 bg-pink-50 dark:bg-gray-800">
<div class="flex items-start">
<img src="https://picsum.photos/id/1025/60/60" alt="Chocolate Cake" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Decadent Chocolate Lava Cake</h4>
<p class="text-gray-600 dark:text-gray-300">Warm cake with a molten chocolate center, served with ice cream.</p>
<span class="text-purple-600 dark:text-purple-400 font-bold text-lg">$8.00</span>
</div>
</div>
<div class="flex items-start">
<img src="https://picsum.photos/id/1050/60/60" alt="Cheesecake" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">New York Style Cheesecake</h4>
<p class="text-gray-600 dark:text-gray-300">Classic creamy cheesecake with berry compote.</p>
<span class="text-purple-600 dark:text-purple-400 font-bold text-lg">$7.50</span>
</div>
</div>
<div class="flex items-start">
<img src="https://picsum.photos/id/1060/60/60" alt="Fruit Tart" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Seasonal Fresh Fruit Tart</h4>
<p class="text-gray-600 dark:text-gray-300">Buttery crust filled with pastry cream and fresh fruits.</p>
<span class="text-purple-600 dark:text-purple-400 font-bold text-lg">$7.25</span>
</div>
</div>
<div class="flex items-start">
<img src="https://picsum.photos/id/1059/60/60" alt="Macarons" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Assorted French Macarons</h4>
<p class="text-gray-600 dark:text-gray-300">Selection of delicate French macarons (3 pieces).</p>
<span class="text-purple-600 dark:text-purple-400 font-bold text-lg">$6.50</span>
</div>
</div>
</div>
</div>
</div>
<!-- Accordion Item 4 -->
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden group">
<input type="checkbox" id="accordion-4" class="hidden peer" />
<label for="accordion-4" class="flex justify-between items-center p-6 cursor-pointer select-none border-b-2 border-pink-100 dark:border-gray-600 group-hover:bg-pink-50 dark:group-hover:bg-gray-600 transition-colors duration-200">
<span class="text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-tight">Beverages</span>
<svg class="w-8 h-8 text-blue-500 dark:text-blue-400 transform transition-transform duration-300 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</label>
<div class="peer-checked:max-h-screen max-h-0 overflow-hidden transition-all duration-500 ease-in-out">
<div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 bg-pink-50 dark:bg-gray-800">
<div class="flex items-start">
<img src="https://picsum.photos/id/225/60/60" alt="Iced Coffee" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Espresso (Various)</h4>
<p class="text-gray-600 dark:text-gray-300">Selection of hot and iced coffee beverages.</p>
<span class="text-blue-600 dark:text-blue-400 font-bold text-lg">$3.00 - $5.50</span>
</div>
</div>
<div class="flex items-start">
<img src="https://picsum.photos/id/220/60/60" alt="Fresh Juice" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Freshly Squeezed Juices</h4>
<p class="text-gray-600 dark:text-gray-300">Orange, Apple, Carrot, or Mixed Berry.</p>
<span class="text-blue-600 dark:text-blue-400 font-bold text-lg">$4.75</span>
</div>
</div>
<div class="flex items-start">
<img src="https://picsum.photos/id/215/60/60" alt="Soft Drinks" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Soft Drinks / Soda</h4>
<p class="text-gray-600 dark:text-gray-300">Coke, Diet Coke, Sprite, Ginger Ale.</p>
<span class="text-blue-600 dark:text-blue-400 font-bold text-lg">$2.50</span>
</div>
</div>
<div class="flex items-start">
<img src="https://picsum.photos/id/210/60/60" alt="Sparkling Water" class="w-16 h-16 object-cover rounded-full mr-4 shadow-md" />
<div>
<h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Sparkling / Still Water</h4>
<p class="text-gray-600 dark:text-gray-300">San Pellegrino or Acqua Panna (500ml).</p>
<span class="text-blue-600 dark:text-blue-400 font-bold text-lg">$3.50</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>관련 구성 요소
레트로아코디언심플
비즈니스 웹 사이트를 위한 간단하고 반응이 빠른 레트로 테마의 아코디언 구성 요소로, Tailwind CSS를 사용하여 다크 모드를 지원합니다. 이 구성 요소는 트라이어딕 색 구성표를 사용하며 JavaScript가 필요하지 않습니다.
소셜 미디어 아코디언
어두운 테마가 있는 반응형 아코디언 구성 요소는 Material Design 원칙, 트라이어딕 색 구성표 및 간단한 레이아웃을 사용하여 소셜 미디어 인터페이스를 지원합니다. JavaScript는 없으며 Tailwind CSS 클래스가있는 HTML 만 있습니다. 다크 모드 스타일은 dark: 접두사를 사용하여 포함됩니다.