Fisarmonica

                <div class="flex flex-col p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-lg text-brown-700 dark:text-brown-300 font-bold mb-4">Dashboard</h2>
    <div class="accordion space-y-4">
        <!-- Accordion Item 1 -->
        <div class="bg-yellow-300 dark:bg-yellow-700 rounded-lg shadow-lg">
            <button class="flex justify-between w-full p-4 text-left text-brown-900 dark:text-gray-200">  
                <span>Item 1</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" /></svg>
            </button>
            <div class="p-4 bg-yellow-200 dark:bg-yellow-600 hidden">
                <img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="mb-2 rounded-md">
                <p class="text-brown-800 dark:text-brown-200">This is the content of item 1, providing insights and details.</p>
            </div>
        </div>
        
        <!-- Accordion Item 2 -->
        <div class="bg-green-300 dark:bg-green-700 rounded-lg shadow-lg">
            <button class="flex justify-between w-full p-4 text-left text-brown-900 dark:text-gray-200">  
                <span>Item 2</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" /></svg>
            </button>
            <div class="p-4 bg-green-200 dark:bg-green-600 hidden">
                <img src="https://picsum.photos/300/200?random=2" alt="Random Image" class="mb-2 rounded-md">
                <p class="text-brown-800 dark:text-brown-200">This is the content of item 2, providing insights and details.</p>
            </div>
        </div>
        
        <!-- Accordion Item 3 -->
        <div class="bg-red-300 dark:bg-red-700 rounded-lg shadow-lg">
            <button class="flex justify-between w-full p-4 text-left text-brown-900 dark:text-gray-200">  
                <span>Item 3</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" /></svg>
            </button>
            <div class="p-4 bg-red-200 dark:bg-red-600 hidden">
                <img src="https://picsum.photos/300/200?random=3" alt="Random Image" class="mb-2 rounded-md">
                <p class="text-brown-800 dark:text-brown-200">This is the content of item 3, providing insights and details.</p>
            </div>
        </div>
    </div>
</div>
              

                <div class="max-w-md mx-auto rounded-md overflow-hidden shadow-lg bg-stone-800 dark:bg-stone-900">
  <div class="accordion">
    <div class="accordion-item">
      <input type="checkbox" id="accordion1" class="hidden">
      <label for="accordion1" class="flex justify-between items-center p-4 cursor-pointer bg-stone-700 dark:bg-stone-800 text-stone-200 dark:text-stone-300">
        Section 1
        <svg class="w-5 h-5 text-stone-200 dark:text-stone-300 transform transition-transform duration-300 ease-in-out" 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="accordion-content px-4 pb-4 text-stone-300 dark:text-stone-400 hidden">
        <p>Content for section 1.</p>
      </div>
    </div>
    <div class="accordion-item">
      <input type="checkbox" id="accordion2" class="hidden">
      <label for="accordion2" class="flex justify-between items-center p-4 cursor-pointer bg-stone-700 dark:bg-stone-800 text-stone-200 dark:text-stone-300">
        Section 2
        <svg class="w-5 h-5 text-stone-200 dark:text-stone-300 transform transition-transform duration-300 ease-in-out" 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="accordion-content px-4 pb-4 text-stone-300 dark:text-stone-400 hidden">
        <p>Content for section 2.</p>
      </div>
    </div>
  </div>
</div>

<style>
.accordion-item input:checked ~ label svg {
  transform: rotate(180deg);
}
.accordion-item input:checked ~ .accordion-content {
  display: block;
}
</style>
              

                <div class="w-full max-w-md mx-auto rounded-lg overflow-hidden">
  <div class="bg-gray-800 text-gray-200 p-4 cursor-pointer flex justify-between items-center" onclick="this.nextElementSibling.classList.toggle('hidden')">
    <span>Section 1</span>
    <svg class="w-5 h-5 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
    </svg>
  </div>
  <div class="p-4 bg-gray-700 hidden">
    <p>Content for section 1.</p>
  </div>

  <div class="bg-gray-800 text-gray-200 p-4 cursor-pointer flex justify-between items-center" onclick="this.nextElementSibling.classList.toggle('hidden')">
    <span>Section 2</span>
    <svg class="w-5 h-5 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
    </svg>
  </div>
  <div class="p-4 bg-gray-700 hidden">
    <p>Content for section 2.</p>
  </div>

  <div class="bg-gray-800 text-gray-200 p-4 cursor-pointer flex justify-between items-center" onclick="this.nextElementSibling.classList.toggle('hidden')">
    <span>Section 3</span>
    <svg class="w-5 h-5 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
    </svg>
  </div>
  <div class="p-4 bg-gray-700 hidden">
    <p>Content for section 3.</p>
  </div>
