Search Components

All Components

Browse all available Tailwind CSS components

Retro_Vintage_Pastel_Social_Charts_Component

A complex, responsive charts component with a retro/vintage 80s/90s aesthetic using pastel colors, designed for social media platforms. Includes dark mode support.

Open Preview

                <div class="font-mono min-h-screen bg-gradient-to-br from-purple-200 via-pink-200 to-yellow-100 p-4 sm:p-6 lg:p-8 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-3xl border-4 border-purple-300 dark:border-purple-600">
    <div class="p-6 sm:p-8 border-b-4 border-purple-300 dark:border-purple-600 bg-gradient-to-r from-purple-100 to-pink-100 dark:from-gray-700 dark:to-gray-900">
      <div class="flex flex-col sm:flex-row items-center justify-between">
        <h1 class="text-4xl sm:text-5xl font-extrabold text-blue-600 dark:text-blue-400 mb-4 sm:mb-0 drop-shadow-lg tracking-wide">Retrowave Insights <span class="text-pink-500 dark:text-pink-400 text-2xl">📊</span></h1>
        <div class="flex space-x-2">
          <button class="px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white font-bold rounded-lg shadow-md hover:scale-105 transition-transform duration-200 transform-gpu text-sm sm:text-base border-2 border-pink-300 dark:border-pink-500">Week</button>
          <button class="px-4 py-2 bg-purple-400 dark:bg-purple-600 text-white font-bold rounded-lg shadow-md hover:scale-105 transition-transform duration-200 transform-gpu text-sm sm:text-base border-2 border-purple-300 dark:border-purple-500">Month</button>
          <button class="px-4 py-2 bg-yellow-400 dark:bg-yellow-600 text-white font-bold rounded-lg shadow-md hover:scale-105 transition-transform duration-200 transform-gpu text-sm sm:text-base border-2 border-yellow-300 dark:border-yellow-500">Year</button>
        </div>
      </div>
    </div>

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

      <!-- Engagement Chart -->
      <div class="bg-blue-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-blue-200 dark:border-blue-700 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-blue-600 dark:text-blue-300 mb-4 flex items-center"><span class="text-3xl mr-2">⚡</span>Engagement Overview</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Your popularity rocketed this month!</p>
        <div class="relative h-48 bg-blue-100 dark:bg-gray-600 rounded-lg p-2 flex items-end justify-around border-2 border-blue-200 dark:border-blue-800 shadow-inner overflow-hidden">
          <div class="absolute top-2 left-2 right-2 flex justify-between text-xs text-gray-500 dark:text-gray-400">
            <span>100K</span><span>75K</span><span>50K</span><span>25K</span><span>0</span>
          </div>
          <!-- Bars (simplified for HTML/Tailwind) -->
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-2/3 transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">75K</span>
          </div>
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-4/5 transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">90K</span>
          </div>
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-1/2 transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">50K</span>
          </div>
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-full transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">100K</span>
          </div>
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-3/4 transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">80K</span>
          </div>
        </div>
        <div class="flex justify-around text-xs mt-2 text-gray-500 dark:text-gray-400">
          <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span>
        </div>
      </div>

      <!-- Follower Growth -->
      <div class="bg-pink-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-pink-200 dark:border-pink-700 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-pink-600 dark:text-pink-300 mb-4 flex items-center"><span class="text-3xl mr-2">💖</span>Follower Growth</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">You gained 1.2K new cool followers!</p>
        <div class="relative h-48 bg-pink-100 dark:bg-gray-600 rounded-lg p-2 flex flex-col justify-end items-start border-2 border-pink-200 dark:border-pink-800 shadow-inner overflow-hidden">
          <div class="absolute top-2 left-2 right-2 flex justify-between text-xs text-gray-500 dark:text-gray-400">
            <span>20K</span><span>15K</span><span>10K</span><span>5K</span><span>0</span>
          </div>
          <!-- Line chart simulation with divs -->
          <div class="absolute left-0 bottom-0 w-full h-full flex items-end justify-between px-2 pb-2">
            <div class="relative flex flex-col items-center w-8" style="height: 20%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">4K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
            <div class="relative flex flex-col items-center w-8" style="height: 50%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">10K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
            <div class="relative flex flex-col items-center w-8" style="height: 70%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">14K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
            <div class="relative flex flex-col items-center w-8" style="height: 90%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">18K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
            <div class="relative flex flex-col items-center w-8" style="height: 100%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">20K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
          </div>
        </div>
        <div class="flex justify-around text-xs mt-2 text-gray-500 dark:text-gray-400">
          <span>W1</span><span>W2</span><span>W3</span><span>W4</span><span>W5</span>
        </div>
      </div>

      <!-- Top Posts / Content Performance -->
      <div class="bg-yellow-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-yellow-200 dark:border-yellow-700 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-yellow-600 dark:text-yellow-300 mb-4 flex items-center"><span class="text-3xl mr-2">🌟</span>Top Content</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Your latest 8-bit art is blowing up!</p>
        <div class="space-y-4">
          <div class="flex items-center space-x-3 bg-yellow-100 dark:bg-gray-600 p-3 rounded-lg border border-yellow-200 dark:border-yellow-800 shadow-sm">
            <img src="https://picsum.photos/60/60?random=1" alt="Post thumbnail" class="w-16 h-16 rounded-md object-cover border border-yellow-300 dark:border-yellow-600">
            <div class="flex-1">
              <h3 class="font-semibold text-yellow-700 dark:text-yellow-200 truncate">Pixelated Sunset Vibes</h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">15.2K Likes • 2.1K Comments</p>
            </div>
            <span class="text-xl font-bold text-yellow-600 dark:text-yellow-300">#1</span>
          </div>
          <div class="flex items-center space-x-3 bg-yellow-100 dark:bg-gray-600 p-3 rounded-lg border border-yellow-200 dark:border-yellow-800 shadow-sm">
            <img src="https://picsum.photos/60/60?random=2" alt="Post thumbnail" class="w-16 h-16 rounded-md object-cover border border-yellow-300 dark:border-yellow-600">
            <div class="flex-1">
              <h3 class="font-semibold text-yellow-700 dark:text-yellow-200 truncate">Neon City Remix</h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">12.8K Likes • 1.8K Comments</p>
            </div>
            <span class="text-xl font-bold text-yellow-600 dark:text-yellow-300">#2</span>
          </div>
          <div class="flex items-center space-x-3 bg-yellow-100 dark:bg-gray-600 p-3 rounded-lg border border-yellow-200 dark:border-yellow-800 shadow-sm">
            <img src="https://picsum.photos/60/60?random=3" alt="Post thumbnail" class="w-16 h-16 rounded-md object-cover border border-yellow-300 dark:border-yellow-600">
            <div class="flex-1">
              <h3 class="font-semibold text-yellow-700 dark:text-yellow-200 truncate">VHS Dreams Mixtape</h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">9.5K Likes • 1.1K Comments</p>
            </div>
            <span class="text-xl font-bold text-yellow-600 dark:text-yellow-300">#3</span>
          </div>
        </div>
      </div>

      <!-- Audience Demographics (Pie Chart) -->
      <div class="bg-purple-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-purple-200 dark:border-purple-700 col-span-1 md:col-span-2 lg:col-span-1 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-purple-600 dark:text-purple-300 mb-4 flex items-center"><span class="text-3xl mr-2">👾</span>Audience Vibe</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Who's grooving to your tunes?</p>
        <div class="relative h-48 flex items-center justify-center bg-purple-100 dark:bg-gray-600 rounded-lg p-2 border-2 border-purple-200 dark:border-purple-800 shadow-inner">
          <!-- Simple Pie Chart Simulation with Tailwind - Uses nested divs for segments -->
          <div class="relative w-40 h-40 bg-gray-300 dark:bg-gray-500 rounded-full flex items-center justify-center overflow-hidden shadow-xl border border-purple-300 dark:border-purple-600">
            <!-- Segment 1: 50% - Female -->
            <div class="absolute inset-0 bg-pink-400 dark:bg-pink-600 origin-center-left rounded-full" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%); transform: rotate(0deg);"></div>
            <!-- Segment 2: 30% - Male -->
            <div class="absolute inset-0 bg-blue-400 dark:bg-blue-600 origin-center-left rounded-full" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%); transform: rotate(180deg);"></div>
            <!-- Segment 3: 20% - Other -->
            <div class="absolute inset-0 bg-yellow-400 dark:bg-yellow-600 origin-center-left rounded-full" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%); transform: rotate(288deg);"></div>
            <div class="absolute w-20 h-20 bg-purple-100 dark:bg-gray-700 rounded-full border border-purple-300 dark:border-purple-600"></div>
          </div>
        </div>
        <div class="flex justify-center flex-wrap gap-4 mt-4 text-sm font-semibold">
          <div class="flex items-center">
            <span class="block w-4 h-4 bg-pink-400 dark:bg-pink-600 rounded-full mr-2 border border-pink-300 dark:border-pink-500"></span>Female <span class="ml-1 text-pink-600 dark:text-pink-300">(50%)</span>
          </div>
          <div class="flex items-center">
            <span class="block w-4 h-4 bg-blue-400 dark:bg-blue-600 rounded-full mr-2 border border-blue-300 dark:border-blue-500"></span>Male <span class="ml-1 text-blue-600 dark:text-blue-300">(30%)</span>
          </div>
          <div class="flex items-center">
            <span class="block w-4 h-4 bg-yellow-400 dark:bg-yellow-600 rounded-full mr-2 border border-yellow-300 dark:border-yellow-500"></span>Other <span class="ml-1 text-yellow-600 dark:text-yellow-300">(20%)</span>
          </div>
        </div>
      </div>

      <!-- Recent Mentions/Comments -->
      <div class="bg-green-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-green-200 dark:border-green-700 col-span-1 md:col-span-2 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-green-600 dark:text-green-300 mb-4 flex items-center"><span class="text-3xl mr-2">💬</span>Latest Echoes</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">People are buzzing about your content!</p>
        <div class="space-y-4">
          <div class="flex items-start space-x-3 bg-green-100 dark:bg-gray-600 p-3 rounded-lg border border-green-200 dark:border-green-800 shadow-sm">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User avatar" class="w-10 h-10 rounded-full object-cover border-2 border-green-300 dark:border-green-600">
            <div class="flex-1">
              <p class="font-semibold text-green-700 dark:text-green-200"><span class="text-green-500 dark:text-green-400">@SynthWaveDude</span>: "Totally obsessed with your new track! 🎶 Brings back so many memories!"</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
            </div>
          </div>
          <div class="flex items-start space-x-3 bg-green-100 dark:bg-gray-600 p-3 rounded-lg border border-green-200 dark:border-green-800 shadow-sm">
            <img src="https://randomuser.me/api/portraits/women/62.jpg" alt="User avatar" class="w-10 h-10 rounded-full object-cover border-2 border-green-300 dark:border-green-600">
            <div class="flex-1">
              <p class="font-semibold text-green-700 dark:text-green-200"><span class="text-green-500 dark:text-green-400">@NeonDreamer</span>: "This pixel art is pure perfection! Keep it up! 🤩"</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">yesterday</p>
            </div>
          </div>
          <div class="flex items-start space-x-3 bg-green-100 dark:bg-gray-600 p-3 rounded-lg border border-green-200 dark:border-green-800 shadow-sm">
            <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User avatar" class="w-10 h-10 rounded-full object-cover border-2 border-green-300 dark:border-green-600">
            <div class="flex-1">
              <p class="font-semibold text-green-700 dark:text-green-200"><span class="text-green-500 dark:text-green-400">@VaporWaveViking</span>: "Your commitment to the aesthetic is unmatched. Love the consistency!"</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">3 days ago</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 bg-gradient-to-l from-purple-100 to-pink-100 dark:from-gray-700 dark:to-gray-900 border-t-4 border-purple-300 dark:border-purple-600 text-center">
      <p class="text-sm text-gray-700 dark:text-gray-300">Insights generated with <span class="text-pink-500 dark:text-pink-400 font-bold">✨ RetroBoost AI ✨</span></p>
    </div>
  </div>
