すべてのコンポーネント

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-gray-900 dark:via-purple-900 dark:to-indigo-900 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-2xl bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-xl shadow-lg border border-white/40 dark:border-gray-700/60 overflow-hidden relative">
    <div class="absolute inset-0 bg-gradient-to-br from-pink-200/50 via-purple-200/50 to-blue-200/50 dark:from-gray-700/50 dark:via-purple-700/50 dark:to-indigo-700/50 opacity-20 pointer-events-none rounded-xl"></div>
    <div class="p-4 sm:p-6 lg:p-8 space-y-4 relative z-10">
      <!-- Media Embed Area -->
      <div class="relative w-full aspect-video rounded-lg overflow-hidden shadow-md border border-white/50 dark:border-gray-700/70">
        <!-- Placeholder for actual embed, like an iframe for YouTube or Vimeo -->
        <img src="https://picsum.photos/600/338?random=1" alt="Placeholder Media" class="w-full h-full object-cover">
        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 text-white text-lg font-semibold">
          Video Placeholder
        </div>
      </div>

      <!-- Content Details -->
      <div class="space-y-3">
        <h2 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-100">
          Exploring the Serene Landscapes
        </h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm sm:text-base">
          Dive into the breathtaking beauty of nature with this captivating journey through its peaceful and awe-inspiring vistas. Discover tranquility in every frame.
        </p>
        <div class="flex items-center space-x-3 text-gray-600 dark:text-gray-400 text-xs sm:text-sm pt-2">
          <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full object-cover border border-white/50 dark:border-gray-700/70 shadow-sm">
          <span>By Jessica Lee</span>
          <span class="text-gray-500 dark:text-gray-600">•</span>
          <span>March 15, 2024</span>
        </div>
      </div>
    </div>
  </div>
</div>
              

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-950 flex items-center justify-center font-sans">
  <div class="w-full max-w-2xl bg-gray-50 dark:bg-gray-800 rounded-3xl p-6 sm:p-8 md:p-10 shadow-2xl overflow-hidden
    dark:shadow-[0_10px_20px_rgba(0,0,0,0.7),_0_0_0_1px_rgba(255,255,255,0.05)_inset]
    shadow-[0_10px_20px_rgba(0,0,0,0.1),_0_0_0_1px_rgba(0,0,0,0.05)_inset] 
    border border-gray-100 dark:border-gray-700">

    <!-- Header Section (Skeuomorphic Button/Toggle) -->
    <div class="flex items-center justify-between mb-8">
      <div class="flex items-center space-x-3">
        <button class="relative p-2 rounded-xl bg-gray-200 dark:bg-gray-700
          shadow-[0_3px_6px_rgba(0,0,0,0.15),_0_1px_2px_rgba(0,0,0,0.05)_inset]
          dark:shadow-[0_3px_6px_rgba(0,0,0,0.7),_0_1px_2px_rgba(255,255,255,0.05)_inset]
          hover:shadow-[0_1px_2px_rgba(0,0,0,0.1)_inset,_0_0_0_1px_rgba(0,0,0,0.05)_inset]
          dark:hover:shadow-[0_1px_2px_rgba(255,255,255,0.1)_inset,_0_0_0_1px_rgba(255,255,255,0.05)_inset]
          transition-all duration-200 ease-in-out
          text-gray-700 dark:text-gray-300">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">Feed</h2>
      </div>

      <div class="relative w-20 h-10 rounded-full cursor-pointer
        bg-gray-300 dark:bg-gray-600
        shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_0_0_1px_rgba(0,0,0,0.05)]
        dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.7),_inset_0_0_0_1px_rgba(255,255,255,0.05)]
        flex items-center p-1 transition-colors duration-300 ease-in-out">
        <!-- Toggle switch for dark mode (visual only, requires JS for functionality) -->
        <div class="absolute left-1 h-8 w-8 rounded-full bg-white dark:bg-gray-800 shadow-md
          dark:translate-x-10 transform transition-transform duration-300 ease-in-out
          dark:shadow-[0_2px_6px_rgba(0,0,0,0.7)]
          shadow-[0_2px_6px_rgba(0,0,0,0.1)]"></div>
        <span class="absolute top-1/2 -translate-y-1/2 left-3 text-sm text-gray-600 dark:text-gray-400 opacity-0 dark:opacity-100 transition-opacity duration-300 ease-in-out">🌜</span>
        <span class="absolute top-1/2 -translate-y-1/2 right-3 text-sm text-gray-600 dark:text-gray-400 opacity-100 dark:opacity-0 transition-opacity duration-300 ease-in-out">☀️</span>
      </div>
    </div>

    <!-- Social Post Card (Mimicking a physical card) -->
    <div class="relative mb-8 p-6 rounded-2xl bg-gray-100 dark:bg-gray-750
      shadow-[0_5px_10px_rgba(0,0,0,0.1),_0_0_0_1px_rgba(0,0,0,0.05)_inset]
      dark:shadow-[0_5px_10px_rgba(0,0,0,0.7),_0_0_0_1px_rgba(255,255,255,0.05)_inset]
      border border-gray-200 dark:border-gray-700">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-sm mr-4"
          src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <p class="font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 mb-4 leading-relaxed">Exploring the wonders of Skeuomorphism in web design! It's fascinating how digital elements can mimic real-world counterparts. #Skeuomorphism #WebDesign</p>
      <img class="w-full h-48 object-cover rounded-xl mb-4
        shadow-[0_2px_4px_rgba(0,0,0,0.1),_0_0_0_1px_rgba(0,0,0,0.05)_inset]
        dark:shadow-[0_2px_4px_rgba(0,0,0,0.5),_0_0_0_1px_rgba(255,255,255,0.05)_inset]
        border border-gray-300 dark:border-gray-600" src="https://picsum.photos/600/400?random=1" alt="Post Image">

      <div class="flex justify-around items-center pt-4 border-t border-gray-200 dark:border-gray-700">
        <button class="flex items-center space-x-2 p-2 rounded-xl group
          text-gray-600 dark:text-gray-300
          hover:text-blue-500 dark:hover:text-blue-400
          active:scale-95 transition-transform duration-100 ease-in-out">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6
            group-hover:drop-shadow-[0_0_5px_rgba(60,110,255,0.5)]
            group-active:drop-shadow-[0_0_2px_rgba(60,110,255,0.5)]
            " fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
          <span class="hidden sm:inline">Liked</span>
        </button>
        <button class="flex items-center space-x-2 p-2 rounded-xl group
          text-gray-600 dark:text-gray-300
          hover:text-green-500 dark:hover:text-green-400
          active:scale-95 transition-transform duration-100 ease-in-out">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6
          group-hover:drop-shadow-[0_0_5px_rgba(0,180,0,0.5)]
            group-active:drop-shadow-[0_0_2px_rgba(0,180,0,0.5)]
          " fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
          <span class="hidden sm:inline">Comment</span>
        </button>
        <button class="flex items-center space-x-2 p-2 rounded-xl group
          text-gray-600 dark:text-gray-300
          hover:text-purple-500 dark:hover:text-purple-400
          active:scale-95 transition-transform duration-100 ease-in-out">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6
          group-hover:drop-shadow-[0_0_5px_rgba(128,0,128,0.5)]
            group-active:drop-shadow-[0_0_2px_rgba(128,0,128,0.5)]
          " fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 13.111 9 12.836 9 12.5c0-.336-.118-.611-.316-.842M12 2L12 6M12 18L12 22M15 9l-3-3M9 9l-3-3M6.5 13.5l-2 2M17.5 13.5l2 2M4 12H2M22 12h-2m-13.5-3l-2-2m-2-2L15 9m-2 2h-2m-2-2L9 9m-2 2h-2"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6M6 10h.01M10 10h.01M14 10h.01M18 10h.01M2 14h.01M6 14h.01M10 14h.01M14 14h.01M18 14h.01M22 14h.01"></path>
          </svg>
          <span class="hidden sm:inline">Share</span>
        </button>
      </div>
    </div>

    <!-- Another Post Card (Slightly different content) -->
    <div class="relative p-6 rounded-2xl bg-gray-100 dark:bg-gray-750
      shadow-[0_5px_10px_rgba(0,0,0,0.1),_0_0_0_1px_rgba(0,0,0,0.05)_inset]
      dark:shadow-[0_5px_10px_rgba(0,0,0,0.7),_0_0_0_1px_rgba(255,255,255,0.05)_inset]
      border border-gray-200 dark:border-gray-700">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-sm mr-4"
          src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar">
        <div>
          <p class="font-semibold text-gray-800 dark:text-gray-100">Jane Smith</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Yesterday</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 mb-4 leading-relaxed">Loving the monochromatic aesthetic! It creates such a sophisticated and cohesive look. Perfect for social feeds. ✨</p>
      <img class="w-full h-48 object-cover rounded-xl mb-4
        shadow-[0_2px_4px_rgba(0,0,0,0.1),_0_0_0_1px_rgba(0,0,0,0.05)_inset]
        dark:shadow-[0_2px_4px_rgba(0,0,0,0.5),_0_0_0_1px_rgba(255,255,255,0.05)_inset]
        border border-gray-300 dark:border-gray-600" src="https://picsum.photos/600/400?random=2" alt="Post Image">

      <div class="flex justify-around items-center pt-4 border-t border-gray-200 dark:border-gray-700">
        <button class="flex items-center space-x-2 p-2 rounded-xl group
          text-gray-600 dark:text-gray-300
          hover:text-blue-500 dark:hover:text-blue-400
          active:scale-95 transition-transform duration-100 ease-in-out">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6
            group-hover:drop-shadow-[0_0_5px_rgba(60,110,255,0.5)]
            group-active:drop-shadow-[0_0_2px_rgba(60,110,255,0.5)]
            " fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
          <span class="hidden sm:inline">Liked</span>
        </button>
        <button class="flex items-center space-x-2 p-2 rounded-xl group
          text-gray-600 dark:text-gray-300
          hover:text-green-500 dark:hover:text-green-400
          active:scale-95 transition-transform duration-100 ease-in-out">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6
          group-hover:drop-shadow-[0_0_5px_rgba(0,180,0,0.5)]
            group-active:drop-shadow-[0_0_2px_rgba(0,180,0,0.5)]
          " fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
          <span class="hidden sm:inline">Comment</span>
        </button>
        <button class="flex items-center space-x-2 p-2 rounded-xl group
          text-gray-600 dark:text-gray-300
          hover:text-purple-500 dark:hover:text-purple-400
          active:scale-95 transition-transform duration-100 ease-in-out">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6
          group-hover:drop-shadow-[0_0_5px_rgba(128,0,128,0.5)]
            group-active:drop-shadow-[0_0_2px_rgba(128,0,128,0.5)]
          " fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 13.111 9 12.836 9 12.5c0-.336-.118-.611-.316-.842M12 2L12 6M12 18L12 22M15 9l-3-3M9 9l-3-3M6.5 13.5l-2 2M17.5 13.5l2 2M4 12H2M22 12h-2m-13.5-3l-2-2m-2-2L15 9m-2 2h-2m-2-2L9 9m-2 2h-2"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6M6 10h.01M10 10h.01M14 10h.01M18 10h.01M2 14h.01M6 14h.01M10 14h.01M14 14h.01M18 14h.01M22 14h.01"></path>
          </svg>
          <span class="hidden sm:inline">Share</span>
        </button>
      </div>
    </div>

    <!-- Input/Action Bar (Mimicking a physical bar) -->
    <div class="mt-8 flex items-center p-4 rounded-xl
      bg-gray-100 dark:bg-gray-750
      shadow-[0_2px_5px_rgba(0,0,0,0.08),_0_0_0_1px_rgba(0,0,0,0.03)_inset]
      dark:shadow-[0_2px_5px_rgba(0,0,0,0.6),_0_0_0_1px_rgba(255,255,255,0.03)_inset]
      border border-gray-200 dark:border-gray-700">
      <input type="text" placeholder="What's on your mind?" class="flex-grow mr-4 py-2 px-4 rounded-lg
        bg-gray-200 dark:bg-gray-700
        border border-gray-300 dark:border-gray-600
        text-gray-800 dark:text-gray-100
        shadow-[inset_0_1px_3px_rgba(0,0,0,0.1),_0_0_0_1px_rgba(0,0,0,0.02)]
        dark:shadow-[inset_0_1px_3px_rgba(0,0,0,0.7),_0_0_0_1px_rgba(255,255,255,0.02)]
        focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500
        placeholder-gray-500 dark:placeholder-gray-400">
      <button class="p-3 rounded-xl
        bg-blue-500 dark:bg-blue-600
        text-white
        shadow-[0_2px_5px_rgba(0,0,0,0.2),_0_0_0_1px_rgba(0,0,0,0.05)_inset]
        dark:shadow-[0_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.05)_inset]
        hover:bg-blue-600 dark:hover:bg-blue-700
        active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.3)]
        dark:active:shadow-[inset_0_1px_3px_rgba(255,255,255,0.3)]
        active:scale-95 transition-all duration-100 ease-in-out">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A12.913 12.913 0 0112 10.5c2.479 0 4.802.735 6.702 2.012l.18.114a1 1 0 001.275-1.55l-1.077-.735a14.852 14.852 0 00-6.19-2.028 10 10 0 00-4.048 0 14.852 14.852 0 00-6.19 2.028l-1.077.735a1 1 0 001.275 1.55l.18-.114zM12 21a9 9 0 110-18 9 9 0 010 18z" />
        </svg>
      </button>
    </div>
  </div>