</div>
              

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden md:max-w-2xl m-5">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/accordion1/400/300" alt="Project image">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-300 font-semibold">Project Name 1</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Project Title</a>
      <p class="mt-2 text-gray-500 dark:text-gray-400">This is a brief description of the project, highlighting its purpose and key features.</p>
      <div class="mt-4">
        <details class="group">
          <summary class="flex justify-between items-center font-medium cursor-pointer list-none text-gray-700 dark:text-gray-300">
            <span>Details</span>
            <span class="transition group-open:rotate-180">
              <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M12 15l-6-6 6-6"></path><path d="M18 15l-6-6 6-6"></path></svg>
            </span>
          </summary>
          <p class="text-gray-500 dark:text-gray-400 mt-3">
            More detailed information about the project, technologies used, challenges faced, and solutions implemented.
          </p>
        </details>
      </div>
    </div>
  </div>
</div>

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden md:max-w-2xl m-5">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/accordion2/400/300" alt="Project image">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-green-500 dark:text-green-300 font-semibold">Project Name 2</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Another Project Title</a>
      <p class="mt-2 text-gray-500 dark:text-gray-400">This is a brief description of the second project, highlighting its purpose and key features.</p>
       <div class="mt-4">
        <details class="group">
          <summary class="flex justify-between items-center font-medium cursor-pointer list-none text-gray-700 dark:text-gray-300">
            <span>Details</span>
            <span class="transition group-open:rotate-180">
              <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M12 15l-6-6 6-6"></path><path d="M18 15l-6-6 6-6"></path></svg>
            </span>
          </summary>
          <p class="text-gray-500 dark:text-gray-400 mt-3">
            More detailed information about the project, technologies used, challenges faced, and solutions implemented.
          </p>
        </details>
      </div>
    </div>
  </div>
</div>
              

                <div class="max-w-md mx-auto">  <div class="bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 shadow-xl rounded-lg">    <div class="border-b border-gray-300 dark:border-gray-600">      <button class="w-full flex justify-between items-center p-4 text-gray-700 dark:text-gray-300 font-semibold">        <span>Product Details</span>        <svg class="w-5 h-5 transform transition-transform duration-200 rotate-0" 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>      </button>      <div class="p-4 border-t border-gray-300 dark:border-gray-600 hidden">        <p class="text-gray-600 dark:text-gray-400 text-sm">Here you can add detailed product information like specifications, materials, etc. This content is hidden by default and revealed when the accordion is expanded.</p>      </div>    </div>    <div class="border-b border-gray-300 dark:border-gray-600">      <button class="w-full flex justify-between items-center p-4 text-gray-700 dark:text-gray-300 font-semibold">        <span>Shipping & Returns</span>        <svg class="w-5 h-5 transform transition-transform duration-200 rotate-0" 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>      </button>      <div class="p-4 border-t border-gray-300 dark:border-gray-600 hidden">        <p class="text-gray-600 dark:text-gray-400 text-sm">Information about shipping options, delivery times, and return policy goes here. Keep it concise and easy to read.</p>      </div>    </div>    <div>      <button class="w-full flex justify-between items-center p-4 text-gray-700 dark:text-gray-300 font-semibold">        <span>Customer Reviews</span>        <svg class="w-5 h-5 transform transition-transform duration-200 rotate-0" 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>      </button>      <div class="p-4 border-t border-gray-300 dark:border-gray-600 hidden">        <div class="flex items-start mb-4">          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar">          <div>            <p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Doe</p>            <p class="text-gray-600 dark:text-gray-400 text-sm">This product is amazing! Highly recommend.</p>          </div>        </div>        <div class="flex items-start">          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">          <div>            <p class="text-gray-700 dark:text-gray-300 font-semibold">John Smith</p>            <p class="text-gray-600 dark:text-gray-400 text-sm">Good quality and fast shipping.</p>          </div>        </div>      </div>    </div>  </div></div>
              

                <div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-md mx-auto">
    <h2 class="text-xl font-semibold text-center text-gray-800 dark:text-white">My Portfolio</h2>
    <div class="mt-4">
        <div class="rounded-lg shadow-md overflow-hidden">
            <div class="bg-purple-200 dark:bg-purple-600 p-4 cursor-pointer hover:bg-purple-300 dark:hover:bg-purple-500 transition-colors">
                <h3 class="font-semibold text-gray-800 dark:text-white">Project 1</h3>
                <p class="text-gray-600 dark:text-gray-300">Description of Project 1.</p>
            </div>
            <div class="bg-purple-100 dark:bg-purple-700 p-4 cursor-pointer hover:bg-purple-200 dark:hover:bg-purple-600 transition-colors">
                <h3 class="font-semibold text-gray-800 dark:text-white">Project 2</h3>
                <p class="text-gray-600 dark:text-gray-300">Description of Project 2.</p>
            </div>
            <div class="bg-purple-200 dark:bg-purple-600 p-4 cursor-pointer hover:bg-purple-300 dark:hover:bg-purple-500 transition-colors">
                <h3 class="font-semibold text-gray-800 dark:text-white">Project 3</h3>
                <p class="text-gray-600 dark:text-gray-300">Description of Project 3.</p>
            </div>
        </div>
    </div>
    <div class="mt-6 text-center">
        <img src="https://picsum.photos/200/100" alt="Project Image" class="rounded-lg mb-2">
        <p class="text-gray-800 dark:text-white">Showcasing beautiful projects.</p>
    </div>
    <div class="mt-4 text-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white dark:border-gray-800">
    </div>