</div>

Success Messages Component

A complex Material Design-inspired success messages component for social media applications, featuring analogous colors, responsiveness, and dark mode support.

Open Preview

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

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

    <!-- Header Section -->
    <div class="bg-green-600 dark:bg-green-700 p-4 sm:p-6 flex items-center justify-between shadow-md">
      <h2 class="text-xl sm:text-2xl font-bold text-white flex items-center">
        <svg class="h-7 w-7 sm:h-8 sm:w-8 mr-2" 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 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
        </svg>
        <span class="hidden sm:inline-block">Success! Your Actions are Noted</span>
        <span class="sm:hidden">Success!</span>
      </h2>
      <button aria-label="Close success message" class="text-white hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-600 focus:ring-white rounded-full p-1">
        <svg class="h-6 w-6" 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>
      </button>
    </div>

    <!-- Main Content Area -->
    <div class="p-4 sm:p-6 text-gray-700 dark:text-gray-300">

      <p class="mb-6 text-lg sm:text-xl font-semibold">
        Great job! Here's a quick summary of your recent successful operations.
      </p>

      <!-- Message Categories/Cards -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        <!-- Card 1: New Post Published -->
        <div class="bg-green-50 dark:bg-gray-700 rounded-lg p-5 shadow-lg transform transition duration-300 hover:scale-[1.02] hover:shadow-xl">
          <div class="flex items-center mb-4">
            <img class="h-12 w-12 rounded-full mr-4 object-cover border-2 border-green-400 dark:border-green-500" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
            <div>
              <p class="font-bold text-gray-900 dark:text-white">Post Published!</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Just now</p>
            </div>
          </div>
          <p class="text-gray-800 dark:text-gray-200 mb-4 line-clamp-3">
            Your new article "Exploring the Cosmos: A Journey Through Galaxies" has been successfully published to your profile and is now visible to all your followers.
          </p>
          <div class="flex justify-between items-center">
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-400 hover:underline flex items-center">
              View Post
              <svg class="ml-1 h-4 w-4" 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 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </a>
            <span class="text-xs text-gray-500 dark:text-gray-400">Reads: 1,234</span>
          </div>
        </div>

        <!-- Card 2: Friend Request Accepted -->
        <div class="bg-green-50 dark:bg-gray-700 rounded-lg p-5 shadow-lg transform transition duration-300 hover:scale-[1.02] hover:shadow-xl">
          <div class="flex items-center mb-4">
            <img class="h-12 w-12 rounded-full mr-4 object-cover border-2 border-green-400 dark:border-green-500" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
            <div>
              <p class="font-bold text-gray-900 dark:text-white">Friend Request Accepted!</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">5 minutes ago</p>
            </div>
          </div>
          <p class="text-gray-800 dark:text-gray-200 mb-4 line-clamp-3">
            John Doe has accepted your friend request. You can now send messages and see his full activity feed.
          </p>
          <div class="flex justify-between items-center">
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-400 hover:underline flex items-center">
              View Profile
              <svg class="ml-1 h-4 w-4" 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 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </a>
            <span class="text-xs text-gray-500 dark:text-gray-400">Shared: 12 posts</span>
          </div>
        </div>

        <!-- Card 3: Profile Update Saved -->
        <div class="bg-green-50 dark:bg-gray-700 rounded-lg p-5 shadow-lg transform transition duration-300 hover:scale-[1.02] hover:shadow-xl">
          <div class="flex items-center mb-4">
            <svg class="h-12 w-12 text-green-500 mr-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
            </svg>
            <div>
              <p class="font-bold text-gray-900 dark:text-white">Profile Updated!</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">1 hour ago</p>
            </div>
          </div>
          <p class="text-gray-800 dark:text-gray-200 mb-4 line-clamp-3">
            Your profile picture and bio have been successfully updated. Your new look is now live!
          </p>
          <div class="flex justify-between items-center">
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-400 hover:underline flex items-center">
              Edit Profile
              <svg class="ml-1 h-4 w-4" 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.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
              </svg>
            </a>
            <span class="text-xs text-gray-500 dark:text-gray-400">Last Updated: 16:30</span>
          </div>
        </div>

        <!-- Card 4: Event Created -->
        <div class="bg-green-50 dark:bg-gray-700 rounded-lg p-5 shadow-lg transform transition duration-300 hover:scale-[1.02] hover:shadow-xl">
          <div class="flex items-center mb-4">
            <svg class="h-12 w-12 text-green-500 mr-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
            </svg>
            <div>
              <p class="font-bold text-gray-900 dark:text-white">Event Created!</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">3 hours ago</p>
            </div>
          </div>
          <p class="text-gray-800 dark:text-gray-200 mb-4 line-clamp-3">
            Your new event "Weekend Hiking Adventure" has been successfully created and shared with your connections.
          </p>
          <div class="flex justify-between items-center">
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-400 hover:underline flex items-center">
              Manage Event
              <svg class="ml-1 h-4 w-4" 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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
              </svg>
            </a>
            <span class="text-xs text-gray-500 dark:text-gray-400">Attendees: 5/20</span>
          </div>
        </div>

      </div>

      <!-- Call to Action / Footer Section -->
      <div class="mt-8 flex flex-col sm:flex-row items-center justify-between border-t border-gray-200 dark:border-gray-700 pt-6">
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 sm:mb-0 text-center sm:text-left">Need more insights? Check your activity log.</p>
        <button class="px-6 py-3 bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700 text-white font-semibold rounded-full shadow-lg transition duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-green-600">
          Go to Activity Log
        </button>
      </div>

    </div>

  </div>

