Search Components

All Components

Browse all available Tailwind CSS components

Social Media Skeumorphic Container

A skeuomorphic social media container designed with a monochromatic scheme, featuring soft shadows, subtle gradients, and rounded edges to mimic real-world elements like buttons and cards, suitable for displaying user posts or profiles. Includes full responsiveness and dark mode support.

Open Preview

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

3D Carousel Slider Component for Portfolio

A responsive 3D-inspired carousel slider component for showcasing portfolio items, featuring complementary colors and dark mode support. Designed with depth and engagement in mind.

Open Preview

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

Social Media Cards Component

A minimalist and vibrant card component suitable for social media interfaces, displaying user posts with images, likes, comments, and sharing options. It is fully responsive and supports dark mode.

Open Preview

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

Interactive Components Component

A complex e-commerce product card with 3D design elements, using a triadic color scheme, designed for interactive online shopping experiences with responsive and dark mode support.

Open Preview

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

File Viewer Component

A simple skeuomorphic file viewer component with vibrant colors, designed for a dashboard, supporting light and dark modes.

Open Preview

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

Material Design Tabs Component

A complex, monochromatic Material Design inspired tabs component for dashboards, featuring responsive design, dark mode support, and interactive elements. Uses grid-based layouts and subtle shadow effects.

Open Preview

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

Neumorphic Price Display Component

A complex, responsive, and dark-mode-compatible price display component with a Neumorphism design style and an analogous color scheme, suitable for blog/content consumption. Features multiple interactive elements like toggles and detailed tiers.

Open Preview

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

Skeuomorphic Feedback Component (Simple, Earth Tones)

A simple skeuomorphic feedback component for a dashboard, using earth tones and designed to mimic real-world elements. Fully responsive with dark mode support.

Open Preview

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

Brutalist_Video_Player

A brutalist-style video player component for business/corporate websites, featuring high contrast, bold typography, and a complementary color scheme. Fully responsive with dark mode support.

Open Preview

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

Skip to Content Link Component

A retro/vintage 'Skip to Content' link component with pastel colors, designed for business/corporate websites, featuring accessibility and dark mode support.

Open Preview

                <!DOCTYPE html>
<html lang="en" class="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Skip to Content Component</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            pastelPink: '#FFD1DC',
            pastelBlue: '#AEC6CF',
            pastelGreen: '#77DD77',
            pastelYellow: '#FDFD96',
            pastelPurple: '#B39EB5',
            darkBg: '#1A202C',
            darkText: '#E2E8F0',
            darkAccent: '#6B46C1'
          },
          fontFamily: {
            'retro': ['"Press Start 2P"', 'cursive'],
            'monospace': ['"Roboto Mono"', 'monospace'],
            'sans': ['"Arial"', 'sans-serif'] // Fallback or main body font
          },
          boxShadow: {
            'retro-neon': '0 0 10px rgba(255, 209, 220, 0.7), 0 0 20px rgba(255, 209, 220, 0.5), 0 0 30px rgba(255, 209, 220, 0.3)',
            'retro-inset': 'inset 0 0 5px rgba(0,0,0,0.2)'
          }
        }
      }
    }
  </script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto+Mono:wght@400;700&display=swap');

    /* Base styles for the component */
    .skip-link {
      @apply absolute -top-96 left-1/2 -translate-x-1/2 p-3 font-semibold text-center text-lg rounded-lg border-2 border-transparent transition-all duration-300 ease-in-out z-50;
      /* Default to a subtle look */
      @apply bg-pastelGreen text-gray-800 border-pastelYellow dark:bg-darkAccent dark:text-darkText dark:border-darkText;
      /* Retro specific styling */
      font-family: 'Roboto Mono', monospace; /* More readable for the actual link */
    }

    .skip-link:focus {
      @apply top-4 sm:top-6 md:top-8 shadow-lg outline-none;
      /* Retro focus effects */
      @apply bg-pastelRed transform scale-105 border-pastelPink shadow-retro-neon;
      @apply dark:bg-darkAccent dark:border-pastelPink dark:shadow-retro-neon;
    }

    /* Simulate page content for demonstration */
    #main-content {
      @apply p-8 mt-16 sm:mt-24 md:mt-32 mx-auto max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl;
      @apply text-gray-800 dark:text-gray-200;
      font-family: 'sans', sans-serif;
    }

    .dark-mode-toggle {
      @apply fixed bottom-4 right-4 p-3 rounded-full bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200 shadow-lg cursor-pointer z-50;
    }
  </style>