</div>
              

                <div class="overflow-hidden py-12 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white">
  <div class="container mx-auto px-4">
    <h2 class="text-4xl md:text-5xl font-extrabold text-center mb-12 relative z-10 text-transparent bg-clip-text bg-gradient-to-r from-teal-500 to-indigo-600 dark:from-teal-400 dark:to-indigo-500">
      Our Showcase
    </h2>

    <div class="relative w-full aspect-video md:h-96 lg:h-[400px] xl:h-[500px] group perspective-1000px">
      <!-- Hidden Checkbox for Navigation (simulated interactive effect) -->
      <input type="radio" name="carousel-slide" id="slide-1" class="hidden" checked>
      <input type="radio" name="carousel-slide" id="slide-2" class="hidden">
      <input type="radio" name="carousel-slide" id="slide-3" class="hidden">
      <input type="radio" name="carousel-slide" id="slide-4" class="hidden">

      <div class="absolute w-full h-full ease-in-out duration-700 transform-style-preserve-3d relative-carousel-wrapper">

        <!-- Slide 1 -->
        <label for="slide-1" class="absolute w-4/5 md:w-3/5 lg:w-2/5 xl:w-1/3 h-full cursor-pointer transition-all duration-700 ease-in-out bg-gradient-to-br from-teal-400 to-blue-500 dark:from-teal-600 dark:to-blue-700 rounded-xl shadow-2xl overflow-hidden backface-hidden flex flex-col justify-between p-6 opacity-0 z-0 current-slide-transform">
          <div class="absolute inset-0 bg-black bg-opacity-20 flex flex-col p-6 rounded-xl">
            <img src="https://picsum.photos/id/1018/600/400" alt="Project 1" class="max-w-full h-48 md:h-56 lg:h-64 object-cover rounded-md shadow-lg mb-4 transform group-hover:scale-105 transition duration-300">
            <h3 class="text-2xl md:text-3xl font-bold mb-2 text-white">Elegant Web Design</h3>
            <p class="text-sm text-gray-100 mb-4">Crafting a seamless and intuitive user experience for a modern tech startup.</p>
            <a href="#" class="mt-auto self-start px-5 py-2 bg-white text-teal-600 rounded-full font-semibold hover:bg-gray-100 dark:hover:bg-gray-200 transition duration-300 shadow-md">View Project</a>
          </div>
        </label>

        <!-- Slide 2 -->
        <label for="slide-2" class="absolute w-4/5 md:w-3/5 lg:w-2/5 xl:w-1/3 h-full cursor-pointer transition-all duration-700 ease-in-out bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-indigo-700 dark:to-purple-800 rounded-xl shadow-2xl overflow-hidden backface-hidden flex flex-col justify-between p-6 opacity-0 z-0 right-slide-transform">
          <div class="absolute inset-0 bg-black bg-opacity-20 flex flex-col p-6 rounded-xl">
            <img src="https://picsum.photos/id/1015/600/400" alt="Project 2" class="max-w-full h-48 md:h-56 lg:h-64 object-cover rounded-md shadow-lg mb-4 transform group-hover:scale-105 transition duration-300">
            <h3 class="text-2xl md:text-3xl font-bold mb-2 text-white">Mobile App Development</h3>
            <p class="text-sm text-gray-100 mb-4">Building a cross-platform mobile application with robust features and engaging UI.</p>
            <a href="#" class="mt-auto self-start px-5 py-2 bg-white text-indigo-700 rounded-full font-semibold hover:bg-gray-100 dark:hover:bg-gray-200 transition duration-300 shadow-md">View Project</a>
          </div>
        </label>

        <!-- Slide 3 -->
        <label for="slide-3" class="absolute w-4/5 md:w-3/5 lg:w-2/5 xl:w-1/3 h-full cursor-pointer transition-all duration-700 ease-in-out bg-gradient-to-br from-purple-500 to-red-600 dark:from-purple-700 dark:to-red-800 rounded-xl shadow-2xl overflow-hidden backface-hidden flex flex-col justify-between p-6 opacity-0 z-0 far-right-slide-transform">
          <div class="absolute inset-0 bg-black bg-opacity-20 flex flex-col p-6 rounded-xl">
            <img src="https://picsum.photos/id/1004/600/400" alt="Project 3" class="max-w-full h-48 md:h-56 lg:h-64 object-cover rounded-md shadow-lg mb-4 transform group-hover:scale-105 transition duration-300">
            <h3 class="text-2xl md:text-3xl font-bold mb-2 text-white">Brand Identity Design</h3>
            <p class="text-sm text-gray-100 mb-4">Developing a comprehensive brand identity including logo, typography, and guidelines.</p>
            <a href="#" class="mt-auto self-start px-5 py-2 bg-white text-purple-700 rounded-full font-semibold hover:bg-gray-100 dark:hover:bg-gray-200 transition duration-300 shadow-md">View Project</a>
          </div>
        </label>

        <!-- Slide 4 -->
        <label for="slide-4" class="absolute w-4/5 md:w-3/5 lg:w-2/5 xl:w-1/3 h-full cursor-pointer transition-all duration-700 ease-in-out bg-gradient-to-br from-red-500 to-orange-600 dark:from-red-700 dark:to-orange-800 rounded-xl shadow-2xl overflow-hidden backface-hidden flex flex-col justify-between p-6 opacity-0 z-0 left-slide-transform">
          <div class="absolute inset-0 bg-black bg-opacity-20 flex flex-col p-6 rounded-xl">
            <img src="https://picsum.photos/id/1003/600/400" alt="Project 4" class="max-w-full h-48 md:h-56 lg:h-64 object-cover rounded-md shadow-lg mb-4 transform group-hover:scale-105 transition duration-300">
            <h3 class="text-2xl md:text-3xl font-bold mb-2 text-white">E-commerce Platform</h3>
            <p class="text-sm text-gray-100 mb-4">Building a high-performance e-commerce solution with integrated payment gateways.</p>
            <a href="#" class="mt-auto self-start px-5 py-2 bg-white text-red-700 rounded-full font-semibold hover:bg-gray-100 dark:hover:bg-gray-200 transition duration-300 shadow-md">View Project</a>
          </div>
        </label>

      </div>

      <!-- Navigation Dots -->
      <div class="absolute bottom-0 md:bottom-[-2.5rem] lg:bottom-[-3rem] left-1/2 -translate-x-1/2 flex space-x-3 pointer-events-none z-20">
        <label for="slide-1" class="w-3 h-3 md:w-3.5 md:h-3.5 bg-gray-400 dark:bg-gray-600 rounded-full cursor-pointer transition-all duration-300 hover:scale-110 active:bg-gradient-to-r from-teal-500 to-blue-500 dark:active:from-teal-400 dark:active:to-blue-500 dot-1-active"></label>
        <label for="slide-2" class="w-3 h-3 md:w-3.5 md:h-3.5 bg-gray-400 dark:bg-gray-600 rounded-full cursor-pointer transition-all duration-300 hover:scale-110 active:bg-gradient-to-r from-teal-500 to-blue-500 dark:active:from-teal-400 dark:active:to-blue-500 dot-2-active"></label>
        <label for="slide-3" class="w-3 h-3 md:w-3.5 md:h-3.5 bg-gray-400 dark:bg-gray-600 rounded-full cursor-pointer transition-all duration-300 hover:scale-110 active:bg-gradient-to-r from-teal-500 to-blue-500 dark:active:from-teal-400 dark:active:to-blue-500 dot-3-active"></label>
        <label for="slide-4" class="w-3 h-3 md:w-3.5 md:h-3.5 bg-gray-400 dark:bg-gray-600 rounded-full cursor-pointer transition-all duration-300 hover:scale-110 active:bg-gradient-to-r from-teal-500 to-blue-500 dark:active:from-teal-400 dark:active:to-blue-500 dot-4-active"></label>
      </div>

    </div>
  </div>
</div>

