CCHub Logo CCHub Tailwind Collection
Komponenten Akkordeon Akkordeon-Komponente

Akkordeon-Komponente

Eine komplexe, reaktionsschnelle Akkordeon-Komponente, die für Food-/Restaurant-Websites entwickelt wurde und einen klaren schweizerischen/internationalen Typografie-Stil mit einem fröhlichen Bonbon-/Süßigkeiten-Farbschema bietet. Inklusive Unterstützung für den Dunkelmodus.

Vorschau

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>

Verwandte Komponenten

Bauhaus-Akkordeon für Non-Profit

Eine einfache, reaktionsschnelle Akkordeon-Komponente, die mit Bauhaus-Einflüssen und einem warmen Farbschema für den Sonnenuntergang gestaltet wurde und sich für gemeinnützige Organisationen eignet. Enthält Unterstützung für den Dunkelmodus.

Offen

Akkordeon-Komponente

Akkordeonkomponente mit Materialdesign, Farbschema in Erdtönen, einfache Komplexität für E-Commerce, reaktionsschnell mit Unterstützung für dunkle Themen.

Offen

Neumorphes Akkordeon

Eine einfache, reaktionsschnelle und mit dem Dunkelmodus kompatible Akkordeonkomponente mit einem neumorphen Graustufendesign, die sich für Portfolio-Abschnitte eignet.

Offen