</div>

A responsive hamburger menu component for blog/content sites, featuring dark mode, grayscale color scheme, and complex interactive elements purely with HTML and Tailwind CSS. Designed for optimal reading and content consumption.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
  <!-- Header with Hamburger Menu -->
  <header class="bg-white dark:bg-gray-800 shadow-sm">
    <div class="container mx-auto px-4 py-4 flex items-center justify-between">
      <!-- Logo -->
      <a href="#" class="text-2xl font-bold text-gray-900 dark:text-gray-100">BlogName</a>

      <!-- Hamburger Icon (Mobile) -->
      <div class="lg:hidden relative" x-data="{ open: false }">
        <button @click="open = !open" class="text-gray-500 dark:text-gray-400 focus:outline-none focus:text-gray-900 dark:focus:text-gray-100">
          <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path x-show="!open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            <path x-show="open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>

        <!-- Mobile Menu Overlay -->
        <div x-show="open" @click.away="open = false" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute top-12 right-0 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg py-2 z-50 transform origin-top-right">
          <nav class="flex flex-col space-y-1">
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors duration-200">Home</a>
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors duration-200">Categories</a>
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors duration-200">Archives</a>
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors duration-200">About</a>
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors duration-200">Contact</a>
            <div class="border-t border-gray-200 dark:border-gray-700 my-2"></div>
            <div x-data="{ darkMode: localStorage.theme === 'dark' ? true : false }" class="flex items-center justify-between px-4 py-2">
              <span class="text-gray-700 dark:text-gray-300">Dark Mode</span>
              <label for="dark-mode-toggle-mobile" class="relative inline-flex items-center cursor-pointer">
                <input type="checkbox" id="dark-mode-toggle-mobile" class="sr-only peer" :checked="darkMode" @change="darkMode = !darkMode; if (darkMode) { document.documentElement.classList.add('dark'); localStorage.theme = 'dark'; } else { document.documentElement.classList.remove('dark'); localStorage.theme = 'light'; }">
                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
              </label>
            </div>
          </nav>
        </div>
      </div>

      <!-- Desktop Menu -->
      <nav class="hidden lg:flex items-center space-x-6">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">Home</a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">Categories</a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">Archives</a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">About</a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">Contact</a>
        
        <!-- Dark Mode Toggle (Desktop) -->
        <div x-data="{ 
          darkMode: localStorage.theme === 'dark' ? true : false, 
          init() { 
            if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
              document.documentElement.classList.add('dark');
              this.darkMode = true;
            } else {
              document.documentElement.classList.remove('dark');
              this.darkMode = false;
            }
          }
        }" class="flex items-center">
          <label for="dark-mode-toggle-desktop" class="relative inline-flex items-center cursor-pointer">
            <input type="checkbox" id="dark-mode-toggle-desktop" class="sr-only peer" :checked="darkMode" @change="darkMode = !darkMode; if (darkMode) { document.documentElement.classList.add('dark'); localStorage.theme = 'dark'; } else { document.documentElement.classList.remove('dark'); localStorage.theme = 'light'; }">
            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
            <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Dark Mode</span>
          </label>
        </div>
      </nav>
    </div>
  </header>

  <!-- Main Content Area (Example) -->
  <main class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-extrabold mb-6">Welcome to Our Blog</h1>
    <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Blog Post Card 1 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/400/250" alt="Blog Post Image" class="w-full h-48 object-cover">
        <div class="p-6">
          <h2 class="text-xl font-semibold mb-2">The Art of Minimalist Design</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Discover how less can be more in web design and daily life, embracing simplicity and function.</p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full mr-2">
              <span class="text-gray-700 dark:text-gray-300 text-sm">John Doe</span>
            </div>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          </div>
        </div>
      </article>

      <!-- Blog Post Card 2 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/400/251" alt="Blog Post Image" class="w-full h-48 object-cover">
        <div class="p-6">
          <h2 class="text-xl font-semibold mb-2">Exploring the Mountains: A Journey</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">An adventurous tale of conquering peaks and finding peace in nature's grandeur.</p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full mr-2">
              <span class="text-gray-700 dark:text-gray-300 text-sm">Jane Smith</span>
            </div>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          </div>
        </div>
      </article>

      <!-- Blog Post Card 3 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/400/252" alt="Blog Post Image" class="w-full h-48 object-cover">
        <div class="p-6">
          <h2 class="text-xl font-semibold mb-2">Future of AI: Ethics and Innovation</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Delving into the complex ethical dilemmas and exciting innovations in artificial intelligence.</p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full mr-2">
              <span class="text-gray-700 dark:text-gray-300 text-sm">Mike Johnson</span>
            </div>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          </div>
        </div>
      </article>
    </section>
  </main>

  <!-- Footer (Example) -->
  <footer class="bg-gray-200 dark:bg-gray-800 py-6 mt-8">
    <div class="container mx-auto px-4 text-center text-gray-600 dark:text-gray-400">
      <p>&copy; 2023 BlogName. All rights reserved.</p>
    </div>
  </footer>