<style>
  /* Base styles for 3D carousel container */
  .perspective-1000px {
    perspective: 1000px;
  }

  .transform-style-preserve-3d {
    transform-style: preserve-3d;
  }

  .backface-hidden {
    backface-visibility: hidden;
  }

  /* General slide positioning for animation */
  .relative-carousel-wrapper label {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotateY(0deg) translateX(0) scale(0.8) translateY(0);
    opacity: 0;
  }

  /* Define transformations for each slide based on checked state */
  #slide-1:checked ~ .relative-carousel-wrapper .current-slide-transform,
  #slide-2:checked ~ .relative-carousel-wrapper .right-slide-transform,
  #slide-3:checked ~ .relative-carousel-wrapper .far-right-slide-transform,
  #slide-4:checked ~ .relative-carousel-wrapper .left-slide-transform {
    transform: translate(-50%, -50%) rotateY(0deg) translateX(0) scale(1) translateY(0);
    opacity: 1;
    z-index: 10;
  }

  /* Right slide */
  #slide-1:checked ~ .relative-carousel-wrapper .right-slide-transform,
  #slide-2:checked ~ .relative-carousel-wrapper .far-right-slide-transform,
  #slide-3:checked ~ .relative-carousel-wrapper .left-slide-transform,
  #slide-4:checked ~ .relative-carousel-wrapper .current-slide-transform {
    transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(100% + 4rem)) scale(0.8) translateY(0);
    opacity: 0.7;
    z-index: 5;
    pointer-events: auto; /* Make visible side slides clickable */
  }

  /* Far right slide */
  #slide-1:checked ~ .relative-carousel-wrapper .far-right-slide-transform,
  #slide-2:checked ~ .relative-carousel-wrapper .left-slide-transform,
  #slide-3:checked ~ .relative-carousel-wrapper .current-slide-transform,
  #slide-4:checked ~ .relative-carousel-wrapper .right-slide-transform {
    transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(200% + 8rem)) scale(0.6) translateY(0);
    opacity: 0.4;
    z-index: 0;
    pointer-events: auto;
  }

  /* Left slide */
  #slide-1:checked ~ .relative-carousel-wrapper .left-slide-transform,
  #slide-2:checked ~ .relative-carousel-wrapper .current-slide-transform,
  #slide-3:checked ~ .relative-carousel-wrapper .right-slide-transform,
  #slide-4:checked ~ .relative-carousel-wrapper .far-right-slide-transform {
    transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-100% - 4rem)) scale(0.8) translateY(0);
    opacity: 0.7;
    z-index: 5;
    pointer-events: auto;
  }

  /* Navigation dot active states */
  #slide-1:checked ~ .navigation .dot-1-active,
  #slide-2:checked ~ .navigation .dot-2-active,
  #slide-3:checked ~ .navigation .dot-3-active,
  #slide-4:checked ~ .navigation .dot-4-active {
    background-color: #6366f1; /* Tailwind indigo-500 */
    transform: scale(1.4);
  }

  /* Update navigation dot colors on checked state */
  #slide-1:checked ~ div.navigation-dots label[for='slide-1'],
  #slide-2:checked ~ div.navigation-dots label[for='slide-2'],
  #slide-3:checked ~ div.navigation-dots label[for='slide-3'],
  #slide-4:checked ~ div.navigation-dots label[for='slide-4'] {
    background-color: #3b82f6; /* A shade of blue for active dot */
    transform: scale(1.4);
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    --tw-gradient-from: #14b8a6; /* teal-500 */
    --tw-gradient-to: #3b82f6; /* blue-500 */
  }

  @media (prefers-color-scheme: dark) {
    #slide-1:checked ~ div.navigation-dots label[for='slide-1'],
    #slide-2:checked ~ div.navigation-dots label[for='slide-2'],
    #slide-3:checked ~ div.navigation-dots label[for='slide-3'],
    #slide-4:checked ~ div.navigation-dots label[for='slide-4'] {
      --tw-gradient-from: #2dd4bf; /* teal-400 */
      --tw-gradient-to: #60a5fa; /* blue-400 */
    }
  }

  /* Define the order of slides logic for the carousel */
  /* When slide-1 is checked: */
  #slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(1) { /* Current */
    transform: translate(-50%, -50%) rotateY(0deg) translateX(0) scale(1) translateY(0);
    opacity: 1;
    z-index: 10;
    pointer-events: none; /* Disable click on current slide */
  }
  #slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(2) { /* Right */
    transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(100% + 4rem)) scale(0.8) translateY(0);
    opacity: 0.7;
    z-index: 5;
  }
  #slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(3) { /* Far Right */
    transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(200% + 8rem)) scale(0.6) translateY(0);
    opacity: 0.4;
    z-index: 0;
  }
  #slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(4) { /* Left */
    transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-100% - 4rem)) scale(0.8) translateY(0);
    opacity: 0.7;
    z-index: 5;
  }

  /* When slide-2 is checked: */
  #slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(2) { /* Current */
    transform: translate(-50%, -50%) rotateY(0deg) translateX(0) scale(1) translateY(0);
    opacity: 1;
    z-index: 10;
    pointer-events: none;
  }
  #slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(3) { /* Right */
    transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(100% + 4rem)) scale(0.8) translateY(0);
    opacity: 0.7;
    z-index: 5;
  }
  #slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(4) { /* Far Right (now previous left) */
    transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(200% + 8rem)) scale(0.6) translateY(0);
    opacity: 0.4;
    z-index: 0;
  }
  #slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(1) { /* Left (now previous current) */
    transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-100% - 4rem)) scale(0.8) translateY(0);
    opacity: 0.7;
    z-index: 5;
  }

  /* When slide-3 is checked: */
  #slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(3) { /* Current */
    transform: translate(-50%, -50%) rotateY(0deg) translateX(0) scale(1) translateY(0);
    opacity: 1;
    z-index: 10;
    pointer-events: none;
  }
  #slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(4) { /* Right */
    transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(100% + 4rem)) scale(0.8) translateY(0);
    opacity: 0.7;
    z-index: 5;
  }
  #slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(1) { /* Far Right (was left) */
    transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(200% + 8rem)) scale(0.6) translateY(0);
    opacity: 0.4;
    z-index: 0;
  }
  #slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(2) { /* Left (was current) */
    transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-100% - 4rem)) scale(0.8) translateY(0);
    opacity: 0.7;
    z-index: 5;
  }

  /* When slide-4 is checked: */
  #slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(4) { /* Current */
    transform: translate(-50%, -50%) rotateY(0deg) translateX(0) scale(1) translateY(0);
    opacity: 1;
    z-index: 10;
    pointer-events: none;
  }
  #slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(1) { /* Right */
    transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(100% + 4rem)) scale(0.8) translateY(0);
    opacity: 0.7;
    z-index: 5;
  }
  #slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(2) { /* Far Right */
    transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(200% + 8rem)) scale(0.6) translateY(0);
    opacity: 0.4;
    z-index: 0;
  }
  #slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(3) { /* Left */
    transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-100% - 4rem)) scale(0.8) translateY(0);
    opacity: 0.7;
    z-index: 5;
  }

  /* Navigation dot active styling for actual dots */
  div.navigation-dots label {
    pointer-events: auto; /* Make dots clickable */
  }

  #slide-1:checked ~ .navigation-dots label[for='slide-1'],
  #slide-2:checked ~ .navigation-dots label[for='slide-2'],
  #slide-3:checked ~ .navigation-dots label[for='slide-3'],
  #slide-4:checked ~ .navigation-dots label[for='slide-4'] {
    background-color: #3b82f6; /* Tailwind blue-500 */
    transform: scale(1.4);
  }
  /* Specific styling for the actual dots container */
  .navigation-dots {
    position: absolute;
    bottom: 1rem; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    z-index: 20;
  }

  /* Mobile Responsiveness for translateX amounts */
  @media (max-width: 767px) { /* Adjust for smaller mobile screens */
    #slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(2) { /* Right */
      transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(80% + 2rem)) scale(0.7) translateY(0);
    }
    #slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(3) { /* Far Right */
      transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(160% + 4rem)) scale(0.5) translateY(0);
      opacity: 0.3;
    }
    #slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(4) { /* Left */
      transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-80% - 2rem)) scale(0.7) translateY(0);
    }

    /* Apply similar adjustments for other checked states if needed */
    #slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(3) {
      transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(80% + 2rem)) scale(0.7) translateY(0);
    }
     #slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(4) {
      transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(160% + 4rem)) scale(0.5) translateY(0);
      opacity: 0.3;
    }
    #slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(1) {
      transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-80% - 2rem)) scale(0.7) translateY(0);
    }

    #slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(4) {
      transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(80% + 2rem)) scale(0.7) translateY(0);
    }
    #slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(1) {
      transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(160% + 4rem)) scale(0.5) translateY(0);
      opacity: 0.3;
    }
    #slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(2) {
      transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-80% - 2rem)) scale(0.7) translateY(0);
    }

    #slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(1) {
      transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(80% + 2rem)) scale(0.7) translateY(0);
    }
    #slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(2) {
      transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(160% + 4rem)) scale(0.5) translateY(0);
      opacity: 0.3;
    }
    #slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(3) {
      transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-80% - 2rem)) scale(0.7) translateY(0);
    }

    /* Adjust slide width for extra small screens if needed */
     .relative-carousel-wrapper label {
       width: 90%; /* Make slides wider on small screens */
     }
  }

  @media (min-width: 768px) and (max-width: 1023px) { /* Tablet adjustments */
    .relative-carousel-wrapper label {
      width: 60%; /* Adjust width for tablets */
    }
  }

  /* New for the "navigation-dots" to contain dots */
  .group-perspective-1000px input:checked + .relative-carousel-wrapper + .navigation-dots > label {
    background-color: #9ca3af; /* Default gray for dots */
  }
  .group-perspective-1000px input#slide-1:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-1'],
  .group-perspective-1000px input#slide-2:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-2'],
  .group-perspective-1000px input#slide-3:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-3'],
  .group-perspective-1000px input#slide-4:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-4'] {
    background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to));
    --tw-gradient-from: #14b8a6; /* teal-500 */
    --tw-gradient-to: #3b82f6; /* blue-500 */
    transform: scale(1.4);
  }
  @media (prefers-color-scheme: dark) {
    .group-perspective-1000px input:checked + .relative-carousel-wrapper + .navigation-dots > label {
       background-color: #4b5563; /* Dark gray for dots */
    }
    .group-perspective-1000px input#slide-1:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-1'],
    .group-perspective-1000px input#slide-2:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-2'],
    .group-perspective-1000px input#slide-3:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-3'],
    .group-perspective-1000px input#slide-4:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-4'] {
      --tw-gradient-from: #2dd4bf; /* dark teal-400 */
      --tw-gradient-to: #60a5fa; /* dark blue-400 */
    }
  }
