Neumorphic Accordion

<div class="max-w-xl mx-auto p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-inner dark:shadow-inner-dark">
  <div class="text-center mb-6">
    <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100">My Projects</h2>
    <p class="mt-2 text-md text-gray-600 dark:text-gray-300">Here's a glimpse of my recent work.</p>
  </div>

  <div class="group mb-4">
    <input type="checkbox" id="accordion-1" class="hidden peer" />
    <label for="accordion-1" class="flex items-center justify-between p-4 cursor-pointer rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 font-semibold text-lg
      shadow-neumorphic dark:shadow-neumorphic-dark transition duration-300 ease-in-out
      peer-checked:shadow-neumorphic-inset dark:peer-checked:shadow-neumorphic-inset-dark">
      <span>Project Alpha</span>
      <svg class="w-6 h-6 transform transition-transform duration-300 group-hover:scale-110 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="max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-40">
      <div class="p-4 pt-2 text-gray-700 dark:text-gray-300">
        <p class="mb-2 text-sm">A responsive web application built with modern front-end technologies. Focused on delivering a seamless user experience.</p>
        <img src="https://picsum.photos/400/250?random=1" alt="Project Alpha Screenshot" class="w-full h-auto rounded-lg shadow-sm mb-2">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
      </div>
    </div>
  </div>

  <div class="group mb-4">
    <input type="checkbox" id="accordion-2" class="hidden peer" />
    <label for="accordion-2" class="flex items-center justify-between p-4 cursor-pointer rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 font-semibold text-lg
      shadow-neumorphic dark:shadow-neumorphic-dark transition duration-300 ease-in-out
      peer-checked:shadow-neumorphic-inset dark:peer-checked:shadow-neumorphic-inset-dark">
      <span>Project Beta</span>
      <svg class="w-6 h-6 transform transition-transform duration-300 group-hover:scale-110 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="max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-40">
      <div class="p-4 pt-2 text-gray-700 dark:text-gray-300">
        <p class="mb-2 text-sm">Developed a robust backend API for data management and user authentication. Scalable and efficient.</p>
        <img src="https://picsum.photos/400/250?random=2" alt="Project Beta Screenshot" class="w-full h-auto rounded-lg shadow-sm mb-2">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
      </div>
    </div>
  </div>

  <div class="group">
    <input type="checkbox" id="accordion-3" class="hidden peer" />
    <label for="accordion-3" class="flex items-center justify-between p-4 cursor-pointer rounded-xl bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100 font-semibold text-lg
      shadow-neumorphic dark:shadow-neumorphic-dark transition duration-300 ease-in-out
      peer-checked:shadow-neumorphic-inset dark:peer-checked:shadow-neumorphic-inset-dark">
      <span>Project Gamma</span>
      <svg class="w-6 h-6 transform transition-transform duration-300 group-hover:scale-110 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="max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-40">
      <div class="p-4 pt-2 text-gray-700 dark:text-gray-300">
        <p class="mb-2 text-sm">Designed and implemented UI/UX for a mobile application, focusing on intuitive navigation and visual hierarchy.</p>
        <img src="https://picsum.photos/400/250?random=3" alt="Project Gamma Screenshot" class="w-full h-auto rounded-lg shadow-sm mb-2">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
      </div>
    </div>
  </div>
</div>

<!-- To make neumorphism work, you need CSS variables in your global CSS. -->
<!-- Add this to your main CSS file (e.g., style.css or a <style> tag): -->
<!--
:root {
  --shadow-light: #ffffff;
  --shadow-dark: #cccccc;
  --neumorphic-blur: 10px;
  --neumorphic-distance: 4px;
}

.dark {
  --shadow-light: #444444;
  --shadow-dark: #1a1a1a;
}

.shadow-neumorphic {
  box-shadow: var(--neumorphic-distance) var(--neumorphic-distance) var(--neumorphic-blur) var(--shadow-dark), 
              calc(-1 * var(--neumorphic-distance)) calc(-1 * var(--neumorphic-distance)) var(--neumorphic-blur) var(--shadow-light);
}

.shadow-neumorphic-dark {
  box-shadow: var(--neumorphic-distance) var(--neumorphic-distance) var(--neumorphic-blur) var(--shadow-dark), 
              calc(-1 * var(--neumorphic-distance)) calc(-1 * var(--neumorphic-distance)) var(--neumorphic-blur) var(--shadow-light);
}

.shadow-neumorphic-inset {
  box-shadow: inset var(--neumorphic-distance) var(--neumorphic-distance) var(--neumorphic-blur) var(--shadow-dark), 
              inset calc(-1 * var(--neumorphic-distance)) calc(-1 * var(--neumorphic-distance)) var(--neumorphic-blur) var(--shadow-light);
}

.shadow-neumorphic-inset-dark {
  box-shadow: inset var(--neumorphic-distance) var(--neumorphic-distance) var(--neumorphic-blur) var(--shadow-dark), 
              inset calc(-1 * var(--neumorphic-distance)) calc(-1 * var(--neumorphic-distance)) var(--neumorphic-blur) var(--shadow-light);
}

.shadow-inner {
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.1), inset -3px -3px 6px rgba(255,255,255,0.7);
}

.dark .shadow-inner-dark {
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.6), inset -3px -3px 6px rgba(255,255,255,0.05);
}
-->