</div>

<!-- Alpine.js for menu toggle and dark mode persistence -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script>
  // Initial dark mode setup (outside Alpine.js for page load)
  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
</script>

Skeuomorphic_Product_Comparison_Component

A simple, responsive product comparison component with a skeuomorphic design using a monochromatic dark blue color scheme, suitable for dashboard applications. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-blue-100 to-blue-200 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans flex items-center justify-center">
  <div class="w-full max-w-4xl bg-blue-50 dark:bg-gray-700 rounded-xl shadow-xl border border-blue-200 dark:border-gray-600 overflow-hidden
              transform perspective-1000 rotate-x-3 transition-transform duration-500 hover:rotate-x-0 hover:scale-105 ease-in-out
              m-4 md:m-8 lg:m-12 relative">
    
    <!-- Top 'bezel' light reflection effect -->
    <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-b from-blue-100/50 to-transparent dark:from-gray-600/50 dark:to-transparent rounded-t-xl"></div>
    
    <div class="p-6 sm:p-8 md:p-10 flex flex-col items-center">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-blue-800 dark:text-blue-200 mb-6 relative z-10
                 drop-shadow-md text-shadow-sm-light dark:text-shadow-sm-dark tracking-wide">
        Product Comparison
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 w-full">

        <!-- Product 1 Card -->
        <div class="bg-blue-100 dark:bg-gray-800 p-6 rounded-lg shadow-inner-xl border border-blue-200 dark:border-gray-600
                    transform transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl relative
                    flex flex-col items-center text-center">
          <!-- Inner 'screen' effect -->
          <div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-blue-100/50 dark:from-gray-900/50 dark:to-gray-800/50 rounded-lg"></div>
          <div class="relative z-10 w-full">
            <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-300 mb-4">Product Alpha</h3>
            <img src="https://picsum.photos/300/200?random=1" alt="Product Alpha" class="w-full h-auto rounded-md mb-4 shadow-md border border-blue-300 dark:border-gray-500" loading="lazy">
            <p class="text-blue-600 dark:text-blue-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <ul class="text-left text-blue-700 dark:text-blue-300 text-sm space-y-2 mb-4 list-none p-0 flex flex-col items-start w-full">
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature A</li>
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature B</li>
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-red-500 mr-2 shadow-sm"></span>Feature C (Missing)</li>
            </ul>
            <div class="text-2xl font-bold text-blue-800 dark:text-blue-100 mb-4">$199.99</div>
            <button class="px-6 py-2 bg-blue-600 text-white rounded-full shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
                           active:shadow-inner-sm border border-blue-700 dark:border-blue-500 
                           transform transition-transform duration-150 active:scale-95 active:shadow-md-inset 
                           dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-400">
              Select Product Alpha
            </button>
          </div>
        </div>

        <!-- Product 2 Card -->
        <div class="bg-blue-100 dark:bg-gray-800 p-6 rounded-lg shadow-inner-xl border border-blue-200 dark:border-gray-600
                    transform transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl relative
                    flex flex-col items-center text-center">
          <!-- Inner 'screen' effect -->
          <div class="absolute inset-0 bg-gradient-to-br from-blue-50/50 to-blue-100/50 dark:from-gray-900/50 dark:to-gray-800/50 rounded-lg"></div>
          <div class="relative z-10 w-full">
            <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-300 mb-4">Product Beta</h3>
            <img src="https://picsum.photos/300/200?random=2" alt="Product Beta" class="w-full h-auto rounded-md mb-4 shadow-md border border-blue-300 dark:border-gray-500" loading="lazy">
            <p class="text-blue-600 dark:text-blue-400 text-sm mb-4">Consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <ul class="text-left text-blue-700 dark:text-blue-300 text-sm space-y-2 mb-4 list-none p-0 flex flex-col items-start w-full">
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature A</li>
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature B</li>
              <li class="flex items-center"><span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-2 shadow-sm"></span>Feature C</li>
            </ul>
            <div class="text-2xl font-bold text-blue-800 dark:text-blue-100 mb-4">$249.99</div>
            <button class="px-6 py-2 bg-blue-600 text-white rounded-full shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
                           active:shadow-inner-sm border border-blue-700 dark:border-blue-500 
                           transform transition-transform duration-150 active:scale-95 active:shadow-md-inset
                           dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-400">
              Select Product Beta
            </button>
          </div>
        </div>

      </div>
    </div>
    
    <!-- Bottom 'bezel' dark reflection/shadow effect -->
    <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-t from-blue-300/50 to-transparent dark:from-gray-950/50 dark:to-transparent rounded-b-xl"></div>
    
  </div>
</div>