</style>
              

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <div class="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 max-w-7xl mx-auto">

    <!-- Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-xl">
      <div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-fuchsia-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">Jane Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
          </div>
        </div>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
          </svg>
        </button>
      </div>
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1018/600/400" alt="Post Image">
      <div class="p-4">
        <p class="text-gray-800 dark:text-gray-200 mb-3 text-base">Exploring the vibrant streets of Lisbon! So much beauty and history around every corner. #Travel #Lisbon #Portugal</p>
        <div class="flex items-center justify-between text-gray-500 dark:text-gray-400 mb-4">
          <div class="flex items-center space-x-4">
            <a href="#" class="flex items-center hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              <span>120 Likes</span>
            </a>
            <a href="#" class="flex items-center hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
              </svg>
              <span>25 Comments</span>
            </a>
          </div>
          <a href="#" class="flex items-center hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h4.634c.4 0 .702.07.9.342M17 14v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1m-6 9v-3h-2m.02-6l.075-.98.74-1.243A3 3 0 0117.25 4H20a2 2 0 012 2v6a2 2 0 01-2 2h-3L13 19l-1-7h-5z" />
            </svg>
            <span>Share</span>
          </a>
        </div>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-xl">
      <div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-emerald-500" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">John Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">4 hours ago</p>
          </div>
        </div>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
          </svg>
        </button>
      </div>
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1025/600/400" alt="Post Image">
      <div class="p-4">
        <p class="text-gray-800 dark:text-gray-200 mb-3 text-base">Morning run views! Nothing beats a cool breeze and a clear sky to start the day. #Fitness #MorningRun #Nature</p>
        <div class="flex items-center justify-between text-gray-500 dark:text-gray-400 mb-4">
          <div class="flex items-center space-x-4">
            <a href="#" class="flex items-center hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              <span>85 Likes</span>
            </a>
            <a href="#" class="flex items-center hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
              </svg>
              <span>10 Comments</span>
            </a>
          </div>
          <a href="#" class="flex items-center hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h4.634c.4 0 .702.07.9.342M17 14v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1m-6 9v-3h-2m.02-6l.075-.98.74-1.243A3 3 0 0117.25 4H20a2 2 0 012 2v6a2 2 0 01-2 2h-3L13 19l-1-7h-5z" />
            </svg>
            <span>Share</span>
          </a>
        </div>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-xl">
      <div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-orange-500" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">Emily White</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">1 day ago</p>
          </div>
        </div>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
          </svg>
        </button>
      </div>
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1043/600/400" alt="Post Image">
      <div class="p-4">
        <p class="text-gray-800 dark:text-gray-200 mb-3 text-base">Such a creative afternoon in the studio! Love bringing new ideas to life. #Art #Creative #StudioLife</p>
        <div class="flex items-center justify-between text-gray-500 dark:text-gray-400 mb-4">
          <div class="flex items-center space-x-4">
            <a href="#" class="flex items-center hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              <span>150 Likes</span>
            </a>
            <a href="#" class="flex items-center hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
              </svg>
              <span>30 Comments</span>
            </a>
          </div>
          <a href="#" class="flex items-center hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h4.634c.4 0 .702.07.9.342M17 14v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1m-6 9v-3h-2m.02-6l.075-.98.74-1.243A3 3 0 0117.25 4H20a2 2 0 012 2v6a2 2 0 01-2 2h-3L13 19l-1-7h-5z" />
            </svg>
            <span>Share</span>
          </a>
        </div>
      </div>
    </div>

    <!-- Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-xl">
      <div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-violet-500" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">Michael Brown</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">5 days ago</p>
          </div>
        </div>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
          </svg>
        </button>
      </div>
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1053/600/400" alt="Post Image">
      <div class="p-4">
        <p class="text-gray-800 dark:text-gray-200 mb-3 text-base">Coffee and codes, my favorite combination to kick off the week! #DeveloperLife #CoffeeLover #Coding</p>
        <div class="flex items-center justify-between text-gray-500 dark:text-gray-400 mb-4">
          <div class="flex items-center space-x-4">
            <a href="#" class="flex items-center hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              <span>200 Likes</span>
            </a>
            <a href="#" class="flex items-center hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
              </svg>
              <span>45 Comments</span>
            </a>
          </div>
          <a href="#" class="flex items-center hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h4.634c.4 0 .702.07.9.342M17 14v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1m-6 9v-3h-2m.02-6l.075-.98.74-1.243A3 3 0 0117.25 4H20a2 2 0 012 2v6a2 2 0 01-2 2h-3L13 19l-1-7h-5z" />
            </svg>
            <span>Share</span>
          </a>
        </div>
      </div>
    </div>

  </div>
</div>
              

                <div class="bg-gradient-to-br from-purple-100 via-pink-100 to-indigo-100 p-4 min-h-screen flex items-center justify-center dark:from-gray-900 dark:via-purple-950 dark:to-indigo-950">
  <div class="container mx-auto px-4 py-8 max-w-6xl">
    <h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center text-gray-900 mb-12 relative z-10 animate-fade-in-down dark:text-gray-100">
      <span class="block">Explore Our <span class="text-indigo-600 dark:text-indigo-400">Collection</span></span>
      <span class="block text-2xl md:text-3xl text-purple-600 dark:text-purple-400 mt-2">Experience 3D Depth</span>
      <div class="absolute inset-0 flex items-center justify-center -z-10">
        <div class="w-32 h-32 md:w-48 md:h-48 bg-purple-200 dark:bg-purple-800 rounded-full mix-blend-multiply opacity-30 blur-2xl animate-spin-slow"></div>
        <div class="w-48 h-48 md:w-64 md:h-64 bg-indigo-200 dark:bg-indigo-800 rounded-full mix-blend-multiply opacity-30 blur-2xl animate-spin-reverse-slow"></div>
      </div>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Product Card 1 -->
      <div class="card-3d-container perspective-1000">
        <div class="card-3d transition-transform duration-700 ease-in-out transform-style-preserve-3d rounded-xl shadow-2xl bg-white dark:bg-gray-800 p-6 flex flex-col items-center justify-between hover:scale-105 hover:shadow-purple-500/50 dark:hover:shadow-purple-400/50 relative overflow-hidden group">
          <div class="absolute inset-0 bg-gradient-to-br from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-900 opacity-10 group-hover:opacity-20 transition-opacity duration-300 rounded-xl"></div>

          <div class="card-front w-full flex flex-col items-center justify-between backface-hidden">
            <div class="relative w-full h-48 mb-4 overflow-hidden rounded-lg shadow-inner-lg transform transition-transform duration-500 ease-out group-hover:z-20 group-hover:scale-105">
              <img src="https://picsum.photos/id/157/400/300" alt="Elegant Watch" class="w-full h-full object-cover rounded-lg">
              <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30 dark:to-black/50 rounded-lg"></div>
              <span class="absolute top-3 right-3 text-sm px-3 py-1 bg-purple-600 text-white rounded-full font-semibold shadow-md">New Arrival</span>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2 dark:text-white">AstroPulse Watch</h3>
            <p class="text-md text-gray-600 text-center mb-4 dark:text-gray-300">Precision, Elegance, Future.</p>
            <div class="flex items-center justify-between w-full mb-4">
              <span class="text-3xl font-extrabold text-indigo-600 dark:text-indigo-400">$299</span>
              <p class="text-lg font-medium text-gray-500 line-through dark:text-gray-400">$349</p>
            </div>
            <button class="w-full py-3 px-6 bg-purple-600 text-white rounded-lg hover:bg-purple-700 dark:bg-purple-800 dark:hover:bg-purple-700 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0 relative overflow-hidden">
              <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-purple-500 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
              <span class="relative z-10">Add to Cart</span>
            </button>
            <a href="#" class="mt-4 text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-500 text-sm font-medium transition-colors">View Details</a>
          </div>

          <div class="card-back absolute w-full h-full flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-xl backface-hidden transform rotateY-180">
            <p class="text-lg text-gray-700 text-center mb-4 dark:text-gray-200">Crafted with aerospace-grade sapphire glass and a sustainable recycled titanium casing.</p>
            <ul class="text-md text-gray-600 list-disc list-inside space-y-2 mb-6 dark:text-gray-300">
              <li>Water Resistance: 100m</li>
              <li>Battery Life: 30 days</li>
              <li>Smart Notifications</li>
              <li>Eco-Friendly Materials</li>
            </ul>
            <button class="w-full py-3 px-6 bg-pink-500 text-white rounded-lg hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0">
              Customize Now
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="card-3d-container perspective-1000">
        <div class="card-3d transition-transform duration-700 ease-in-out transform-style-preserve-3d rounded-xl shadow-2xl bg-white dark:bg-gray-800 p-6 flex flex-col items-center justify-between hover:scale-105 hover:shadow-indigo-500/50 dark:hover:shadow-indigo-400/50 relative overflow-hidden group">
          <div class="absolute inset-0 bg-gradient-to-br from-indigo-500 to-pink-600 dark:from-indigo-700 dark:to-pink-900 opacity-10 group-hover:opacity-20 transition-opacity duration-300 rounded-xl"></div>

          <div class="card-front w-full flex flex-col items-center justify-between backface-hidden">
            <div class="relative w-full h-48 mb-4 overflow-hidden rounded-lg shadow-inner-lg transform transition-transform duration-500 ease-out group-hover:z-20 group-hover:scale-105">
              <img src="https://picsum.photos/id/29/400/300" alt="Wireless Headphones" class="w-full h-full object-cover rounded-lg">
              <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30 dark:to-black/50 rounded-lg"></div>
              <span class="absolute top-3 left-3 text-sm px-3 py-1 bg-indigo-600 text-white rounded-full font-semibold shadow-md">Limited Offer</span>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2 dark:text-white">SonicWave Headphones</h3>
            <p class="text-md text-gray-600 text-center mb-4 dark:text-gray-300">Immersive Sound, Unrivaled Comfort.</p>
            <div class="flex items-center justify-between w-full mb-4">
              <span class="text-3xl font-extrabold text-purple-600 dark:text-purple-400">$189</span>
              <p class="text-lg font-medium text-gray-500 line-through dark:text-gray-400">$220</p>
            </div>
            <button class="w-full py-3 px-6 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 dark:bg-indigo-800 dark:hover:bg-indigo-700 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0 relative overflow-hidden">
              <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-indigo-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
              <span class="relative z-10">Add to Cart</span>
            </button>
            <a href="#" class="mt-4 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500 text-sm font-medium transition-colors">View Details</a>
          </div>

          <div class="card-back absolute w-full h-full flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-xl backface-hidden transform rotateY-180">
            <p class="text-lg text-gray-700 text-center mb-4 dark:text-gray-200">Experience crystal-clear audio with adaptive noise cancellation and 40-hour battery life.</p>
            <ul class="text-md text-gray-600 list-disc list-inside space-y-2 mb-6 dark:text-gray-300">
              <li>Noise Cancellation: Adaptive</li>
              <li>Battery Life: 40 hours</li>
              <li>Ergonomic Design</li>
              <li>Bluetooth 5.2</li>
            </ul>
            <button class="w-full py-3 px-6 bg-pink-500 text-white rounded-lg hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0">
              Read Reviews
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="card-3d-container perspective-1000">
        <div class="card-3d transition-transform duration-700 ease-in-out transform-style-preserve-3d rounded-xl shadow-2xl bg-white dark:bg-gray-800 p-6 flex flex-col items-center justify-between hover:scale-105 hover:shadow-pink-500/50 dark:hover:shadow-pink-400/50 relative overflow-hidden group">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-indigo-600 dark:from-purple-700 dark:to-indigo-900 opacity-10 group-hover:opacity-20 transition-opacity duration-300 rounded-xl"></div>

          <div class="card-front w-full flex flex-col items-center justify-between backface-hidden">
            <div class="relative w-full h-48 mb-4 overflow-hidden rounded-lg shadow-inner-lg transform transition-transform duration-500 ease-out group-hover:z-20 group-hover:scale-105">
              <img src="https://picsum.photos/id/27/400/300" alt="Smart Speaker" class="w-full h-full object-cover rounded-lg">
              <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30 dark:to-black/50 rounded-lg"></div>
              <span class="absolute bottom-3 right-3 text-sm px-3 py-1 bg-pink-600 text-white rounded-full font-semibold shadow-md">Best Seller</span>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2 dark:text-white">EchoSphere Speaker</h3>
            <p class="text-md text-gray-600 text-center mb-4 dark:text-gray-300">Intelligent Audio, Seamless Integration.</p>
            <div class="flex items-center justify-between w-full mb-4">
              <span class="text-3xl font-extrabold text-purple-600 dark:text-purple-400">$129</span>
              <p class="text-lg font-medium text-gray-500 line-through dark:text-gray-400">$150</p>
            </div>
            <button class="w-full py-3 px-6 bg-pink-600 text-white rounded-lg hover:bg-pink-700 dark:bg-pink-800 dark:hover:bg-pink-700 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0 relative overflow-hidden">
              <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-pink-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
              <span class="relative z-10">Add to Cart</span>
            </button>
            <a href="#" class="mt-4 text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-500 text-sm font-medium transition-colors">View Details</a>
          </div>

          <div class="card-back absolute w-full h-full flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-xl backface-hidden transform rotateY-180">
            <p class="text-lg text-gray-700 text-center mb-4 dark:text-gray-200">Your smart home hub with voice assistant integration and 360-degree sound.</p>
            <ul class="text-md text-gray-600 list-disc list-inside space-y-2 mb-6 dark:text-gray-300">
              <li>Voice Assistant: AI Powered</li>
              <li>Audio: 360° Omnidirectional</li>
              <li>Smart Home Integration</li>
              <li>Multi-room Audio</li>
            </ul>
            <button class="w-full py-3 px-6 bg-purple-500 text-white rounded-lg hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0">
              Explore Features
            </button>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<style>
  /* Base styles for the 3D card */
  .perspective-1000 {
    perspective: 1000px;
  }

  .card-3d-container {
    position: relative;
    width: 100%;
    height: 100%; /* Ensure container has height for children */
    display: flex; /* Make it a flex container to center child */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    min-height: 480px; /* Minimum height for cards */
  }

  .card-3d {
    position: relative;
    width: 100%;
    height: auto; /* Adjust height based on content */
    min-height: 480px; /* Ensure a consistent minimum height */
    transform-origin: center center; /* Ensure consistent rotation origin */
  }

  /* Front and back faces */
  .backface-hidden {
    backface-visibility: hidden;
  }

  .card-front,
  .card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    box-sizing: border-box;
  }

  .card-back {
    transform: rotateY(180deg);
  }

  /* Flip effect on hover */
  .card-3d-container:hover .card-3d {
    transform: rotateY(180deg);
  }

  /* Inner shadow effect for image */
  .shadow-inner-lg {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06), inset 0 4px 6px 0 rgba(0, 0, 0, 0.05);
  }
  .dark .shadow-inner-lg {
     box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2), inset 0 4px 6px 0 rgba(0, 0, 0, 0.15);
  }

  /* Custom animations */
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 1s ease-out forwards;
  }

  @keyframes spin-slow {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .animate-spin-slow {
    animation: spin-slow 15s linear infinite;
  }

  @keyframes spin-reverse-slow {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-360deg);
    }
  }

  .animate-spin-reverse-slow {
    animation: spin-reverse-slow 20s linear infinite;
  }

  /* Responsive adjustments for overall layout */
  @media (max-width: 767px) {
    .card-3d-container {
      min-height: 450px; /* Slightly reduce min-height for mobile */
    }
    .card-3d {
      min-height: 450px;
    }
    .card-front h3, .card-back h3 {
      font-size: 1.75rem; /* Equivalent to text-2xl */
    }
    .card-front p, .card-back p {
      font-size: 0.875rem; /* Equivalent to text-sm */
    }
    .card-front span.text-3xl {
      font-size: 2rem; /* Reduce price size slightly */
    }
  }

