Accordion

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

                <div class="max-w-md mx-auto p-8">
  <div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg mb-4">
    <div class="p-4 cursor-pointer">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 1</h3>
    </div>
    <div class="p-4 hidden">
      <p class="text-gray-700 dark:text-gray-300">Content for section 1.</p>
    </div>
  </div>

  <div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg mb-4">
    <div class="p-4 cursor-pointer">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 2</h3>
    </div>
    <div class="p-4 hidden">
      <p class="text-gray-700 dark:text-gray-300">Content for section 2.</p>
    </div>
  </div>

  <div class="shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg">
    <div class="p-4 cursor-pointer">
      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Section 3</h3>
    </div>
    <div class="p-4 hidden">
      <p class="text-gray-700 dark:text-gray-300">Content for section 3.</p>
    </div>
  </div>
</div>

<style>
.shadow-neumorphism-light {
  box-shadow: 7px 7px 15px #cbced1, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-dark {
  box-shadow: 7px 7px 15px #222222, -7px -7px 15px #444444;
}
</style>
              

                <div x-data="{ activeTab: 1 }" class="max-w-3xl mx-auto p-8 dark:bg-gray-800 dark:text-white rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">

  <div class="mb-6">
    <button @click="activeTab = activeTab === 1 ? null : 1" class="w-full text-left py-3 px-4 text-gray-700 font-semibold rounded-md focus:outline-none focus:ring focus:ring-blue-300 dark:text-gray-300 dark:focus:ring-blue-700 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition duration-300 ease-in-out">
      <h2>Section 1</h2>
    </button>
    <div x-show="activeTab === 1" class="mt-2 p-4 text-gray-600 leading-relaxed dark:text-gray-400">
      <p>Content for section 1. This is where the detailed information for the first section goes.</p>
    </div>
  </div>

  <div class="mb-6">
    <button @click="activeTab = activeTab === 2 ? null : 2" class="w-full text-left py-3 px-4 text-gray-700 font-semibold rounded-md focus:outline-none focus:ring focus:ring-blue-300 dark:text-gray-300 dark:focus:ring-blue-700 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition duration-300 ease-in-out">
      <h2>Section 2</h2>
    </button>
    <div x-show="activeTab === 2" class="mt-2 p-4 text-gray-600 leading-relaxed dark:text-gray-400">
      <p>Content for section 2. More detailed information can be added here for the second section.</p>
    </div>
  </div>

  <div class="mb-6">
    <button @click="activeTab = activeTab === 3 ? null : 3" class="w-full text-left py-3 px-4 text-gray-700 font-semibold rounded-md focus:outline-none focus:ring focus:ring-blue-300 dark:text-gray-300 dark:focus:ring-blue-700 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition duration-300 ease-in-out">
      <h2>Section 3</h2>
    </button>
    <div x-show="activeTab === 3" class="mt-2 p-4 text-gray-600 leading-relaxed dark:text-gray-400">
      <p>Content for section 3. This is the content for the third and final section of the accordion.</p>
    </div>
  </div>

</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #cbced1, -7px -7px 15px #ffffff;
  }

  .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #4b5563, -7px -7px 15px #374151;
  }

  .shadow-neumorphic-light-inset {
    box-shadow: inset 5px 5px 10px #cbced1, inset -5px -5px 10px #ffffff;
  }

  .shadow-neumorphic-dark-inset {
    box-shadow: inset 5px 5px 10px #4b5563, inset -5px -5px 10px #374151;
  }

  /* Basic responsiveness */
  @media (max-width: 768px) {
    .p-8 {
      padding: 2rem;
    }
  }
</style>
              

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