<!-- Custom Styles for Skeuomorphism -->
<style>
  /* Light mode text shadow */
  .text-shadow-sm-light {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4),
                 -1px -1px 2px rgba(0, 0, 0, 0.2);
  }

  /* Dark mode text shadow */
  .dark .text-shadow-sm-dark {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4),
                 -1px -1px 2px rgba(255, 255, 255, 0.1);
  }

  /* Outer shadow for the main container - resembles lifting off the surface */
  .shadow-xl {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  .dark .shadow-xl {
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15);
  }

  /* Inner shadow for product cards - resembles an indented button or screen */
  .shadow-inner-xl {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06), inset 0px 5px 10px -3px rgba(0, 0, 0, 0.1), inset 0px -5px 10px -3px rgba(255, 255, 255, 0.5);
  }
  .dark .shadow-inner-xl {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2),
                inset 0px 5px 10px -3px rgba(0, 0, 0, 0.3),
                inset 0px -5px 10px -3px rgba(255, 255, 255, 0.05);
  }

  /* Active state for buttons - pressing effect */
  .active\:shadow-md-inset {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.15),
                inset 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .dark .active\:shadow-md-inset {
     box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3),
                 inset 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  }

  /* 3D perspective for the main container */
  .perspective-1000 {
    transform-style: preserve-3d;
    perspective: 1000px;
  }
  .rotate-x-3 {
    transform: rotateX(3deg);
  }
  .hover\:rotate-x-0:hover {
    transform: rotateX(0deg);
  }
</style>

Brutalist_Triadic_Simple_Mega_Menu

A simple, brutalist-style mega menu designed for a blog or content site, featuring a triadic color scheme and full responsiveness with dark mode support.

Open Preview

                <nav class="bg-violet-500 dark:bg-violet-900 text-yellow-300 dark:text-cyan-300 border-b-8 border-yellow-300 dark:border-cyan-300 relative z-50">
  <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row items-center justify-between">
    <div class="flex justify-between items-center w-full md:w-auto">
      <a href="#" class="text-4xl md:text-5xl font-extrabold tracking-tighter uppercase leading-none border-4 border-yellow-300 dark:border-cyan-300 px-3 py-1 bg-yellow-300 bg-opacity-20 dark:bg-cyan-300 dark:bg-opacity-20 text-yellow-300 dark:text-cyan-300">
        BLOG CO.
      </a>
      <button id="menu-toggle" class="md:hidden focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2">
        <svg class="w-8 h-8 text-yellow-300 dark:text-cyan-300" 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="3" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <div id="mega-menu-content" class="hidden md:flex flex-col md:flex-row md:items-center w-full md:w-auto mt-4 md:mt-0 space-y-4 md:space-y-0 md:space-x-8 lg:space-x-12 absolute md:static top-full left-0 right-0 bg-violet-600 dark:bg-violet-800 border-t-8 border-yellow-300 dark:border-cyan-300 md:border-none p-4 md:p-0">
      <a href="#" class="block text-2xl font-bold uppercase hover:text-white dark:hover:text-white transition duration-200 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2 md:p-0">
        Articles
      </a>
      <a href="#" class="block text-2xl font-bold uppercase hover:text-white dark:hover:text-white transition duration-200 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2 md:p-0">
        Categories
      </a>
      <a href="#" class="block text-2xl font-bold uppercase hover:text-white dark:hover:text-white transition duration-200 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2 md:p-0">
        About
      </a>
      <a href="#" class="block text-2xl font-bold uppercase hover:text-white dark:hover:text-white transition duration-200 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-cyan-300 p-2 md:p-0">
        Contact
      </a>
    </div>
  </div>
</nav>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.getElementById('menu-toggle');
    const megaMenuContent = document.getElementById('mega-menu-content');

    menuToggle.addEventListener('click', function() {
      megaMenuContent.classList.toggle('hidden');
      megaMenuContent.classList.toggle('flex');
    });
  });
</script>

Mega Menu Component - Social Media

A responsive, dark-mode enabled mega menu component designed for social media applications, following a Material Design aesthetic with a grayscale color scheme. It includes sections for trending, categories, and profiles.

Open Preview

                <nav x-data="{ open: false, categoryOpen: false, resourcesOpen: false }" class="bg-white shadow-md dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">SocialFeed</a>
        </div>
        <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
          <a href="#" class="border-gray-500 text-gray-900 dark:text-white dark:border-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
          <div class="relative" x-data="{ openCategory: false }" @click.away="openCategory = false">
            <button @click="openCategory = !openCategory" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:text-gray-700 dark:focus:text-gray-200 focus:border-gray-300 dark:focus:border-gray-500 transition duration-150 ease-in-out">
              Categories
              <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            <div x-show="openCategory" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-50 mt-2 w-full max-w-sm sm:max-w-md lg:max-w-3xl left-1/2 -ml-32 sm:-ml-48 lg:-ml-64 px-2 sm:px-0 lg:px-8">
              <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                <div class="relative grid gap-6 bg-white dark:bg-gray-800 px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-3">
                  <div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Trending Categories</p>
                    <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
                      <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 sm:h-12 sm:w-12">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m-4 8h4M21 8h-4m4 8h-4M10 4h4v16h-4V4z" /></svg>
                      </div>
                      <div class="ml-4">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Technology</p>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Latest gadgets and tech news.</p>
                      </div>
                    </a>
                    <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
                      <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 sm:h-12 sm:w-12">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7zm0 0V5c0-1.1.9-2 2-2h2M4 7h4m-4 8v2c0 1.1.9 2 2 2h2m-4-2H4m16-12v2c0 1.1-.9 2-2 2h-2m4-2h-4m-4 0h-4m0 0V5c0 1.1-.9 2-2 2h-2" /></svg>
                      </div>
                      <div class="ml-4">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Gaming</p>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">New releases and esports updates.</p>
                      </div>
                    </a>
                  </div>
                  <div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Explore By Interest</p>
                    <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
                      <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 sm:h-12 sm:w-12">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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>
                      <div class="ml-4">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Art & Culture</p>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Dive into the world of creativity.</p>
                      </div>
                    </a>
                    <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
                      <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 sm:h-12 sm:w-12">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                      </div>
                      <div class="ml-4">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Science</p>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Discover new breakthroughs.</p>
                      </div>
                    </a>
                  </div>
                  <div class="lg:col-span-1">
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Featured Communities</p>
                    <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
                      <img class="flex-shrink-0 h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/237/50/50" alt="Community Avatar">
                      <div class="ml-4">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Photography Enthusiasts</p>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Share your best shots.</p>
                      </div>
                    </a>
                    <a href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition ease-in-out duration-150">
                      <img class="flex-shrink-0 h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/1025/50/50" alt="Community Avatar">
                      <div class="ml-4">
                        <p class="text-base font-medium text-gray-900 dark:text-white">Bookworms United</p>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Discuss your favorite books.</p>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Trending</a>
        </div>
      </div>
      <div class="hidden sm:ml-6 sm:flex sm:items-center">
        <button class="flex-shrink-0 bg-white dark:bg-gray-800 p-1 rounded-full text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-offset-gray-900 dark:focus:ring-gray-400">
          <span class="sr-only">View notifications</span>
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
        </button>

        <!-- Profile dropdown -->
        <div class="ml-3 relative" x-data="{ openProfile: false }" @click.away="openProfile = false">
          <div>
            <button type="button" class="max-w-xs bg-white dark:bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-offset-gray-900 dark:focus:ring-gray-400" id="user-menu-button" aria-expanded="false" aria-haspopup="true" @click="openProfile = !openProfile">
              <span class="sr-only">Open user menu</span>
              <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="">
            </button>
          </div>
          <div x-show="openProfile" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
          </div>
        </div>
      </div>
      <div class="-mr-2 flex items-center sm:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 dark:focus:ring-gray-400" aria-controls="mobile-menu" aria-expanded="false" @click="open = !open">
          <span class="sr-only">Open main menu</span>
          <svg x-show="!open" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg x-show="open" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="sm:hidden" id="mobile-menu" x-show="open" x-transition:enter="duration-200 ease-out" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="duration-100 ease-in" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95">
    <div class="pt-2 pb-3 space-y-1">
      <a href="#" class="bg-gray-50 dark:bg-gray-700 border-gray-500 text-gray-700 dark:text-white block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
      <div x-data="{ subOpen: false }">
        <button @click="subOpen = !subOpen" class="flex items-center justify-between w-full pl-3 pr-4 py-2 text-left text-base font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-500 border-l-4 border-transparent focus:outline-none focus:text-gray-800 focus:bg-gray-100 focus:border-gray-400 dark:focus:text-gray-200 dark:focus:bg-gray-700 dark:focus:border-gray-500 transition duration-150 ease-in-out">
          <span>Categories</span>
          <svg class="h-5 w-5 transition-transform" :class="{'transform rotate-180': subOpen}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
        <div x-show="subOpen" class="mt-2 space-y-1 pl-6 pr-3">
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Technology</a>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Gaming</a>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Art & Culture</a>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Science</a>
        </div>
      </div>
      <a href="#" class="border-transparent text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-500 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Trending</a>
    </div>
    <div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center px-4">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium text-gray-800 dark:text-white">John Doe</div>
          <div class="text-sm font-medium text-gray-500 dark:text-gray-400">[email protected]</div>
        </div>
      </div>
      <div class="mt-3 space-y-1">
        <a href="#" class="block px-4 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Your Profile</a>
        <a href="#" class="block px-4 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Settings</a>
        <a href="#" class="block px-4 py-2 text-base font-medium text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700">Sign out</a>
      </div>
    </div>
  </div>