</style>
              

                <div class="relative p-4 md:p-6 lg:p-8 bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-gray-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">

  <!-- Outer Skeuomorphic Container -->
  <div class="w-full max-w-sm md:max-w-md lg:max-w-lg bg-gradient-to-br from-indigo-400 to-purple-500 dark:from-gray-700 dark:to-gray-800 rounded-3xl p-1.5 shadow-2xl transition-all duration-300 ease-in-out
              dark:border-t dark:border-l dark:border-gray-600 dark:border-opacity-30
              border-t border-l border-indigo-300 border-opacity-60">

    <!-- Inner Skeuomorphic Container (Simulating a Screen/Display) -->
    <div class="relative bg-gradient-to-br from-indigo-600 to-purple-700 dark:from-gray-900 dark:to-black rounded-2xl p-5 md:p-6 lg:p-7 shadow-inner-xl transform transition-all duration-300 ease-in-out
                dark:border-b dark:border-r dark:border-gray-700 dark:border-opacity-40
                border-b border-r border-purple-800 border-opacity-70
                active:shadow-inner-sm ">

      <!-- Top Bar / Header -->
      <div class="flex items-center justify-between mb-5">
        <div class="w-3 h-3 rounded-full bg-red-500 shadow-md transform -translate-y-px"></div>
        <div class="flex space-x-2">
          <div class="w-3 h-3 rounded-full bg-yellow-500 shadow-md"></div>
          <div class="w-3 h-3 rounded-full bg-green-500 shadow-md"></div>
        </div>
      </div>

      <!-- File Name / Title -->
      <div class="text-center text-white text-xl md:text-2xl font-bold mb-6 tracking-wide drop-shadow-md">
        <span class="block">MyDocument.pdf</span>
      </div>

      <!-- Document Icon / Preview Area -->
      <div class="relative bg-gradient-to-br from-white via-indigo-100 to-white dark:from-gray-100 dark:via-gray-200 dark:to-gray-100 rounded-xl p-6 md:p-8 flex items-center justify-center flex-col shadow-inner-lg
                  border border-gray-300 dark:border-gray-600 mb-6">
        <svg class="w-16 h-16 md:w-20 md:h-20 text-indigo-500 dark:text-purple-600 mb-4 drop-shadow-sm" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0113 2.586L16.414 6A2 2 0 0117 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>
        </svg>
        <p class="text-sm md:text-base text-gray-700 dark:text-gray-800 font-semibold">PDF Document</p>
        <p class="text-xs text-gray-500 dark:text-gray-600">2.4 MB</p>

        <!-- Skeuomorphic reflection/light effect -->
        <div class="absolute top-2 left-2 w-1/3 h-1/3 bg-white bg-opacity-20 rounded-full blur-sm opacity-60 pointer-events-none"></div>
        <div class="absolute bottom-2 right-2 w-1/4 h-1/4 bg-white bg-opacity-10 rounded-full blur-xs opacity-40 pointer-events-none"></div>
      </div>

      <!-- Action Buttons -->
      <div class="flex justify-around space-x-4 mb-4">

        <button class="flex-1 py-3 px-4 md:py-4 md:px-5 bg-gradient-to-br from-blue-500 to-cyan-500 dark:from-blue-700 dark:to-cyan-800 text-white rounded-xl shadow-lg hover:shadow-xl active:shadow-md
                       transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out
                       border-b-4 border-l-2 border-blue-700 dark:border-blue-900 font-semibold text-sm md:text-base">
          <span class="flex items-center justify-center">
            <svg class="w-5 h-5 md:w-6 md:h-6 mr-2" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
            Download
          </span>
        </button>

        <button class="flex-1 py-3 px-4 md:py-4 md:px-5 bg-gradient-to-br from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 text-white rounded-xl shadow-lg hover:shadow-xl active:shadow-md
                       transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out
                       border-b-4 border-l-2 border-purple-700 dark:border-purple-900 font-semibold text-sm md:text-base">
          <span class="flex items-center justify-center">
            <svg class="w-5 h-5 md:w-6 md:h-6 mr-2" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
            View
          </span>
        </button>
      </div>

      <!-- Separator Line -->
      <div class="h-px bg-gradient-to-r from-transparent via-white to-transparent dark:via-gray-600 mb-4 opacity-30"></div>

      <!-- File Information Section -->
      <div class="text-white/90 text-sm md:text-base space-y-2">
        <p class="flex items-center"><svg class="w-4 h-4 mr-2 text-white/70" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg> <span class="font-semibold">Type:</span> PDF Document</p>
        <p class="flex items-center"><svg class="w-4 h-4 mr-2 text-white/70" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg> <span class="font-semibold">Last Modified:</span> April 23, 2023</p>
        <p class="flex items-center"><svg class="w-4 h-4 mr-2 text-white/70" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h.01a1 1 0 100-2H10zm3 0a1 1 0 000 2h.01a1 1 0 100-2H13zm-3 4a1 1 0 000 2h.01a1 1 0 100-2H10zm3 0a1 1 0 000 2h.01a1 1 0 100-2H13z" clip-rule="evenodd"></path></svg> <span class="font-semibold">Created By:</span> Admin User</p>
      </div>

    </div>
  </div>

  <!-- Background elements for skeuomorphic depth -->
  <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/1920/1080'); background-size: cover; background-position: center; filter: blur(5px);"></div>

</div>

<style>
  /* Custom utility for inner shadow, simulating an inset screen */
  .shadow-inner-xl {
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4), inset 0 0 40px rgba(0, 0, 0, 0.2)
  }
  .shadow-inner-lg {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(0, 0, 0, 0.05)
  }
  .shadow-inner-sm {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .dark .shadow-inner-xl {
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(0, 0, 0, 0.4)
  }
  .dark .shadow-inner-lg {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.1)
  }
  .dark .shadow-inner-sm {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.2);
  }

  /* Optional: Background pattern for skeuomorphic feel */
  .bg-gradient-to-br {
    background-attachment: fixed;
  }
