Accordion Component
A complex, responsive accordion component designed for food/restaurant websites, featuring a clean Swiss/International typography style with a cheerful candy/sweet color scheme. Includes dark mode support.
HTML Code
<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>Related Components
Skeuomorphism E-commerce Accordion with Pastel Colors
Skeuomorphic Accordion Component for E-commerce with Pastel colors, focusing on complex interactions and responsiveness, including dark mode support.
Neumorphism Accordion Component
Accordion Component with Neumorphic design, responsive effects, and dark theme support using Tailwind CSS.
Accordion Component
A simple, responsive Accordion Component designed with a glassmorphism effect and an analogous color scheme, suitable for showcasing work or products in a portfolio.