</nav>
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

Dark Mode Portfolio Navigation

A complex, responsive navigation component for a portfolio website, featuring a dark mode UI with analogous colors, designed to showcase work or products. Includes desktop, tablet, and mobile layouts with dropdowns and user avatar.

Open Preview

                <nav class="bg-gray-800 dark:bg-gray-950 shadow-lg dark:shadow-xl">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <a href="#" class="flex-shrink-0 text-white text-2xl font-bold tracking-wider">
          Portfolio
        </a>
        <div class="hidden md:block">
          <div class="ml-10 flex items-baseline space-x-4">
            <a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">Home</a>
            <div class="relative group">
              <button class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300 flex items-center">
                Projects
                <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 010-1.06z" clip-rule="evenodd" />
                </svg>
              </button>
              <div class="absolute hidden group-hover:block z-10 mt-2 w-48 rounded-md shadow-lg py-1 bg-gray-800 dark:bg-gray-900 ring-1 ring-black ring-opacity-5 focus:outline-none transition-opacity duration-300 opacity-0 group-hover:opacity-100 transform scale-95 group-hover:scale-100">
                <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Web Development</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">UI/UX Design</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Graphic Design</a>
              </div>
            </div>
            <a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">About</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300">Contact</a>
          </div>
        </div>
      </div>
      <div class="hidden md:block">
        <div class="ml-4 flex items-center md:ml-6">
          <button type="button" class="relative p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white transition-colors duration-300">
            <span class="absolute -inset-1.5"></span>
            <span class="sr-only">View notifications</span>
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
            </svg>
          </button>

          <!-- Profile dropdown -->
          <div class="relative ml-3 group">
            <div>
              <button type="button" class="relative flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                <span class="absolute -inset-1.5"></span>
                <span class="sr-only">Open user menu</span>
                <img class="h-8 w-8 rounded-full"
                  src="https://randomuser.me/api/portraits/men/45.jpg"
                  alt="User Avatar">
              </button>
            </div>

            <div class="absolute hidden group-hover:block right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-gray-800 dark:bg-gray-900 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transition-opacity duration-300 opacity-0 group-hover:opacity-100 transform scale-95 group-hover:scale-100" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition-colors duration-300" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition-colors duration-300" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
              <button class="dark-mode-toggle block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition duration-300" role="menuitem" tabindex="-1" id="user-menu-item-2">
                Toggle Dark Mode
              </button>
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 transition-colors duration-300" role="menuitem" tabindex="-1" id="user-menu-item-3">Sign out</a>
            </div>
          </div>
        </div>
      </div>
      <div class="-mr-2 flex md:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="relative inline-flex items-center justify-center rounded-md bg-gray-800 p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" aria-controls="mobile-menu" aria-expanded="false">
          <span class="absolute -inset-0.5"></span>
          <span class="sr-only">Open main menu</span>
          <!-- Menu open: "hidden", Menu closed: "block" -->
          <svg class="block h-6 w-6 menu-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
          </svg>
          <!-- Menu open: "block", Menu closed: "hidden" -->
          <svg class="hidden h-6 w-6 close-icon" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden hidden mobile-menu" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">Home</a>
      <div class="relative group">
        <button class="flex items-center w-full text-left text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">
          Projects
          <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.23 8.29a.75.75 0 010-1.06z" clip-rule="evenodd" />
          </svg>
        </button>
        <div class="pl-6 py-1 mobile-submenu hidden">
          <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Web Development</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">UI/UX Design</a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-800 hover:text-white transition-colors duration-300">Graphic Design</a>
        </div>
      </div>
      <a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">About</a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium transition-colors duration-300">Contact</a>
    </div>
    <div class="border-t border-gray-700 pb-3 pt-4">
      <div class="flex items-center px-5">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium leading-none text-white">John Doe</div>
          <div class="text-sm font-medium leading-none text-gray-400">[email protected]</div>
        </div>
        <button type="button" class="ml-auto flex-shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
          <span class="sr-only">View notifications</span>
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.04 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
          </svg>
        </button>
      </div>
      <div class="mt-3 space-y-1 px-2">
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white transition-colors duration-300">Your Profile</a>
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white transition-colors duration-300">Settings</a>
        <button class="dark-mode-toggle block w-full text-left rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 transition duration-300">
          Toggle Dark Mode
        </button>
        <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 dark:hover:bg-indigo-700 hover:text-white transition-colors duration-300">Sign out</a>
      </div>
    </div>
  </div>