</style>
              

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">

    <!-- Tabs Header -->
    <div class="flex border-b border-gray-200 dark:border-gray-700 overflow-x-auto scrollbar-hide">
      <button class="flex-1 py-4 px-4 text-center text-sm sm:text-base font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:text-gray-900 focus:border-red-500 transition duration-300 ease-in-out whitespace-nowrap" id="tab-btn-overview">
        Overview
      </button>
      <button class="flex-1 py-4 px-4 text-center text-sm sm:text-base font-medium border-b-2 border-red-500 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 focus:outline-none focus:text-red-700 focus:border-red-600 transition duration-300 ease-in-out whitespace-nowrap" id="tab-btn-analytics">
        Analytics
      </button>
      <button class="flex-1 py-4 px-4 text-center text-sm sm:text-base font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:text-gray-900 focus:border-red-500 transition duration-300 ease-in-out whitespace-nowrap" id="tab-btn-reports">
        Reports
      </button>
      <button class="flex-1 py-4 px-4 text-center text-sm sm:text-base font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:text-gray-900 focus:border-red-500 transition duration-300 ease-in-out whitespace-nowrap" id="tab-btn-settings">
        Settings
      </button>
    </div>

    <!-- Tab Content Container -->
    <div class="p-4 sm:p-6 md:p-8 space-y-8">

      <!-- Analytics Tab Content (Active by default for demonstration) -->
      <div id="tab-content-analytics">
        <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Dashboard Analytics</h2>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

          <!-- Card 1: Total Sales -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-transform duration-300 hover:scale-105 hover:shadow-lg">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Total Sales</h3>
              <svg class="w-6 h-6 text-red-500" 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 12h-3m-6 0h-3m8-4zm0 16-5-5h-2.586a1 1 0 01-.707-.293L11.707 10.5M10 5L3 12h3m0 0l-3-3m5 3v5c0 1.105.895 2 2 2h4c1.105 0 2-.895 2-2v-5" />
              </svg>
            </div>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">$12,450</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">+12% from last month</p>
          </div>

          <!-- Card 2: New Users -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-transform duration-300 hover:scale-105 hover:shadow-lg">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">New Users</h3>
              <svg class="w-6 h-6 text-red-500" 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="M17 20h-5m-1.58-6.425a.86.86 0 011.66 0c0 .942-.51 1.764-1.29 2.193M11 11a4 4 0 100 8h2a4 4 0 100-8h-2zM9 11l4 4m0-4l-4 4" />
              </svg>
            </div>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">870</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">+5% from last week</p>
          </div>

          <!-- Card 3: Traffic Source -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-transform duration-300 hover:scale-105 hover:shadow-lg">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Traffic Source</h3>
              <svg class="w-6 h-6 text-red-500" 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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
              </svg>
            </div>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">Google Organic</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">65% of total traffic</p>
          </div>
        </div>

        <!-- Larger Chart Card -->
        <div class="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Sales Performance (Monthly)</h3>
          <img class="w-full h-auto rounded" src="https://picsum.photos/800/400?random=1" alt="Sales Performance Chart">
        </div>

        <!-- Recent Activity Table -->
        <div class="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 p-6 pb-0">Recent Activity</h3>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
              <thead class="bg-gray-50 dark:bg-gray-700">
                <tr>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Event</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">User</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Date</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
                </tr>
              </thead>
              <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">New order #1001</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10">
                        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                      </div>
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">John Doe</div>
                        <div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-26</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">Completed</span>
                  </td>
                </tr>
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Product view: 'Widget X'</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10">
                        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
                      </div>
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Jane Smith</div>
                        <div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-25</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">Viewed</span>
                  </td>
                </tr>
                 <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Login attempt failed</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10">
                        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/50.jpg" alt="">
                      </div>
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Peter Jones</div>
                        <div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-24</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">Failed</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

      </div>

       <!-- Overview Tab Content (Hidden by default, for demonstration) -->
      <div id="tab-content-overview" class="hidden">
        <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Company Overview</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          Welcome to your dashboard! Here you can find a quick summary of your key metrics and recent activities.
          This section provides a high-level view of your business performance, allowing you to gauge overall health at a glance.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Key Highlights</h3>
            <ul class="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400">
              <li><span class="font-medium text-gray-800 dark:text-gray-200">Revenue Last 30 Days:</span> <span class="text-green-600 dark:text-green-400">$50,000</span></li>
              <li><span class="font-medium text-gray-800 dark:text-gray-200">Active Customers:</span> <span class="text-red-600 dark:text-red-400">1,200</span></li>
              <li><span class="font-medium text-gray-800 dark:text-gray-200">New Signups This Month:</span> <span class="text-blue-600 dark:text-blue-400">150</span></li>
            </ul>
             <div class="mt-6">
              <img class="w-full h-48 sm:h-56 object-cover rounded" src="https://picsum.photos/400/250?random=2" alt="Overview Image">
            </div>
          </div>
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Quick Actions</h3>
            <ul class="space-y-3">
              <li>
                <button class="w-full text-left p-3 rounded-md bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-800/50 shadow-sm transition duration-200 flex items-center">
                  <svg class="w-5 h-5 mr-3" 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="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                  Create New Report
                </button>
              </li>
              <li>
                <button class="w-full text-left p-3 rounded-md bg-gray-50 dark:bg-gray-700/30 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600/50 shadow-sm transition duration-200 flex items-center">
                  <svg class="w-5 h-5 mr-3" 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="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                  View All Notifications
                </button>
              </li>
              <li>
                <button class="w-full text-left p-3 rounded-md bg-gray-50 dark:bg-gray-700/30 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600/50 shadow-sm transition duration-200 flex items-center">
                  <svg class="w-5 h-5 mr-3" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                  Adjust Settings
                </button>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Reports Tab Content (Hidden by default, for demonstration) -->
      <div id="tab-content-reports" class="hidden">
        <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Detailed Reports</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          Access a variety of advanced reports to gain deeper insights into your data. You can filter and export these reports.
        </p>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Sales by Region</h3>
            <img class="w-full h-48 sm:h-56 object-cover rounded mb-4" src="https://picsum.photos/400/250?random=3" alt="Sales by Region Chart">
            <p class="text-sm text-gray-600 dark:text-gray-400">Visualize sales performance across different geographical regions. Identify top-performing areas.</p>
            <button class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-800">
              <svg class="-ml-1 mr-2 h-5 w-5" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
              Download CSV
            </button>
          </div>
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Customer Demographics</h3>
            <img class="w-full h-48 sm:h-56 object-cover rounded mb-4" src="https://picsum.photos/400/250?random=4" alt="Customer Demographics Chart">
            <p class="text-sm text-gray-600 dark:text-gray-400">Understand your customer base better with detailed demographic breakdowns and engagement metrics.</p>
            <button class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-800">
              <svg class="-ml-1 mr-2 h-5 w-5" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
              Download PDF
            </button>
          </div>
        </div>
      </div>

      <!-- Settings Tab Content (Hidden by default, for demonstration) -->
      <div id="tab-content-settings" class="hidden">
        <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Account Settings</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          Manage your account preferences, notifications, and security settings here.
        </p>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 mb-6">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Profile Information</h3>
          <form class="space-y-4">
            <div>
              <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
              <input type="text" id="full-name" name="full-name" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100" value="John Doe">
            </div>
            <div>
              <label for="email-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
              <input type="email" id="email-address" name="email-address" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100" value="[email protected]">
            </div>
            <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-800">
              Save Changes
            </button>
          </form>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Notification Preferences</h3>
          <fieldset class="space-y-4">
            <legend class="sr-only">Notification Preferences</legend>
            <div class="relative flex items-start">
              <div class="flex items-center h-5 w-5">
                <input id="email-notifications" name="email-notifications" type="checkbox" checked class="focus:ring-red-500 h-4 w-4 text-red-600 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700 dark:checked:bg-red-600">
              </div>
              <div class="ml-3 text-sm">
                <label for="email-notifications" class="font-medium text-gray-700 dark:text-gray-300">Email Notifications</label>
                <p class="text-gray-500 dark:text-gray-400">Receive updates and announcements via email.</p>
              </div>
            </div>
            <div class="relative flex items-start">
              <div class="flex items-center h-5 w-5">
                <input id="sms-notifications" name="sms-notifications" type="checkbox" class="focus:ring-red-500 h-4 w-4 text-red-600 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700 dark:checked:bg-red-600">
              </div>
              <div class="ml-3 text-sm">
                <label for="sms-notifications" class="font-medium text-gray-700 dark:text-gray-300">SMS Notifications</label>
                <p class="text-gray-500 dark:text-gray-400">Get critical alerts on your mobile device.</p>
              </div>
            </div>
          </fieldset>
        </div>
      </div>

    </div>
  </div>

  <!-- Simple Script for Tab Functionality (can be externalized) -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const tabButtons = document.querySelectorAll('.flex.border-b button');
      const tabContents = document.querySelectorAll('[id^="tab-content-"]');

      tabButtons.forEach(button => {
        button.addEventListener('click', () => {
          // Deactivate all buttons and hide all content
          tabButtons.forEach(btn => {
            btn.classList.remove('border-red-500', 'text-red-600', 'bg-red-50', 'dark:text-red-400', 'dark:bg-red-900/20');
            btn.classList.add('border-transparent', 'text-gray-500', 'dark:text-gray-400', 'hover:bg-gray-50', 'dark:hover:bg-gray-700', 'focus:text-gray-900', 'focus:border-red-500');
          });
          tabContents.forEach(content => {
            content.classList.add('hidden');
          });

          // Activate clicked button and show corresponding content
          const targetId = button.id.replace('tab-btn-', 'tab-content-');
          document.getElementById(targetId).classList.remove('hidden');
          button.classList.add('border-red-500', 'text-red-600', 'bg-red-50', 'dark:text-red-400', 'dark:bg-red-900/20');
          button.classList.remove('border-transparent', 'text-gray-500', 'dark:text-gray-400', 'hover:bg-gray-50', 'dark:hover:bg-gray-700', 'focus:text-gray-900', 'focus:border-red-500');
        });
      });

      // Trigger click on 'Analytics' tab by default to make it active on load
      document.getElementById('tab-btn-analytics').click();
    });
  </script>