</head>
<body class="bg-pastelBlue dark:bg-darkBg min-h-screen flex flex-col items-center justify-center transition-colors duration-300">

  <a href="#main-content" class="skip-link" role="link" aria-label="Skip to main content of the page">
    SKIP TO CONTENT
  </a>

  <header class="w-full bg-pastelPink dark:bg-darkBg text-pastelYellow dark:text-darkText py-4 shadow-md z-10 relative">
    <div class="container mx-auto px-4 flex justify-between items-center">
      <h1 class="text-2xl sm:text-3xl font-retro text-pastelGreen dark:text-pastelYellow tracking-wide">
        CORPORATE <span class="hidden sm:inline">SYSTEM</span>
      </h1>
      <nav class="hidden md:flex space-x-6">
        <ul class="flex space-x-6">
          <li><a href="#" class="text-lg font-monospace hover:text-white dark:hover:text-pastelGreen transition-colors duration-200">Products</a></li>
          <li><a href="#" class="text-lg font-monospace hover:text-white dark:hover:text-pastelGreen transition-colors duration-200">Services</a></li>
          <li><a href="#" class="text-lg font-monospace hover:text-white dark:hover:text-pastelGreen transition-colors duration-200">About Us</a></li>
          <li><a href="#" class="text-lg font-monospace hover:text-white dark:hover:text-pastelGreen transition-colors duration-200">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main id="main-content">
    <h2 class="text-3xl sm:text-4xl font-retro mb-6 text-center text-pastelGreen dark:text-pastelYellow tracking-wide">Welcome to Our Corporate Portal</h2>
    <p class="mb-4 text-justify leading-relaxed text-gray-700 dark:text-gray-300">
      Embrace the future with our cutting-edge solutions designed to elevate your business. We combine innovative technology with timeless principles to deliver unparalleled results. Our commitment to excellence ensures that every project, big or small, is handled with precision and care.
    </p>
    <p class="mb-4 text-justify leading-relaxed text-gray-700 dark:text-gray-300">
      Explore our diverse range of services, from digital transformation strategies to bespoke software development. Our team of seasoned professionals is dedicated to empowering your success in an ever-evolving market. We believe in building lasting relationships through trust and exceptional service.
    </p>
    <img src="https://picsum.photos/seed/corporate1/800/400" alt="Modern office space with collaborative work" class="w-full h-auto rounded-lg mb-6 shadow-md object-cover">
    <h3 class="text-2xl sm:text-3xl font-retro mb-4 text-pastelPurple dark:text-pastelPink">Our Core Values</h3>
    <ul class="list-disc list-inside space-y-2 text-gray-700 dark:text-gray-300">
      <li>Innovation & Adaptability: Constantly evolving to meet market demands.</li>
      <li>Integrity & Transparency: Building trust through honest communication.</li>
      <li>Customer Centricity: Prioritizing client needs and satisfaction.</li>
      <li>Excellence in Execution: Delivering high-quality results every time.</li>
    </ul>
    <div class="mt-8 text-center">
      <a href="#" class="inline-block px-8 py-3 bg-pastelGreen text-gray-900 border-2 border-pastelYellow rounded-lg text-lg font-monospace shadow-md hover:bg-pastelYellow hover:text-white transform transition-all duration-300 ease-in-out dark:bg-darkAccent dark:text-darkText dark:border-darkText dark:hover:bg-pastelPink dark:hover:border-pastelPink">
        Learn More
      </a>
    </div>
  </main>

  <button class="dark-mode-toggle" onclick="document.documentElement.classList.toggle('dark')">
    Toggle Dark Mode
  </button>

</body>
</html>

1 ... 115 116 117 118 119 ... 335

Search Components

Categories

All Components