</nav>

<script>
  // Dark mode toggle functionality
  const darkModeToggleButtons = document.querySelectorAll('.dark-mode-toggle');

  darkModeToggleButtons.forEach(button => {
    button.addEventListener('click', () => {
      document.documentElement.classList.toggle('dark');
      // Store user preference in local storage
      if (document.documentElement.classList.contains('dark')) {
        localStorage.theme = 'dark';
      } else {
        localStorage.theme = 'light';
      }
    });
  });

  // Check for stored theme preference on load
  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }

  // Mobile menu toggle functionality
  const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]');
  const mobileMenu = document.getElementById('mobile-menu');
  const menuIcon = mobileMenuButton.querySelector('.menu-icon');
  const closeIcon = mobileMenuButton.querySelector('.close-icon');

  mobileMenuButton.addEventListener('click', () => {
    const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true' || false;
    mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
    mobileMenu.classList.toggle('hidden');
    menuIcon.classList.toggle('hidden');
    closeIcon.classList.toggle('hidden');
  });

  // Mobile submenu toggle functionality (simple for demonstration)
  const mobileProjectsButton = document.querySelector('#mobile-menu .group button');
  const mobileSubmenu = document.querySelector('#mobile-menu .mobile-submenu');

  if (mobileProjectsButton) {
    mobileProjectsButton.addEventListener('click', () => {
      mobileSubmenu.classList.toggle('hidden');
    });
  }
</script>

Retro_E_commerce_Cards_Component

A responsive e-commerce product card component with a retro/vintage aesthetic, earth tones, and dark mode support, suitable for online shopping experiences. Features include product image, name, price, and a call-to-action button.

Open Preview

                <div class="font-sans bg-amber-50 dark:bg-stone-900 text-stone-800 dark:text-stone-200 py-12 px-4 transition-colors duration-300">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-4xl md:text-5xl font-extrabold text-center mb-12 text-stone-900 dark:text-stone-50 drop-shadow-md tracking-wider">
      Our Featured Retro Finds
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Product Card 1 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <div class="absolute top-0 left-0 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-br-lg shadow-md tracking-wider -rotate-3 transform origin-top-left group-hover:scale-110 transition-transform duration-200 z-10">
          SALE!
        </div>
        <img src="https://picsum.photos/400/300?random=1" alt="Vintage Record Player" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 filter grayscale group-hover:grayscale-0 transition-all duration-300">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Vinyl Player '86</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Authentic analogue sound, built to last.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-lg font-extrabold text-amber-700 dark:text-amber-300 line-through mr-2">$299.99</p>
            <p class="text-2xl font-extrabold text-green-700 dark:text-green-400">$199.99</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <img src="https://picsum.photos/400/300?random=2" alt="Retro Game Console" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 filter grayscale group-hover:grayscale-0 transition-all duration-300">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Pixel Console DX</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Relive 8-bit glory days, re-engineered.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$149.99</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <img src="https://picsum.photos/400/300?random=3" alt="Vintage Typewriter" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 filter grayscale group-hover:grayscale-0 transition-all duration-300">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Classic Typewriter B4</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">For the writer who loves the tactile feel.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$249.00</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <img src="https://picsum.photos/400/300?random=4" alt="Old School Camera" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 transition-all filter grayscale group-hover:grayscale-0 duration-300 ">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">SnapCam 1990</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Capture moments the classic way.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$119.50</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg shadow-md tracking-wider rotate-3 transform origin-top-right group-hover:scale-110 transition-transform duration-200 z-10">
          NEW!
        </div>
        <img src="https://picsum.photos/400/300?random=5" alt="Portable Cassette Player" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 transition-all filter grayscale group-hover:grayscale-0 duration-300 ">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Walkman Classic</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Your favorite tunes on the go.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$89.00</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <img src="https://picsum.photos/400/300?random=6" alt="Boombox" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 transition-all filter grayscale group-hover:grayscale-0 duration-300 ">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Street Blaster '92</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Bring the party wherever you go.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$175.00</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Skeuomorphic_Social_Buttons

A complex set of skeuomorphic buttons with a vibrant color scheme, designed for social media interfaces. Includes responsive layout and dark mode support, mimicking real-world buttons.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="flex flex-wrap gap-6 p-6 sm:p-8 md:p-10 bg-white dark:bg-gray-700 rounded-3xl shadow-xl border border-gray-200 dark:border-gray-600">

    <!-- Skeuomorphic Button 1: Like -->
    <button class="relative flex items-center justify-center p-4 min-w-[120px] sm:min-w-[150px] md:min-w-[180px] h-16 rounded-full 
                   bg-gradient-to-br from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-700 
                   shadow-lg dark:shadow-xl 
                   border-t border-r border-purple-300 dark:border-purple-600 
                   border-b border-l border-pink-700 dark:border-pink-900 
                   hover:scale-105 active:scale-95 transition-all duration-300 ease-in-out 
                   focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
      <div class="absolute inset-1 rounded-full bg-gradient-to-br from-purple-400 to-pink-400 dark:from-purple-600 dark:to-pink-600 
                  shadow-inner shadow-gray-400/50 dark:shadow-black/50 
                  flex items-center justify-center overflow-hidden">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white drop-shadow-md" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
        </svg>
        <span class="absolute text-xs sm:text-sm font-bold text-white text-shadow-sm bottom-1 sm:bottom-2">Like</span>
      </div>
    </button>

    <!-- Skeuomorphic Button 2: Share -->
    <button class="relative flex items-center justify-center p-4 min-w-[120px] sm:min-w-[150px] md:min-w-[180px] h-16 rounded-full 
                   bg-gradient-to-br from-blue-500 to-cyan-500 dark:from-blue-700 dark:to-cyan-700 
                   shadow-lg dark:shadow-xl 
                   border-t border-r border-blue-300 dark:border-blue-600 
                   border-b border-l border-cyan-700 dark:border-cyan-900 
                   hover:scale-105 active:scale-95 transition-all duration-300 ease-in-out 
                   focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600">
      <div class="absolute inset-1 rounded-full bg-gradient-to-br from-blue-400 to-cyan-400 dark:from-blue-600 dark:to-cyan-600 
                  shadow-inner shadow-gray-400/50 dark:shadow-black/50 
                  flex items-center justify-center overflow-hidden">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white drop-shadow-md" fill="currentColor" viewBox="0 0 24 24">
          <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.2.09-.4.09-.6s-.04-.4-.09-.6l7.14-4.11c.52.48 1.2.78 1.96.78 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .2.04.4.09.6L8.04 9.81c-.52-.48-1.2-.78-1.96-.78-1.66 0-3 1.34-3 3s1.34 3 3 3c.76 0 1.44-.3 1.96-.77l7.14 4.11c-.05.2-.09.4-.09.6 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/>
        </svg>
        <span class="absolute text-xs sm:text-sm font-bold text-white text-shadow-sm bottom-1 sm:bottom-2">Share</span>
      </div>
    </button>

    <!-- Skeuomorphic Button 3: Comment -->
    <button class="relative flex items-center justify-center p-4 min-w-[120px] sm:min-w-[150px] md:min-w-[180px] h-16 rounded-full 
                   bg-gradient-to-br from-green-500 to-yellow-500 dark:from-green-700 dark:to-yellow-700 
                   shadow-lg dark:shadow-xl 
                   border-t border-r border-green-300 dark:border-green-600 
                   border-b border-l border-yellow-700 dark:border-yellow-900 
                   hover:scale-105 active:scale-95 transition-all duration-300 ease-in-out 
                   focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-600">
      <div class="absolute inset-1 rounded-full bg-gradient-to-br from-green-400 to-yellow-400 dark:from-green-600 dark:to-yellow-600 
                  shadow-inner shadow-gray-400/50 dark:shadow-black/50 
                  flex items-center justify-center overflow-hidden">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white drop-shadow-md" fill="currentColor" viewBox="0 0 24 24">
          <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6V6h12v8z"/>
        </svg>
        <span class="absolute text-xs sm:text-sm font-bold text-white text-shadow-sm bottom-1 sm:bottom-2">Comment</span>
      </div>
    </button>

    <!-- Skeuomorphic Button 4: Send Message (Icon Only on small screens) -->
    <button class="relative flex items-center justify-center p-4 min-w-[120px] sm:min-w-[150px] md:min-w-[180px] h-16 rounded-full 
                   bg-gradient-to-br from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700 
                   shadow-lg dark:shadow-xl 
                   border-t border-r border-red-300 dark:border-red-600 
                   border-b border-l border-orange-700 dark:border-orange-900 
                   hover:scale-105 active:scale-95 transition-all duration-300 ease-in-out 
                   focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-600">
      <div class="absolute inset-1 rounded-full bg-gradient-to-br from-red-400 to-orange-400 dark:from-red-600 dark:to-orange-600 
                  shadow-inner shadow-gray-400/50 dark:shadow-black/50 
                  flex items-center justify-center overflow-hidden">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white drop-shadow-md" fill="currentColor" viewBox="0 0 24 24">
          <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
        </svg>
        <span class="hidden sm:inline-block absolute text-xs sm:text-sm font-bold text-white text-shadow-sm bottom-1 sm:bottom-2">Message</span>
      </div>
    </button>

  </div>