</div>
              

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-200 dark:bg-gray-800 font-sans min-h-screen flex items-center justify-center transition-colors duration-300">
  <div class="max-w-6xl w-full mx-auto p-6 sm:p-8 lg:p-10 rounded-3xl shadow-xl dark:shadow-2xl bg-gray-200 dark:bg-gray-800 neumorphic-card transition-all duration-300 relative overflow-hidden">
    
    <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/10 via-orange-400/10 to-red-400/10 opacity-5 dark:opacity-10 pointer-events-none rounded-3xl z-0"></div>

    <div class="relative z-10">
      <header class="mb-8 text-center">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-4 tracking-tight leading-tight">
          Choose Your Perfect Plan
        </h2>
        <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
          Unlock the full potential of our content with a plan that fits your needs. Simple, transparent pricing.
        </p>
      </header>

      <div class="flex justify-center items-center mb-10 transition-all duration-300">
        <span class="text-gray-700 dark:text-gray-300 mr-3 text-lg font-medium">Monthly</span>
        <label for="toggle-pricing" class="relative inline-flex items-center cursor-pointer neumorphic-switch-container shadow-inner dark:shadow-inner-dark hover:shadow-outer hover:dark:shadow-outer-dark rounded-full p-1 transition-all duration-300">
          <input type="checkbox" id="toggle-pricing" class="sr-only peer">
          <div class="w-16 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:bg-gradient-to-r peer-checked:from-orange-400 peer-checked:to-red-500 peer-focus:outline-none transition-all duration-300"></div>
          <span class="absolute left-1 top-1 w-6 h-6 bg-white dark:bg-gray-200 rounded-full shadow-md transform transition-transform duration-300 peer-checked:translate-x-full peer-checked:bg-yellow-300 dark:peer-checked:bg-orange-300"></span>
        </label>
        <span class="block relative text-gray-700 dark:text-gray-300 ml-3 text-lg font-medium">
          Annually
          <span class="px-2 py-1 ml-2 text-xs font-semibold rounded-full bg-orange-400 dark:bg-red-500 text-white neumorphic-discount-tag shadow-inner dark:shadow-inner-dark transform -rotate-6 absolute -top-4 -right-10 whitespace-nowrap">Save 20%!</span>
        </span>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

        <!-- Basic Plan Card -->
        <div class="neumorphic-card-inner and hover:neumorphic-card-hover and dark:hover:neumorphic-card-hover-dark bg-gray-200 dark:bg-gray-800 p-6 sm:p-8 rounded-2xl shadow-lg dark:shadow-xl transition-all duration-300 flex flex-col">
          <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Basic</h3>
          <p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow">Access to essential articles and limited features.</p>
          <div class="flex items-baseline mb-6">
            <span class="text-4xl sm:text-5xl font-extrabold text-orange-500 dark:text-orange-400 neumorphic-text-shadow transition-colors duration-300">$9</span>
            <span class="text-xl font-medium text-gray-600 dark:text-gray-400 ml-2">/month</span>
          </div>
          <ul class="text-gray-700 dark:text-gray-200 mb-8 space-y-3 flex-grow">
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Unlimited Basic Content Access</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Ad-supported reading</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Email Newsletter</span>
            </li>
            <li class="flex items-center text-gray-500 dark:text-gray-400">
              <svg class="w-5 h-5 text-gray-400 dark:text-gray-500 mr-2" 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="M6 18L18 6M6 6l12 12"></path></svg>
              <span>No offline reading</span>
            </li>
          </ul>
          <button class="w-full py-3 px-6 text-lg font-semibold rounded-xl neumorphic-button dark:neumorphic-button-dark shadow-md hover:shadow-lg dark:hover:shadow-lg text-orange-700 dark:text-orange-200 hover:text-white dark:hover:text-white hover:bg-gradient-to-r hover:from-yellow-300 hover:to-orange-400 dark:hover:from-orange-500 dark:hover:to-red-600 transition-all duration-300">
            Choose Basic
          </button>
        </div>

        <!-- Pro Plan Card -->
        <div class="neumorphic-card-inner and hover:neumorphic-card-hover and dark:hover:neumorphic-card-hover-dark bg-gray-200 dark:bg-gray-800 p-6 sm:p-8 rounded-2xl shadow-lg dark:shadow-xl transition-all duration-300 flex flex-col relative overflow-hidden border-2 border-transparent hover:border-orange-400 dark:hover:border-red-500 ring-2 ring-transparent hover:ring-orange-300 dark:hover:ring-red-400">
          <div class="absolute top-0 right-0 py-2 px-6 bg-gradient-to-br from-yellow-400 to-orange-500 dark:from-orange-500 dark:to-red-600 text-white font-bold text-sm rounded-bl-xl shadow-md transform rotate-3 origin-top-right translate-x-2 -translate-y-2 neumorphic-discount-tag dark:neumorphic-discount-tag-dark">
            Most Popular
          </div>
          <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Pro</h3>
          <p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow">Full access to premium content and rich features.</p>
          <div class="flex items-baseline mb-6">
            <span class="text-4xl sm:text-5xl font-extrabold text-red-500 dark:text-red-400 neumorphic-text-shadow transition-colors duration-300">$19</span>
            <span class="text-xl font-medium text-gray-600 dark:text-gray-400 ml-2">/month</span>
          </div>
          <ul class="text-gray-700 dark:text-gray-200 mb-8 space-y-3 flex-grow">
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>All Basic Features</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Ad-free experience</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Offline reading & downloads</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Priority Email Support</span>
            </li>
            <li class="flex items-center">
            <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Early access to new content</span>
            </li>
          </ul>
          <button class="w-full py-3 px-6 text-lg font-semibold rounded-xl neumorphic-button dark:neumorphic-button-dark shadow-md hover:shadow-lg dark:hover:shadow-lg text-white bg-gradient-to-r from-orange-400 to-red-500 dark:from-orange-500 dark:to-red-600 hover:from-yellow-300 hover:to-orange-400 dark:hover:from-red-600 dark:hover:to-red-700 transition-all duration-300">
            Choose Pro
          </button>
        </div>

        <!-- Enterprise Plan Card -->
        <div class="neumorphic-card-inner and hover:neumorphic-card-hover and dark:hover:neumorphic-card-hover-dark bg-gray-200 dark:bg-gray-800 p-6 sm:p-8 rounded-2xl shadow-lg dark:shadow-xl transition-all duration-300 flex flex-col">
          <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Enterprise</h3>
          <p class="text-gray-600 dark:text-gray-300 mb-6 flex-grow">Custom solution for teams and large organizations.</p>
          <div class="flex items-baseline mb-6">
            <span class="text-4xl sm:text-5xl font-extrabold text-orange-500 dark:text-orange-400 neumorphic-text-shadow transition-colors duration-300">Custom</span>
            <span class="text-xl font-medium text-gray-600 dark:text-gray-400 ml-2">/quote</span>
          </div>
          <ul class="text-gray-700 dark:text-gray-200 mb-8 space-y-3 flex-grow">
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>All Pro Features</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Dedicated Account Manager</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Custom Integrations</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>Advanced Analytics</span>
            </li>
            <li class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2 neumorphic-icon shadow-inner dark:shadow-inner-dark" 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="M5 13l4 4L19 7"></path></svg>
              <span>24/7 Premium Support</span>
            </li>
          </ul>
          <button class="w-full py-3 px-6 text-lg font-semibold rounded-xl neumorphic-button dark:neumorphic-button-dark shadow-md hover:shadow-lg dark:hover:shadow-lg text-orange-700 dark:text-orange-200 hover:text-white dark:hover:text-white hover:bg-gradient-to-r hover:from-yellow-300 hover:to-orange-400 dark:hover:from-orange-500 dark:hover:to-red-600 transition-all duration-300">
            Contact Sales
          </button>
        </div>

      </div>

      <p class="text-center text-sm text-gray-500 dark:text-gray-400 mt-12">
        *Prices exclude VAT. Cancel anytime. No hidden fees.
      </p>
    </div>

  </div>
</div>

<style>
  /* Base Neumorphic Card */
  .neumorphic-card {
    box-shadow: 10px 10px 20px rgba(174, 174, 192, 0.4), -10px -10px 20px #FFFFFF;
  }
  .dark .neumorphic-card {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5), -10px -10px 20px rgba(50, 50, 50, 0.4);
  }

  /* Inner Neumorphic Card / Pricing Tier */
  .neumorphic-card-inner {
    box-shadow: inset 5px 5px 10px rgba(174, 174, 192, 0.2), inset -5px -5px 10px #FFFFFF;
  }
  .dark .neumorphic-card-inner {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.4), inset -5px -5px 10px rgba(50, 50, 50, 0.3);
  }

  /* Inner Neumorphic Card Hover State */
  .neumorphic-card-hover:hover {
    box-shadow: 8px 8px 16px rgba(174, 174, 192, 0.2), -8px -8px 16px #FFFFFF, inset 2px 2px 5px rgba(174, 174, 192, 0.1), inset -2px -2px 5px #FFFFFF;
  }
  .dark .neumorphic-card-hover-dark:hover {
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.4), -8px -8px 16px rgba(50, 50, 50, 0.3), inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(50, 50, 50, 0.2);
  }

  /* Buttons - Neumorphic Style */
  .neumorphic-button {
    box-shadow: 6px 6px 12px rgba(174, 174, 192, 0.4), -6px -6px 12px #FFFFFF;
  }
  .neumorphic-button:active {
    box-shadow: inset 3px 3px 6px rgba(174, 174, 192, 0.2), inset -3px -3px 6px #FFFFFF;
  }
  .dark .neumorphic-button-dark {
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.5), -6px -6px 12px rgba(50, 50, 50, 0.4);
  }
  .dark .neumorphic-button-dark:active {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(50, 50, 50, 0.3);
  }

  /* Toggle Switch Container */
  .neumorphic-switch-container {
    box-shadow: inset 4px 4px 8px rgba(174, 174, 192, 0.2), inset -4px -4px 8px #FFFFFF;
  }
  .dark .neumorphic-switch-container {
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.4), inset -4px -4px 8px rgba(50, 50, 50, 0.3);
  }
  .neumorphic-switch-container:hover {
    box-shadow: 6px 6px 12px rgba(174, 174, 192, 0.4), -6px -6px 12px #FFFFFF, inset 2px 2px 4px rgba(174, 174, 192, 0.1), inset -2px -2px 4px #FFFFFF; /* Subtle outer shadow on hover */
  }
  .dark .neumorphic-switch-container:hover {
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.5), -6px -6px 12px rgba(50, 50, 50, 0.4), inset 2px 2px 4px rgba(0, 0, 0, 0.2), inset -2px -2px 4px rgba(50, 50, 50, 0.2);
  }

  /* Discount Tag */
  .neumorphic-discount-tag {
    box-shadow: 3px 3px 6px rgba(174, 174, 192, 0.4), -3px -3px 6px #FFFFFF;
    border: 1px solid rgba(255,165,0,0.2); /* Subtle border for definition */
  }
  .dark .neumorphic-discount-tag {
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5), -3px -3px 6px rgba(50, 50, 50, 0.4);
    border: 1px solid rgba(255,99,71,0.2); /* Subtle border for definition */
  }

  /* Neumorphic Icon */
  .neumorphic-icon {
      border-radius: 9999px; /* Make it circular */
      box-shadow: inset 2px 2px 4px rgba(174, 174, 192, 0.1), inset -2px -2px 4px #FFFFFF;
  }
  .dark .neumorphic-icon {
      box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2), inset -2px -2px 4px rgba(50, 50, 50, 0.2);
  }

  /* Text Shadow for prices */
  .neumorphic-text-shadow {
      text-shadow: 2px 2px 4px rgba(174, 174, 192, 0.3), -2px -2px 4px #FFFFFF;
  }
  .dark .neumorphic-text-shadow {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4), -2px -2px 4px rgba(50, 50, 50, 0.3);
  }


  /* Tailwind's dark class is applied to the <html> tag or higher */
  /* Custom properties or base classes should respect this */
</style>

<script>
  // Basic functionality for the toggle switch (for a true SPA this would be a framework component)
  document.addEventListener('DOMContentLoaded', () => {
    const toggle = document.getElementById('toggle-pricing');
    if (toggle) {
      toggle.addEventListener('change', () => {
        // In a real application, you'd update pricing data here
        // For this example, we'll just log the state
        console.log('Pricing switched to:', toggle.checked ? 'Annually' : 'Monthly');

        // Example of visually altering prices (not dynamic data update)
        const proPrice = document.querySelector('.neumorphic-card-inner:nth-child(2) .neumorphic-text-shadow');
        const proTime = document.querySelector('.neumorphic-card-inner:nth-child(2) .ml-2');

        if (toggle.checked) {
          // Annual pricing (e.g., $19 * 12 * 0.8 = $182.4 -> $15 per month equivalent)
          proPrice.textContent = '$15'; 
          proTime.textContent = '/month (billed annually)';
        } else {
          // Monthly pricing
          proPrice.textContent = '$19';
          proTime.textContent = '/month';
        }
      });
    }

    // Dark mode toggle simulation (for demonstration purposes)
    // This part is for showcasing dark mode if an external toggle isn't available
    // In a real app, you'd use a robust dark mode implementation
    const systemDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
    const enableDarkMode = () => {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    };
    const disableDarkMode = () => {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    };

    // Check local storage for theme
    const storedTheme = localStorage.getItem('theme');
    if (storedTheme === 'dark') {
      enableDarkMode();
    } else if (storedTheme === 'light') {
      disableDarkMode();
    } else if (systemDarkMode.matches) {
      enableDarkMode(); // Default to system preference if no stored theme
    }

    // Listen for system theme changes
    systemDarkMode.addEventListener('change', (e) => {
      if (!localStorage.getItem('theme')) { // Only apply if no user preference set
        e.matches ? enableDarkMode() : disableDarkMode();
      }
    });
  });