</div>
              

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Accordion Component</h2>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md transition-shadow duration-300 ease-in-out hover:shadow-lg">
        <div class="border-b border-gray-300 dark:border-gray-700">
            <button class="flex justify-between items-center w-full p-4 text-left text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
                <span class="font-medium">Section 1</span>
                <svg class="w-4 h-4 text-gray-600 dark:text-gray-300 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15l-3-3m0 0l3-3m-3 3h12" /></svg>
            </button>
            <div class="hidden p-4 bg-gray-50 dark:bg-gray-700">
                <p class="text-gray-800 dark:text-gray-300">This is the content for section 1. You can place any information relevant to this section.</p>
                <img src="https://picsum.photos/400/200?random=1" alt="Random Image 1" class="mt-2 rounded-md"> 
            </div>
        </div>
        <div class="border-b border-gray-300 dark:border-gray-700">
            <button class="flex justify-between items-center w-full p-4 text-left text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
                <span class="font-medium">Section 2</span>
                <svg class="w-4 h-4 text-gray-600 dark:text-gray-300 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15l-3-3m0 0l3-3m-3 3h12" /></svg>
            </button>
            <div class="hidden p-4 bg-gray-50 dark:bg-gray-700">
                <p class="text-gray-800 dark:text-gray-300">This is the content for section 2. You can place any information relevant to this section.</p>
                <img src="https://picsum.photos/400/200?random=2" alt="Random Image 2" class="mt-2 rounded-md"> 
            </div>
        </div>
        <div>
            <button class="flex justify-between items-center w-full p-4 text-left text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none">
                <span class="font-medium">Section 3</span>
                <svg class="w-4 h-4 text-gray-600 dark:text-gray-300 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15l-3-3m0 0l3-3m-3 3h12" /></svg>
            </button>
            <div class="hidden p-4 bg-gray-50 dark:bg-gray-700">
                <p class="text-gray-800 dark:text-gray-300">This is the content for section 3. You can place any information relevant to this section.</p>
                <img src="https://picsum.photos/400/200?random=3" alt="Random Image 3" class="mt-2 rounded-md"> 
            </div>
        </div>
    </div>
</div>
              

                <div x-data="{ open: false }" class="border border-gray-300 dark:border-gray-700 rounded-lg mb-4">
  <button @click="open = !open" class="w-full flex justify-between items-center p-4 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none">
    <span class="font-bold">Accordion Title</span>
    <svg class="w-5 h-5 transform transition-transform duration-200" :class="{ 'rotate-180': open }" 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>
  </button>
  <div x-show="open" class="p-4 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300">
    <p>Accordion content goes here. This is a simple example with basic styling.</p>
  </div>
</div>
              

                <div x-data='{ open: false }' class='max-w-md mx-auto bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md overflow-hidden md:max-w-lg my-4'>
    <div class='md:flex'>
        <div class='w-full p-4'>
            <div class='flex justify-between items-center'>
                <h2 class='text-lg leading-6 font-medium text-stone-900 dark:text-stone-100'>Accordion Title 1</h2>
                <button x-on:click='open = !open' class='text-stone-500 dark:text-stone-300 hover:text-stone-600 dark:hover:text-stone-400 focus:outline-none'>
                    <svg class='h-6 w-6 transform' :class='{ "rotate-180": open }' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
                        <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'></path>
                    </svg>
                </button>
            </div>
            <div x-show='open' class='mt-2 text-sm text-stone-600 dark:text-stone-400'>
                <p>This is the collapsible content for Accordion Item 1. It provides additional information or details related to the title. The design is simple and follows Material Design principles with subtle shadows and rounded corners.</p>
            </div>
        </div>
    </div>
</div>

<div x-data='{ open: false }' class='max-w-md mx-auto bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md overflow-hidden md:max-w-lg my-4'>
    <div class='md:flex'>
        <div class='w-full p-4'>
            <div class='flex justify-between items-center'>
                <h2 class='text-lg leading-6 font-medium text-stone-900 dark:text-stone-100'>Accordion Title 2</h2>
                <button x-on:click='open = !open' class='text-stone-500 dark:text-stone-300 hover:text-stone-600 dark:hover:text-stone-400 focus:outline-none'>
                    <svg class='h-6 w-6 transform' :class='{ "rotate-180": open }' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
                        <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'></path>
                    </svg>
                </button>
            </div>
            <div x-show='open' class='mt-2 text-sm text-stone-600 dark:text-stone-400'>
                <p>This is the collapsible content for Accordion Item 2. You can add more text, images, or other HTML elements here. The triadic color scheme is subtly applied through text and background colors that are somewhat evenly spaced on the color wheel, like various shades of grey/stone which could be paired with other triadic colors like orange and green in a larger layout.</p>
            </div>
        </div>
    </div>
</div>
              

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