</div>

360_Viewer_Component

A simple, responsive 360° viewer component with microinteraction focus for business/corporate websites, featuring earth tones and dark mode support. Designed to simulate an interactive 360 viewer, allowing users to 'click and drag' to rotate an image.

Open Preview

                <div class="flex items-center justify-center p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-900 min-h-screen">
  <div class="w-full max-w-2xl bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] focus-within:ring-4 focus-within:ring-stone-400 dark:focus-within:ring-stone-600 outline-none">
    <div class="relative pb-56 sm:pb-64 md:pb-72 lg:pb-80 xl:pb-96 overflow-hidden transform group cursor-grab active:cursor-grabbing animated-hover">
      <!-- Background image to simulate 360 viewer area -->
      <img src="https://picsum.photos/1200/800?random=1" alt="Product view" class="absolute inset-0 w-full h-full object-cover transition-transform duration-300 group-hover:scale-105 group-active:scale-100 rounded-t-lg" aria-label="360 degree product view area">

      <!-- Interactive Overlay -->
      <div class="absolute inset-0 flex flex-col items-center justify-center bg-stone-900/10 dark:bg-stone-700/20 transition-all duration-300 group-hover:bg-stone-900/20 dark:group-hover:bg-stone-700/30 group-active:bg-stone-900/5 dark:group-active:bg-stone-700/5 rounded-t-lg">
        <svg class="w-16 h-16 sm:w-20 sm:h-20 text-white opacity-90 transition-all duration-300 transform group-hover:scale-110 group-hover:opacity-100 group-active:scale-95 group-active:opacity-80" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path clip-rule="evenodd" fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75S17.385 21.75 12 21.75 2.25 17.385 2.25 12zm1.605 8.682a.75.75 0 10-1.24-.967 11.25 11.25 0 01-1.61-4.463 11.25 11.25 0 01-1.612-4.463.75.75 0 10-1.24-.967c-1.325 1.76-2.553 3.614-3.66 5.549a1.75 1.75 0 000 1.902c1.107 1.935 2.335 3.789 3.66 5.549zM12 4.125a.75.75 0 00-.75.75V11.25c0 .414.336.75.75.75h4.875a.75.75 0 000-1.5H12V4.875a.75.75 0 00-.75-.75z"></path>
        </svg>
        <p class="mt-2 text-sm sm:text-base text-white font-semibold transform translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">Click and drag to rotate</p>
      </div>
    </div>

    <div class="p-4 sm:p-6 md:p-8 bg-white dark:bg-stone-800">
      <h2 class="text-xl sm:text-2xl md:text-3xl font-bold text-stone-800 dark:text-stone-100 mb-2 transition-colors duration-300">Premium Product Showcase</h2>
      <p class="text-sm sm:text-base text-stone-600 dark:text-stone-300 mb-4 leading-relaxed transition-colors duration-300">
        Experience every intricate detail of our craftsmanship. Use the interactive viewer above to explore the product from all angles.
      </p>
      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div class="flex items-center space-x-3">
          <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="Company representative" class="w-10 h-10 rounded-full object-cover shadow-md">
          <div>
            <p class="text-stone-700 dark:text-stone-200 font-medium text-sm sm:text-base">Acme Innovations Inc.</p>
            <p class="text-stone-500 dark:text-stone-400 text-xs sm:text-sm">Leading the future since 1999</p>
          </div>
        </div>
        <button class="flex items-center px-4 py-2 bg-stone-700 hover:bg-stone-800 dark:bg-stone-600 dark:hover:bg-stone-700 text-white rounded-md font-medium text-sm sm:text-base transition-all duration-300 transform active:scale-95 shadow-lg focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          <svg class="w-5 h-5 mr-2 -ml-1" 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 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
          </svg>
          View Product Video
        </button>
      </div>
    </div>
  </div>
</div>

<style>
/* Not strictly Tailwind but for the 'microinteraction' feel if JS was allowed */
/* This pseudo-class is for demonstration of where micro-interactions would be */
.animated-hover:hover {
  /* Example: add a subtle transform or shadow on hover. Tailwind handles this with utility classes. */
}

.group-active .group-hover\:opacity-100 {
    opacity: 0.8; /* Subtle change when active */
}

.group-active img {
    transform: scale(0.98); /* Simulating a 'push' effect on interaction */
}
</style>

1 ... 111 112 113 114 115 ... 335