</script>
              

                <div class="p-4 md:p-6 lg:p-8 bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm mx-auto p-6 rounded-3xl shadow-xl bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-700 dark:to-stone-800
              border border-stone-300 dark:border-stone-900
              transform transition-all duration-300">
    <div class="flex items-center space-x-4 mb-6">
      <div class="relative w-16 h-16 rounded-full bg-stone-300 dark:bg-stone-600 shadow-md
                  flex items-center justify-center p-0.5 border border-stone-400 dark:border-stone-500">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-full h-full rounded-full object-cover
                    shadow-inner border border-stone-200 dark:border-stone-700">
        <span class="absolute bottom-0 right-0 w-4 h-4 bg-lime-500 rounded-full border-2 border-white dark:border-stone-800 shadow-sm"></span>
      </div>
      <div class="flex-1">
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-200">John Doe</h3>
        <p class="text-sm text-stone-600 dark:text-stone-400">Product Manager</p>
      </div>
    </div>

    <div class="mb-6">
      <label for="feedback-text" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Your Feedback</label>
      <textarea id="feedback-text" rows="4" class="w-full px-4 py-3 rounded-xl
                 bg-stone-50 dark:bg-stone-900 text-stone-800 dark:text-stone-200
                 shadow-inner border border-stone-200 dark:border-stone-700
                 focus:ring-2 focus:ring-amber-500 focus:border-amber-500
                 placeholder-stone-400 dark:placeholder-stone-500
                 transition-all duration-200 resize-none
                 transform focus:scale-[1.01]
                 focus:shadow-md"
                 placeholder="Share your thoughts..."></textarea>
    </div>

    <div class="mb-6">
      <label class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Rating</label>
      <div class="flex items-center justify-center space-x-2">
        <!-- Star 1 -->
        <button class="p-2 rounded-full cursor-pointer group
                       bg-stone-200 dark:bg-stone-700 shadow-md
                       border border-stone-300 dark:border-stone-600
                       hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
                       active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
                       transition-all duration-150">
          <svg class="w-6 h-6 text-amber-400 dark:text-amber-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
        </button>
        <!-- Star 2 -->
        <button class="p-2 rounded-full cursor-pointer group
                       bg-stone-200 dark:bg-stone-700 shadow-md
                       border border-stone-300 dark:border-stone-600
                       hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
                       active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
                       transition-all duration-150">
          <svg class="w-6 h-6 text-amber-400 dark:text-amber-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
        </button>
        <!-- Star 3 -->
        <button class="p-2 rounded-full cursor-pointer group
                       bg-stone-200 dark:bg-stone-700 shadow-md
                       border border-stone-300 dark:border-stone-600
                       hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
                       active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
                       transition-all duration-150">
          <svg class="w-6 h-6 text-amber-400 dark:text-amber-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
        </button>
        <!-- Star 4 -->
        <button class="p-2 rounded-full cursor-pointer group
                       bg-stone-200 dark:bg-stone-700 shadow-md
                       border border-stone-300 dark:border-stone-600
                       hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
                       active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
                       transition-all duration-150">
          <svg class="w-6 h-6 text-amber-400 dark:text-amber-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
        </button>
        <!-- Star 5 -->
        <button class="p-2 rounded-full cursor-pointer group
                       bg-stone-200 dark:bg-stone-700 shadow-md
                       border border-stone-300 dark:border-stone-600
                       hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
                       active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
                       transition-all duration-150">
          <svg class="w-6 h-6 text-stone-400 dark:text-stone-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
        </button>
      </div>
    </div>

    <div class="flex justify-end space-x-3">
      <button class="px-6 py-3 rounded-xl font-medium
                     bg-stone-200 dark:bg-stone-700 text-stone-700 dark:text-stone-300
                     shadow-md border border-stone-300 dark:border-stone-600
                     hover:bg-stone-300 hover:dark:bg-stone-600 hover:shadow-lg
                     active:bg-stone-400 active:dark:bg-stone-800 active:shadow-inner active:scale-95
                     transition-all duration-150">
        Cancel
      </button>
      <button class="px-6 py-3 rounded-xl font-medium
                     bg-amber-600 dark:bg-amber-700 text-white
                     shadow-md border border-amber-700 dark:border-amber-800
                     hover:bg-amber-700 hover:dark:bg-amber-600 hover:shadow-lg
                     active:bg-amber-800 active:dark:bg-amber-900 active:shadow-inner active:scale-95
                     transition-all duration-150">
        Submit
      </button>
    </div>
  </div>
</div>
              

                <div class="font-['Arial_Black',_sans-serif] min-h-screen bg-cyan-100 text-purple-900 dark:bg-purple-900 dark:text-cyan-100 p-4 sm:p-8 md:p-12 lg:p-16 flex items-center justify-center">
  <div class="w-full max-w-7xl border-8 border-purple-900 dark:border-cyan-100 shadow-[10px_10px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[10px_10px_0_0_rgba(8,_145,_178,_1)] bg-purple-200 dark:bg-purple-800 transition-all duration-300 ease-in-out">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-0 border-b-8 border-purple-900 dark:border-cyan-100">
      <!-- Main Video Player -->
      <div class="lg:col-span-2 relative aspect-video bg-black flex items-center justify-center overflow-hidden border-b-8 lg:border-b-0 lg:border-r-8 border-purple-900 dark:border-cyan-100">
        <img src="https://picsum.photos/1280/720?random=1" alt="Video Thumbnail" class="absolute inset-0 w-full h-full object-cover opacity-70">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
        <button class="relative z-10 p-6 sm:p-8 bg-cyan-500 dark:bg-cyan-600 border-4 border-purple-900 dark:border-cyan-100 text-purple-900 dark:text-cyan-100 text-5xl sm:text-7xl font-extrabold focus:outline-none hover:scale-105 transition-transform duration-200 ease-in-out shadow-[5px_5px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[5px_5px_0_0_rgba(8,_145,_178,_1)]">
          ▶
        </button>
      </div>

      <!-- Video Details / Controls -->
      <div class="p-4 sm:p-6 lg:p-8 bg-purple-300 dark:bg-purple-700 transition-colors duration-300 ease-in-out flex flex-col justify-between">
        <div>
          <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-2 leading-tight uppercase border-b-4 border-purple-900 dark:border-cyan-100 pb-2">
            Corporate Vision: Future Forward
          </h2>
          <p class="text-base sm:text-lg mb-4 opacity-80 min-h-[60px]">
            Unveiling our strategic roadmap for innovation and sustainable growth across global markets.
          </p>
          <div class="flex items-center mb-6">
            <img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Presenter Avatar" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-4 border-purple-900 dark:border-cyan-100 mr-4">
            <div>
              <p class="text-lg font-bold uppercase">Dr. Evelyn Reed</p>
              <p class="text-sm opacity-70">Chief Innovation Officer</p>
            </div>
          </div>
        </div>

        <div class="mt-auto">
          <div class="flex justify-between items-center mb-4 border-t-4 border-purple-900 dark:border-cyan-100 pt-4">
            <span class="text-xl sm:text-2xl font-bold">0:00 / 12:45</span>
            <div class="flex space-x-2">
              <button class="p-2 sm:p-3 bg-cyan-500 dark:bg-cyan-600 border-4 border-purple-900 dark:border-cyan-100 text-purple-900 dark:text-cyan-100 text-xl sm:text-2xl font-extrabold shadow-[3px_3px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[3px_3px_0_0_rgba(8,_145,_178,_1)] hover:scale-105 transition-transform duration-200">⚙️</button>
              <button class="p-2 sm:p-3 bg-cyan-500 dark:bg-cyan-600 border-4 border-purple-900 dark:border-cyan-100 text-purple-900 dark:text-cyan-100 text-xl sm:text-2xl font-extrabold shadow-[3px_3px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[3px_3px_0_0_rgba(8,_145,_178,_1)] hover:scale-105 transition-transform duration-200">🔲</button>
            </div>
          </div>
          <div class="w-full h-4 bg-purple-500 dark:bg-purple-600 border-2 border-purple-900 dark:border-cyan-100 mb-4">
            <div class="h-full w-1/4 bg-cyan-500 dark:bg-cyan-600 border-r-2 border-r-purple-900 dark:border-r-cyan-100"></div>
          </div>
          <button class="w-full p-3 sm:p-4 bg-cyan-600 dark:bg-cyan-500 border-4 border-purple-900 dark:border-cyan-100 text-purple-900 dark:text-cyan-100 text-xl sm:text-2xl font-extrabold uppercase shadow-[5px_5px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[5px_5px_0_0_rgba(8,_145,_178,_1)] hover:scale-[1.01] transition-transform duration-200 focus:outline-none">
            Watch Full Presentation
          </button>
        </div>
      </div>
    </div>

    <!-- Related Videos / Episodes -->
    <div class="p-4 sm:p-6 lg:p-8">
      <h3 class="text-2xl sm:text-3xl font-extrabold mb-6 uppercase border-b-4 border-purple-900 dark:border-cyan-100 pb-2">
        Related Insights & Episodes
      </h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 sm:gap-8">

        <!-- Related Video Item 1 -->
        <div class="bg-purple-400 dark:bg-purple-600 border-4 border-purple-900 dark:border-cyan-100 shadow-[7px_7px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[7px_7px_0_0_rgba(8,_145,_178,_1)] p-3 hover:scale-[1.01] transition-transform duration-200 cursor-pointer">
          <img src="https://picsum.photos/300/200?random=2" alt="Related Video Thumbnail" class="w-full h-32 sm:h-40 object-cover border-b-4 border-purple-900 dark:border-cyan-100 mb-3">
          <h4 class="text-lg sm:text-xl font-bold uppercase leading-tight mb-1">Market Trends 2024</h4>
          <p class="text-sm opacity-80 mb-2">Deep dive into emerging market opportunities.</p>
          <div class="flex justify-between items-center text-sm font-semibold opacity-90">
            <span>8:15</span>
            <span>3 days ago</span>
          </div>
        </div>

        <!-- Related Video Item 2 -->
        <div class="bg-purple-400 dark:bg-purple-600 border-4 border-purple-900 dark:border-cyan-100 shadow-[7px_7px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[7px_7px_0_0_rgba(8,_145,_178,_1)] p-3 hover:scale-[1.01] transition-transform duration-200 cursor-pointer">
          <img src="https://picsum.photos/300/200?random=3" alt="Related Video Thumbnail" class="w-full h-32 sm:h-40 object-cover border-b-4 border-purple-900 dark:border-cyan-100 mb-3">
          <h4 class="text-lg sm:text-xl font-bold uppercase leading-tight mb-1">Sustainable Practices</h4>
          <p class="text-sm opacity-80 mb-2">Our commitment to ecological stewardship.</p>
          <div class="flex justify-between items-center text-sm font-semibold opacity-90">
            <span>15:30</span>
            <span>1 week ago</span>
          </div>
        </div>

        <!-- Related Video Item 3 -->
        <div class="bg-purple-400 dark:bg-purple-600 border-4 border-purple-900 dark:border-cyan-100 shadow-[7px_7px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[7px_7px_0_0_rgba(8,_145,_178,_1)] p-3 hover:scale-[1.01] transition-transform duration-200 cursor-pointer">
          <img src="https://picsum.photos/300/200?random=4" alt="Related Video Thumbnail" class="w-full h-32 sm:h-40 object-cover border-b-4 border-purple-900 dark:border-cyan-100 mb-3">
          <h4 class="text-lg sm:text-xl font-bold uppercase leading-tight mb-1">Team Synergy Workshop</h4>
          <p class="text-sm opacity-80 mb-2">Behind the scenes of our collaborative culture.</p>
          <div class="flex justify-between items-center text-sm font-semibold opacity-90">
            <span>22:00</span>
            <span>2 weeks ago</span>
          </div>
        </div>

        <!-- Related Video Item 4 -->
        <div class="bg-purple-400 dark:bg-purple-600 border-4 border-purple-900 dark:border-cyan-100 shadow-[7px_7px_0_0_rgba(76,_29,_149,_1)] dark:shadow-[7px_7px_0_0_rgba(8,_145,_178,_1)] p-3 hover:scale-[1.01] transition-transform duration-200 cursor-pointer">
          <img src="https://picsum.photos/300/200?random=5" alt="Related Video Thumbnail" class="w-full h-32 sm:h-40 object-cover border-b-4 border-purple-900 dark:border-cyan-100 mb-3">
          <h4 class="text-lg sm:text-xl font-bold uppercase leading-tight mb-1">Client Success Stories</h4>
          <p class="text-sm opacity-80 mb-2">Hear directly from our valued partners.</p>
          <div class="flex justify-between items-center text-sm font-semibold opacity-90">
            <span>10:05</span>
            <span>1 month ago</span>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>