Search Components

All Components

Browse all available Tailwind CSS components

Activity Feed Component

A complex, responsive activity feed component with neon/glow effects and vibrant colors, suitable for cryptocurrency/blockchain applications, featuring dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-950 text-gray-50 dark:bg-gray-950 dark:text-gray-50 p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-gradient-to-br from-violet-950 via-gray-900 to-indigo-950 rounded-3xl shadow-2xl p-6 sm:p-8 lg:p-10 border border-violet-800 dark:border-indigo-800 relative overflow-hidden">
    
    <!-- Background Glow Elements (decorative) -->
    <div class="absolute -top-16 -left-16 w-64 h-64 bg-violet-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob dark:bg-violet-700"></div>
    <div class="absolute -bottom-16 -right-16 w-64 h-64 bg-indigo-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000 dark:bg-indigo-700"></div>
    <div class="absolute top-1/4 left-1/4 w-48 h-48 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000 dark:bg-purple-600"></div>

    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-violet-400 to-indigo-400 dark:from-violet-300 dark:to-indigo-300 drop-shadow-lg [text-shadow:_0_0_10px_rgb(139_92_246/0.7),_0_0_20px_rgb(129_140_248/0.6)]">
      Activity Feed
    </h2>

    <div class="space-y-6 sm:space-y-8 max-h-[70vh] overflow-y-auto custom-scrollbar">

      <!-- Activity Item 1: Transaction -->
      <div class="flex items-start bg-gray-900/40 border border-violet-700/50 rounded-xl p-4 sm:p-5 glow-border relative overflow-hidden group">
        <div class="absolute inset-0 bg-violet-700 opacity-0 group-hover:opacity-10 transition-opacity duration-300 scale-y-0 group-hover:scale-y-100 origin-bottom rounded-xl"></div>
        <div class="relative flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center bg-gradient-to-br from-violet-500 to-fuchsia-600 shadow-lg border border-violet-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-7 sm:w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
        </div>
        <div class="ml-4 sm:ml-5 flex-grow relative z-10">
          <p class="text-sm sm:text-base font-semibold text-violet-300">Transaction Confirmed</p>
          <p class="text-lg sm:text-xl font-bold text-gray-50 mt-1">0.5 <span class="text-green-400">ETH</span> Received</p>
          <p class="text-xs sm:text-sm text-gray-400 mt-1">From: <span class="font-mono">0xAbc...123f</span></p>
          <p class="text-xs sm:text-sm text-purple-300 mt-2">2 minutes ago</p>
        </div>
      </div>

      <!-- Activity Item 2: NFT Mint -->
      <div class="flex items-start bg-gray-900/40 border border-indigo-700/50 rounded-xl p-4 sm:p-5 glow-border relative overflow-hidden group">
        <div class="absolute inset-0 bg-indigo-700 opacity-0 group-hover:opacity-10 transition-opacity duration-300 scale-y-0 group-hover:scale-y-100 origin-bottom rounded-xl"></div>
        <div class="relative flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center bg-gradient-to-br from-indigo-500 to-blue-600 shadow-lg border border-indigo-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-7 sm:w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m1.414 1.414L9 11M3 11v-1a2 2 0 012-2h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 001.414 0l3.414-3.414a1 1 0 01.707-.293H19a2 2 0 012 2v1m-6 0a6 6 1 11-12 0 6 6 0 0112 0z" />
          </svg>
        </div>
        <div class="ml-4 sm:ml-5 flex-grow relative z-10">
          <p class="text-sm sm:text-base font-semibold text-indigo-300">New NFT Minted</p>
          <a href="#" class="text-lg sm:text-xl font-bold text-teal-400 hover:text-teal-300 transition-colors duration-200 mt-1 block">"CryptoPunk #7890"</a>
          <p class="text-xs sm:text-sm text-gray-400 mt-1">Owner: <span class="font-mono">0xDef...456e</span></p>
          <img src="https://picsum.photos/id/1018/100/100" alt="NFT Preview" class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md mt-2 border border-gray-600 shadow-md" />
          <p class="text-xs sm:text-sm text-blue-300 mt-2">15 minutes ago</p>
        </div>
      </div>

      <!-- Activity Item 3: DeFi Staking -->
      <div class="flex items-start bg-gray-900/40 border border-purple-700/50 rounded-xl p-4 sm:p-5 glow-border relative overflow-hidden group">
        <div class="absolute inset-0 bg-purple-700 opacity-0 group-hover:opacity-10 transition-opacity duration-300 scale-y-0 group-hover:scale-y-100 origin-bottom rounded-xl"></div>
        <div class="relative flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center bg-gradient-to-br from-purple-500 to-pink-600 shadow-lg border border-purple-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-7 sm:w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M7 12l3-3 3 3 3-3M3 21h18M7 21v-7a1 1 0 011-1h8a1 1 0 011 1v7M7 21h4a1 1 0 001-1v-1a1 1 0 011-1h2a1 1 0 011 1v1a1 1 0 001 1h4M12 20a1 1 0 001-1h-2a1 1 0 001 1z" />
          </svg>
        </div>
        <div class="ml-4 sm:ml-5 flex-grow relative z-10">
          <p class="text-sm sm:text-base font-semibold text-purple-300">DeFi Staking Reward</p>
          <p class="text-lg sm:text-xl font-bold text-yellow-400 mt-1">+0.02 <span class="text-yellow-300">COMP</span> Earned</p>
          <p class="text-xs sm:text-sm text-gray-400 mt-1">Pool: <span class="font-bold">Compound ETH-USDC</span></p>
          <p class="text-xs sm:text-sm text-pink-300 mt-2">30 minutes ago</p>
        </div>
      </div>

      <!-- Activity Item 4: Governance Vote -->
      <div class="flex items-start bg-gray-900/40 border border-teal-700/50 rounded-xl p-4 sm:p-5 glow-border relative overflow-hidden group">
        <div class="absolute inset-0 bg-teal-700 opacity-0 group-hover:opacity-10 transition-opacity duration-300 scale-y-0 group-hover:scale-y-100 origin-bottom rounded-xl"></div>
        <div class="relative flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center bg-gradient-to-br from-teal-500 to-cyan-600 shadow-lg border border-teal-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-7 sm:w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 003 12c0 2.755 4.318 6.994 3.714 6.994s9.994-4.239 9.994-6.994a12.01 12.01 0 00-.382-3.04z" />
          </svg>
        </div>
        <div class="ml-4 sm:ml-5 flex-grow relative z-10">
          <p class="text-sm sm:text-base font-semibold text-teal-300">Governance Vote Cast</p>
          <p class="text-lg sm:text-xl font-bold text-gray-50 mt-1">Voted 'Yes' on <span class="text-cyan-400">Proposal #123</span></p>
          <p class="text-xs sm:text-sm text-gray-400 mt-1">DAO: <span class="font-bold">Uniswap Governance</span></p>
          <p class="text-xs sm:text-sm text-cyan-300 mt-2">1 hour ago</p>
        </div>
      </div>

      <!-- Activity Item 5: Wallet Connect -->
      <div class="flex items-start bg-gray-900/40 border border-orange-700/50 rounded-xl p-4 sm:p-5 glow-border relative overflow-hidden group">
        <div class="absolute inset-0 bg-orange-700 opacity-0 group-hover:opacity-10 transition-opacity duration-300 scale-y-0 group-hover:scale-y-100 origin-bottom rounded-xl"></div>
        <div class="relative flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center bg-gradient-to-br from-orange-500 to-red-600 shadow-lg border border-orange-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-7 sm:w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 11V7a4 4 0 118 0v4m-1.5 5H17a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2h4.5M11 20.5V21a1 1 0 001 1h2a1 1 0 001-1v-.5m-3 0a.5.5 0 011 0V21a.5.5 0 01-1 0v-.5z" />
          </svg>
        </div>
        <div class="ml-4 sm:ml-5 flex-grow relative z-10">
          <p class="text-sm sm:text-base font-semibold text-orange-300">Wallet Connected</p>
          <p class="text-lg sm:text-xl font-bold text-gray-50 mt-1">MetaMask DApp Connection</p>
          <p class="text-xs sm:text-sm text-gray-400 mt-1">User: <span class="font-mono">0x789...abcd</span></p>
          <p class="text-xs sm:text-sm text-red-300 mt-2">2 hours ago</p>
        </div>
      </div>

      <!-- Activity Item 6: Price Alert -->
      <div class="flex items-start bg-gray-900/40 border border-lime-700/50 rounded-xl p-4 sm:p-5 glow-border relative overflow-hidden group">
        <div class="absolute inset-0 bg-lime-700 opacity-0 group-hover:opacity-10 transition-opacity duration-300 scale-y-0 group-hover:scale-y-100 origin-bottom rounded-xl"></div>
        <div class="relative flex-shrink-0 w-12 h-12 sm:w-14 sm:h-14 rounded-full flex items-center justify-center bg-gradient-to-br from-lime-500 to-green-600 shadow-lg border border-lime-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-7 sm:w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 7l4-4m0 0l4 4m-4-4v18" />
          </svg>
        </div>
        <div class="ml-4 sm:ml-5 flex-grow relative z-10">
          <p class="text-sm sm:text-base font-semibold text-lime-300">Price Alert Triggered</p>
          <p class="text-lg sm:text-xl font-bold text-green-400 mt-1">BTC climbed past $30,000</p>
          <p class="text-xs sm:text-sm text-gray-400 mt-1">Current Price: <span class="font-bold">$30,123.45</span></p>
          <p class="text-xs sm:text-sm text-green-300 mt-2">3 hours ago</p>
        </div>
      </div>

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

<style>
  /* Custom Scrollbar for Webkit browsers */
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #1f013d; /* Dark violet/purple background */
    border-radius: 10px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #a78bfa; /* Light violet */
    border-radius: 10px;
    border: 2px solid #5b21b6; /* darker violet border */
    box-shadow: 0 0 8px #a78bfa; /* Glow effect */
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #c4b5fd; /* Lighter violet on hover */
    box-shadow: 0 0 12px #c4b5fd; /* Stronger glow on hover */
  }

  /* Animation for background glow blobs */
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }
  
  /* Glow effect for activity item borders */
  .glow-border {
    position: relative;
    border: 1px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, rgba(139, 92, 246, 0.5), rgba(129, 140, 248, 0.5)); /* Violet to Indigo */
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.2), inset 0 0 5px rgba(139, 92, 246, 0.1);
    transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out;
    background: linear-gradient(to bottom, rgba(31, 0, 61, 0.5), rgba(0, 0, 0, 0.4));
  }

  .group:hover .glow-border {
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.5), inset 0 0 10px rgba(139, 92, 246, 0.2), 0 0 30px rgba(129, 140, 248, 0.3); 
    transform: translateY(-2px); /* Slight lift on hover */
    border-image-source: linear-gradient(to right, rgba(139, 92, 246, 0.8), rgba(129, 140, 248, 0.8)); /* Stronger border glow */
  }

  /** Dark mode considerations for glow and backgrounds if ever needed to be different, but current design uses same dark gradient for main container */
  .dark .glow-border {
      /* Can be tweaked for a different dark mode glow if desired */
  }

</style>

IndustrialVibrantMapsComponent

A responsive and interactive map component with an industrial, raw aesthetic and vibrant color scheme, suitable for Technology/SaaS applications. Includes 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">

  <!-- Component Container -->
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border-t-4 border-fuchsia-600 dark:border-fuchsia-500">

    <!-- Header Section -->
    <div class="p-4 sm:p-6 bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600 flex flex-col sm:flex-row items-center justify-between">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-2 sm:mb-0">
        Industrial Site Overview
      </h2>
      <div class="flex space-x-2">
        <button class="px-4 py-2 bg-fuchsia-600 dark:bg-fuchsia-500 text-white rounded-md text-sm font-semibold hover:bg-fuchsia-700 dark:hover:bg-fuchsia-600 transition duration-300">
          <i class="fas fa-plus mr-1"></i> Add Location
        </button>
        <button class="px-4 py-2 bg-teal-500 dark:bg-teal-400 text-white rounded-md text-sm font-semibold hover:bg-teal-600 dark:hover:bg-teal-500 transition duration-300">
          <i class="fas fa-filter mr-1"></i> Filter
        </button>
      </div>
    </div>

    <!-- Main Content Area - Map and Sidebar -->
    <div class="flex flex-col lg:flex-row">

      <!-- Map Section (Placeholder for actual map) -->
      <div class="relative flex-1 h-80 sm:h-96 lg:h-[600px] bg-gray-300 dark:bg-gray-950 flex items-center justify-center overflow-hidden border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-700">
        <img src="https://picsum.photos/1000/700?random=1" alt="Industrial Map" class="absolute inset-0 w-full h-full object-cover opacity-80">
        <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-800/60 via-indigo-800/60 to-cyan-800/60 dark:from-fuchsia-900/70 dark:via-indigo-900/70 dark:to-cyan-900/70"></div>
        <div class="relative z-10 p-4 text-center">
          <p class="text-white text-3xl sm:text-4xl font-bold drop-shadow-lg">Map View Placeholder</p>
          <p class="text-white text-lg mt-2 opacity-90">Interactive map integration goes here.</p>
        </div>
        <!-- Map Controls Placeholder -->
        <div class="absolute bottom-4 right-4 z-20 flex flex-col space-y-2">
          <button class="p-3 bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"><i class="fas fa-plus"></i></button>
          <button class="p-3 bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"><i class="fas fa-minus"></i></button>
          <button class="p-3 bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"><i class="fas fa-location-arrow"></i></button>
        </div>

        <!-- Map Overlay Markers Placeholder -->
        <div class="hidden sm:block absolute top-1/3 left-1/4 -translate-x-1/2 -translate-y-1/2 bg-yellow-400 dark:bg-yellow-300 p-2 rounded-full shadow-lg text-xs font-bold text-gray-900 ring-4 ring-yellow-200 animate-pulse cursor-pointer hover:scale-110 transition"><i class="fas fa-warehouse mr-1"></i> Site A</div>
        <div class="absolute top-2/3 right-1/4 -translate-x-1/2 -translate-y-1/2 bg-red-500 dark:bg-red-400 p-2 rounded-full shadow-lg text-xs font-bold text-white ring-4 ring-red-200 animate-pulse cursor-pointer hover:scale-110 transition"><i class="fas fa-exclamation-triangle mr-1"></i> Incident X</div>
        <div class="hidden sm:block absolute bottom-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-green-500 dark:bg-green-400 p-2 rounded-full shadow-lg text-xs font-bold text-white ring-4 ring-green-200 cursor-pointer hover:scale-110 transition"><i class="fas fa-truck mr-1"></i> Depot B</div>
      </div>

      <!-- Sidebar / Details Section -->
      <div class="lg:w-96 p-4 sm:p-6 bg-gray-50 dark:bg-gray-800 border-t lg:border-t-0 lg:border-l border-gray-200 dark:border-gray-700 overflow-y-auto max-h-[500px] lg:max-h-[600px]">

        <!-- Search and Filter -->
        <div class="mb-6">
          <label for="search-location" class="sr-only">Search Locations</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <i class="fas fa-search text-gray-400 dark:text-gray-500"></i>
            </div>
            <input type="text" id="search-location" class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 dark:focus:ring-fuchsia-400 focus:border-transparent sm:text-sm" placeholder="Search locations...">
          </div>
        </div>

        <!-- Location List -->
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 border-b border-gray-200 dark:border-gray-600 pb-2">Active Sites</h3>

        <ul class="space-y-4">
          <!-- Location Item 1 -->
          <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-fuchsia-900/50 transition-all duration-300 border-l-4 border-yellow-500 dark:border-yellow-400 cursor-pointer">
            <div class="flex items-center justify-between mb-2">
              <h4 class="font-bold text-gray-900 dark:text-white text-base"><i class="fas fa-warehouse mr-2 text-yellow-500 dark:text-yellow-400"></i>Warehouse Alpha</h4>
              <span class="text-xs font-medium text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-800 px-2 py-1 rounded-full">Active</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">123 Industrial Rd, Metropolis, CA<br>Employees: 45 | Status: Operational</p>
            <div class="mt-3 flex justify-between items-center">
              <a href="#" class="text-fuchsia-600 dark:text-fuchsia-400 hover:underline text-sm">View Details</a>
              <span class="text-xs text-gray-500 dark:text-gray-400">Last Updated: 10m ago</span>
            </div>
          </li>

          <!-- Location Item 2 -->
          <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-fuchsia-900/50 transition-all duration-300 border-l-4 border-red-500 dark:border-red-400 cursor-pointer">
            <div class="flex items-center justify-between mb-2">
              <h4 class="font-bold text-gray-900 dark:text-white text-base"><i class="fas fa-flask mr-2 text-red-500 dark:text-red-400"></i>Chemical Plant Gamma</h4>
              <span class="text-xs font-medium text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-800 px-2 py-1 rounded-full">Alert</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">456 Toxic Ave, Gotham, NY<br>Employees: 60 | Status: Maintenance Required</p>
            <div class="mt-3 flex justify-between items-center">
              <a href="#" class="text-fuchsia-600 dark:text-fuchsia-400 hover:underline text-sm">View Details</a>
              <span class="text-xs text-gray-500 dark:text-gray-400">Last Updated: 2m ago</span>
            </div>
          </li>

          <!-- Location Item 3 -->
          <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-fuchsia-900/50 transition-all duration-300 border-l-4 border-blue-500 dark:border-blue-400 cursor-pointer">
            <div class="flex items-center justify-between mb-2">
              <h4 class="font-bold text-gray-900 dark:text-white text-base"><i class="fas fa-building mr-2 text-blue-500 dark:text-blue-400"></i>HQ Office Delta</h4>
              <span class="text-xs font-medium text-indigo-600 dark:text-indigo-400 bg-indigo-100 dark:bg-indigo-800 px-2 py-1 rounded-full">Online</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">789 Enterprise Blvd, Star City, CA<br>Employees: 120 | Status: Fully Staffed</p>
            <div class="mt-3 flex justify-between items-center">
              <a href="#" class="text-fuchsia-600 dark:text-fuchsia-400 hover:underline text-sm">View Details</a>
              <span class="text-xs text-gray-500 dark:text-gray-400">Last Updated: 30m ago</span>
            </div>
          </li>

          <!-- Location Item 4 -->
          <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-fuchsia-900/50 transition-all duration-300 border-l-4 border-green-500 dark:border-green-400 cursor-pointer">
            <div class="flex items-center justify-between mb-2">
              <h4 class="font-bold text-gray-900 dark:text-white text-base"><i class="fas fa-truck-moving mr-2 text-green-500 dark:text-green-400"></i>Logistics Hub Zeta</h4>
              <span class="text-xs font-medium text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-800 px-2 py-1 rounded-full">Active</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300">101 Transit Way, Central City, FL<br>Employees: 75 | Status: High Traffic</p>
            <div class="mt-3 flex justify-between items-center">
              <a href="#" class="text-fuchsia-600 dark:text-fuchsia-400 hover:underline text-sm">View Details</a>
              <span class="text-xs text-gray-500 dark:text-gray-400">Last Updated: 15m ago</span>
            </div>
          </li>
        </ul>
        <!-- End Location List -->
      </div>
      <!-- End Sidebar -->

    </div>
    <!-- End Main Content Area -->

  </div>
  <!-- End Component Container -->

</div>

<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Neon_Glow_Maps_Component

A simple, responsive map component with a neon/glow effect, designed for photography portfolios. Features cool neutral colors, dark mode support, and placeholder map image.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-gray-100 to-white dark:from-gray-950 dark:to-gray-900 overflow-hidden relative">
  <div class="max-w-7xl mx-auto rounded-xl shadow-2xl relative overflow-hidden ring-4 ring-offset-4 ring-offset-gray-100 dark:ring-offset-gray-950 ring-indigo-300 dark:ring-indigo-600 group">
    
    <!-- Glow Effect 1 -->
    <div class="absolute -top-1/4 -left-1/4 w-1/2 h-1/2 bg-blue-400 dark:bg-blue-600 rounded-full mix-blend-multiply filter blur-2xl opacity-10 animate-blob g:animate-blob-slow transform group-hover:scale-125 transition-transform duration-500"></div>
    <!-- Glow Effect 2 -->
    <div class="absolute -bottom-1/4 -right-1/4 w-1/2 h-1/2 bg-purple-400 dark:bg-purple-600 rounded-full mix-blend-multiply filter blur-2xl opacity-10 animate-blob animation-delay-2000 transform group-hover:scale-125 transition-transform duration-500"></div>

    <div class="relative z-10 p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-80 backdrop-filter backdrop-blur-sm rounded-xl border border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-center text-gray-900 dark:text-gray-100 mb-4 sm:mb-6 leading-tight tracking-wider">
        <span class="relative inline-block">
          Find Our Locations
          <span class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-blue-400 to-purple-400 dark:from-blue-600 dark:to-purple-600 rounded-full animate-pulse-light"></span>
        </span>
      </h2>

      <div class="aspect-w-16 aspect-h-9 w-full overflow-hidden rounded-lg shadow-lg relative group">
        <img src="https://picsum.photos/id/1043/1200/675" alt="Map of photography studio locations" class="object-cover w-full h-full rounded-lg transition-transform duration-500 group-hover:scale-105 filter group-hover:brightness-110">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-0 group-hover:opacity-60 transition-opacity duration-300 rounded-lg"></div>
        <div class="absolute bottom-4 left-4 right-4 text-white p-2 text-sm text-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
          <p class="font-semibold drop-shadow-lg">Explore our inspiring photoshoot locations around the globe.</p>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mt-6">
        <div class="p-4 sm:p-5 rounded-lg bg-gray-50 dark:bg-gray-850 border border-gray-200 dark:border-gray-700 shadow-md group-hover:scale-[1.02] transition-transform duration-300">
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2"><span class="neon-text-blue">Studio Alpha</span></p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">123 Artistry Lane, Creative City, CA 90210</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">(555) 123-4567</p>
        </div>
        <div class="p-4 sm:p-5 rounded-lg bg-gray-50 dark:bg-gray-850 border border-gray-200 dark:border-gray-700 shadow-md group-hover:scale-[1.02] transition-transform duration-300">
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2"><span class="neon-text-purple">Gallery Echo</span></p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">789 Visionary Blvd, Lens Landing, NY 10001</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">(555) 987-6543</p>
        </div>
      </div>

      <div class="flex justify-center mt-8">
        <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full text-white bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 focus:ring-blue-500 dark:focus:ring-purple-500 shadow-lg transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95 group relative overflow-hidden">
          <span class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <span class="relative z-10">Explore More Locations</span>
          <svg class="ml-2 -mr-1 w-5 h-5 relative z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>

    </div>
  </div>

  <!-- Custom CSS for glow and blob animations -->
  <style>
    @keyframes blob {
      0% { transform: translate(0px, 0px) scale(1); }
      33% { transform: translate(30px, -50px) scale(1.1); }
      66% { transform: translate(-20px, 20px) scale(0.9); }
      100% { transform: translate(0px, 0px) scale(1); }
    }
    .animate-blob { animation: blob 7s infinite; }
    .animate-blob-slow { animation: blob 12s infinite; }
    .animation-delay-2000 { animation-delay: 2000ms; }
    .dark .animate-pulse-light { animation: pulse-light-dark 2s infinite ease-in-out alternate; }
    .animate-pulse-light { animation: pulse-light 2s infinite ease-in-out alternate; }
    
    @keyframes pulse-light {
        0% { transform: scaleX(0); opacity: 0.2; }
        50% { transform: scaleX(1); opacity: 0.8; }
        100% { transform: scaleX(0); opacity: 0.2; }
    }
    @keyframes pulse-light-dark {
        0% { transform: scaleX(0); opacity: 0.3; }
        50% { transform: scaleX(1); opacity: 0.9; }
        100% { transform: scaleX(0); opacity: 0.3; }
    }
    .neon-text-blue {
      text-shadow: 0 0 5px #a7f3d0, 0 0 10px #67e8f9, 0 0 15px #38b2ac, 0 0 20px #06b6d4, 0 0 25px #0ea5e9;
      color: #7dd3fc;
    }
    .dark .neon-text-blue {
      text-shadow: 0 0 5px #7dd3fc, 0 0 10px #38b2ac, 0 0 15px #0ea5e9, 0 0 20px #06b6d4, 0 0 25px #3b82f6; /* Darker blue glow */
      color: #93c5fd;
    }
    .neon-text-purple {
      text-shadow: 0 0 5px #f0abfc, 0 0 10px #e879f9, 0 0 15px #d946ef, 0 0 20px #c026d3, 0 0 25px #a855f7;
      color: #e879f9;
    }
    .dark .neon-text-purple {
      text-shadow: 0 0 5px #a78bfa, 0 0 10px #c026d3, 0 0 15px #a855f7, 0 0 20px #9333ea, 0 0 25px #8b5cf6; /* Darker purple glow */
      color: #d8b4fe;
    }
  </style>
</div>

Neon_Glow_Feedback_Component

A feedback component designed for consulting/services with a neon/glow aesthetic using an analogous color scheme. Features include glowing buttons, subtle background gradients, and dark mode support.

Open Preview

                <section class="min-h-screen bg-gradient-to-br from-purple-50 via-indigo-50 to-blue-50 py-16 dark:from-gray-900 dark:via-purple-950 dark:to-blue-950">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl mx-auto bg-white/70 backdrop-blur-sm rounded-3xl shadow-xl dark:bg-gray-800/70 p-8 md:p-12 border border-purple-200 dark:border-purple-700 relative overflow-hidden">
      <!-- Glow Effect 1 -->
      <div class="absolute -top-10 -left-10 w-40 h-40 bg-purple-400 opacity-30 rounded-full blur-xl animate-pulse-slow dark:bg-purple-600"></div>
      <!-- Glow Effect 2 -->
      <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-blue-300 opacity-30 rounded-full blur-xl animate-pulse-slow dark:bg-blue-600"></div>

      <h2 class="text-4xl md:text-5xl font-extrabold text-center mb-6 text-purple-900 dark:text-purple-300 relative z-10 select-none drop-shadow-md">
        What Our Clients Say
        <span class="block w-24 h-1 bg-gradient-to-r from-purple-500 to-blue-500 mx-auto mt-3 rounded-full opacity-70 animate-glow-line"></span>
      </h2>
      <p class="text-center text-lg text-gray-700 dark:text-gray-300 mb-12 relative z-10">
        Hear directly from those who have experienced our exceptional consulting services.
      </p>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
        <!-- Feedback Card 1 -->
        <div class="group bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out p-6 dark:bg-gray-900 border border-transparent hover:border-purple-400 dark:hover:border-purple-600 relative overflow-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-200/30 to-blue-200/30 dark:from-purple-800/30 dark:to-blue-800/30 transform scale-0 group-hover:scale-100 transition-transform duration-500 ease-out rounded-xl opacity-0 group-hover:opacity-100"></div>
          <div class="relative z-10">
            <div class="flex items-center mb-4">
              <img class="w-16 h-16 rounded-full border-4 border-purple-400 dark:border-purple-600 object-cover mr-4 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client Avatar">
              <div>
                <p class="text-xl font-bold text-gray-900 dark:text-white">Michael Chen</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">CEO, Tech Solutions Inc.</p>
              </div>
            </div>
            <p class="text-gray-800 dark:text-gray-200 leading-relaxed mb-6">
              "Our partnership with [Your Company Name] revolutionized our strategy. Their insights were precise, actionable, and led to significant growth. Truly exceptional consulting!"
            </p>
            <div class="flex justify-end">
              <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium flex items-center">
                Read Full Story
                <svg class="ml-1 w-4 h-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="M9 5l7 7-7 7"></path></svg>
              </a>
            </div>
          </div>
        </div>

        <!-- Feedback Card 2 -->
        <div class="group bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out p-6 dark:bg-gray-900 border border-transparent hover:border-blue-400 dark:hover:border-blue-600 relative overflow-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-200/30 to-purple-200/30 dark:from-blue-800/30 dark:to-purple-800/30 transform scale-0 group-hover:scale-100 transition-transform duration-500 ease-out rounded-xl opacity-0 group-hover:opacity-100"></div>
          <div class="relative z-10">
            <div class="flex items-center mb-4">
              <img class="w-16 h-16 rounded-full border-4 border-blue-400 dark:border-blue-600 object-cover mr-4 shadow-md" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Client Avatar">
              <div>
                <p class="text-xl font-bold text-gray-900 dark:text-white">Sarah Jenkins</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Marketing Director, Creative Hub</p>
              </div>
            </div>
            <p class="text-gray-800 dark:text-gray-200 leading-relaxed mb-6">
              "The team at [Your Company Name] provided clarity and strategic direction exactly when we needed it. Their expertise is unmatched, and they genuinely care about client success."
            </p>
            <div class="flex justify-end">
              <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium flex items-center">
                Read Full Story
                <svg class="ml-1 w-4 h-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="M9 5l7 7-7 7"></path></svg>
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-16 text-center relative z-10">
        <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-full group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800 shadow-lg shadow-purple-500/50 dark:shadow-purple-800/80 transform hover:scale-105 transition-transform duration-300 ease-out">
          <span class="relative px-8 py-3 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-full group-hover:bg-opacity-0">
            Explore More Testimonials
          </span>
        </button>
      </div>
    </div>
  </div>
  <style>
    @keyframes pulse-slow {
      0%, 100% { transform: scale(1); opacity: 0.3; }
      50% { transform: scale(1.1); opacity: 0.45; }
    }
    .animate-pulse-slow {
      animation: pulse-slow 6s infinite ease-in-out;
    }
    @keyframes glow-line {
      0%, 100% { transform: scaleX(0); opacity: 0.7; }
      50% { transform: scaleX(1); opacity: 1; }
    }
    .animate-glow-line {
      animation: glow-line 3s infinite alternate ease-in-out;
    }
  </style>
</section>

Audio Player Component

A simple, responsive audio player component with a watercolor/artistic design style, warm neutral color scheme, and full dark mode support, suitable for consulting or service-based websites.

Open Preview

                <div class="p-4 md:p-8 lg:p-12 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-stone-800 dark:to-stone-900 font-sans antialiased min-h-screen flex items-center justify-center">
  <div class="w-full max-w-sm mx-auto rounded-3xl shadow-xl overflow-hidden
              bg-gradient-to-br from-white via-stone-50 to-stone-100 
              dark:from-stone-700 dark:via-stone-750 dark:to-stone-800
              transform transition-all duration-300 hover:scale-[1.01]
              border border-stone-200 dark:border-stone-600">
    <div class="p-6 space-y-4 relative overflow-hidden">
      <div class="absolute inset-0 bg-no-repeat bg-center opacity-30 dark:opacity-10" 
           style="background-image: url('https://picsum.photos/seed/watercolor/600/400?blur=5&grayscale'); background-size: cover; filter: saturate(0.5);">
      </div>
      
      <div class="relative z-10 flex flex-col items-center">
        <div class="w-24 h-24 rounded-full overflow-hidden shadow-md border-4 border-stone-100 dark:border-stone-600">
          <img src="https://picsum.photos/seed/consulting/150/150" alt="Podcast Thumbnail" class="w-full h-full object-cover grayscale opacity-90">
        </div>
        <h3 class="mt-4 text-xl font-semibold text-stone-800 dark:text-stone-100 text-center">
          Understanding Client Needs
        </h3>
        <p class="text-sm text-stone-600 dark:text-stone-300 text-center">
          Episode 01: The Consulting Journey
        </p>
      </div>

      <div class="relative z-10 space-y-4">
        <div class="w-full h-2 bg-stone-200 dark:bg-stone-600 rounded-full overflow-hidden relative">
          <div class="absolute top-0 left-0 h-full bg-orange-300 dark:bg-orange-500 rounded-full" style="width: 40%;"></div>
          <div class="absolute top-1/2 left-[40%] -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-orange-500 dark:bg-orange-400 rounded-full shadow-lg"></div>
        </div>
        <div class="flex justify-between text-xs text-stone-500 dark:text-stone-400">
          <span>0:45</span>
          <span>2:30</span>
        </div>
      </div>

      <div class="relative z-10 flex justify-center items-center gap-6">
        <button class="p-2 text-stone-600 dark:text-stone-300 rounded-full hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12v1a8 8 0 0015.356 2m-.001-2H12m13 0l-5 5-5-5" />
          </svg>
        </button>
        <button class="p-3 bg-orange-400 dark:bg-orange-600 text-white rounded-full shadow-lg 
                       hover:bg-orange-500 dark:hover:bg-orange-500 transition-colors 
                       focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="p-2 text-stone-600 dark:text-stone-300 rounded-full hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12v1a8 8 0 0015.356 2m-.001-2H12m13 0l-5 5-5-5" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Skeuomorphic Pastel Toast Notifications

A complex, skeuomorphic, and pastel-themed toast notification component for entertainment/media platforms, featuring multiple notification types with dark mode support and responsive design.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 min-h-screen flex items-start justify-center dark:from-gray-900 dark:via-gray-800 dark:to-gray-950 font-sans">
  <div class="w-full max-w-md space-y-4 sm:space-y-6">

    <!-- Success Notification -->
    <div class="relative flex items-center p-4 pr-12 rounded-2xl bg-gradient-to-br from-green-200 to-green-300 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-green-700 dark:to-green-800 dark:shadow-[0_4px_15px_rgba(0,255,0,0.3)] dark:border dark:border-green-600 border border-green-300">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-green-500 flex items-center justify-center shadow-inner-lg shadow-green-700/50 dark:bg-green-600 dark:shadow-green-900/50">
        <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
      </div>
      <div class="ml-4 flex-1">
        <p class="text-lg font-bold text-green-800 dark:text-green-200 drop-shadow-sm">Download Complete</p>
        <p class="text-sm text-green-700 dark:text-green-300">Your movie 'The Abyss' is ready to watch!</p>
        <div class="mt-2 text-xs text-green-600 dark:text-green-400">Just now</div>
        <div class="absolute bottom-2 right-2 text-xs text-green-600/70 dark:text-green-400/70 font-mono">ID: #2023-A001</div>
      </div>
      <button aria-label="Close success notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-green-400/70 hover:bg-green-500/80 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-green-600/70 dark:hover:bg-green-700/80">
        <svg class="w-5 h-5 text-green-800 dark:text-green-200" 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>

    <!-- Warning Notification -->
    <div class="relative flex items-center p-4 pr-12 rounded-2xl bg-gradient-to-br from-yellow-200 to-yellow-300 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-yellow-700 dark:to-yellow-800 dark:shadow-[0_4px_15px_rgba(255,255,0,0.3)] dark:border dark:border-yellow-600 border border-yellow-300">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-yellow-500 flex items-center justify-center shadow-inner-lg shadow-yellow-700/50 dark:bg-yellow-600 dark:shadow-yellow-900/50">
        <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
        </svg>
      </div>
      <div class="ml-4 flex-1">
        <p class="text-lg font-bold text-yellow-800 dark:text-yellow-200 drop-shadow-sm">Parental Advisory</p>
        <p class="text-sm text-yellow-700 dark:text-yellow-300">Content not suitable for all ages. Viewer discretion advised.</p>
        <div class="mt-2 text-xs text-yellow-600 dark:text-yellow-400">1 minute ago</div>
        <div class="absolute bottom-2 right-2 text-xs text-yellow-600/70 dark:text-yellow-400/70 font-mono">ID: #2023-B002</div>
      </div>
      <button aria-label="Close warning notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-yellow-400/70 hover:bg-yellow-500/80 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-yellow-600/70 dark:hover:bg-yellow-700/80">
        <svg class="w-5 h-5 text-yellow-800 dark:text-yellow-200" 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>

    <!-- Error Notification -->
    <div class="relative flex items-center p-4 pr-12 rounded-2xl bg-gradient-to-br from-red-200 to-red-300 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-red-700 dark:to-red-800 dark:shadow-[0_4px_15px_rgba(255,0,0,0.3)] dark:border dark:border-red-600 border border-red-300">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-red-500 flex items-center justify-center shadow-inner-lg shadow-red-700/50 dark:bg-red-600 dark:shadow-red-900/50">
        <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
      </div>
      <div class="ml-4 flex-1">
        <p class="text-lg font-bold text-red-800 dark:text-red-200 drop-shadow-sm">Playback Error</p>
        <p class="text-sm text-red-700 dark:text-red-300">Cannot play 'Episode 3': License expired (Error 403).</p>
        <div class="mt-2 text-xs text-red-600 dark:text-red-400">5 minutes ago</div>
        <div class="absolute bottom-2 right-2 text-xs text-red-600/70 dark:text-red-400/70 font-mono">ID: #2023-C003</div>
      </div>
      <button aria-label="Close error notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-red-400/70 hover:bg-red-500/80 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-red-600/70 dark:hover:bg-red-700/80">
        <svg class="w-5 h-5 text-red-800 dark:text-red-200" 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>

    <!-- Info Notification with Avatar/Image -->
    <div class="relative flex items-center p-4 pr-12 rounded-2xl bg-gradient-to-br from-blue-200 to-blue-300 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-blue-700 dark:to-blue-800 dark:shadow-[0_4px_15px_rgba(0,0,255,0.3)] dark:border dark:border-blue-600 border border-blue-300">
      <div class="flex-shrink-0 w-12 h-12 rounded-full overflow-hidden bg-blue-500 flex items-center justify-center shadow-inner-lg shadow-blue-700/50 dark:bg-blue-600 dark:shadow-blue-900/50">
        <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="User Avatar" class="object-cover w-full h-full border-2 border-blue-400 dark:border-blue-500"/>
      </div>
      <div class="ml-4 flex-1">
        <p class="text-lg font-bold text-blue-800 dark:text-blue-200 drop-shadow-sm">New Follower!</p>
        <p class="text-sm text-blue-700 dark:text-blue-300">John Doe just followed your 'Gaming Stream' channel.</p>
        <div class="mt-2 text-xs text-blue-600 dark:text-blue-400">15 minutes ago</div>
        <div class="absolute bottom-2 right-2 text-xs text-blue-600/70 dark:text-blue-400/70 font-mono">ID: #2023-D004</div>
      </div>
      <button aria-label="Close information notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-blue-400/70 hover:bg-blue-500/80 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-blue-600/70 dark:hover:bg-blue-700/80">
        <svg class="w-5 h-5 text-blue-800 dark:text-blue-200" 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>

    <!-- Custom Action/Engagement Notification -->
    <div class="relative flex flex-col sm:flex-row items-start sm:items-center p-4 rounded-2xl bg-gradient-to-br from-purple-200 to-pink-200 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-purple-700 dark:to-pink-700 dark:shadow-[0_4px_15px_rgba(200,0,200,0.3)] dark:border dark:border-purple-600 border border-purple-300">
      <div class="flex-shrink-0 w-12 h-12 rounded-full overflow-hidden bg-white flex items-center justify-center shadow-inner-lg shadow-purple-700/50 dark:bg-purple-900 dark:shadow-purple-900/50">
        <img src="https://picsum.photos/id/104/50/50" alt="Content thumbnail" class="object-cover w-full h-full border-2 border-purple-400 dark:border-purple-500"/>
      </div>
      <div class="mt-4 sm:mt-0 sm:ml-4 flex-1">
        <p class="text-lg font-bold text-purple-800 dark:text-purple-200 drop-shadow-sm">New Release!</p>
        <p class="text-sm text-purple-700 dark:text-purple-300">'The Future's Calling' S02E01 is now available to stream.</p>
        <div class="mt-3 flex flex-col sm:flex-row sm:space-x-3 space-y-2 sm:space-y-0 text-right">
          <button class="flex-1 px-4 py-2 rounded-xl bg-purple-400 hover:bg-purple-500 text-white font-semibold shadow-md transition-all duration-200 active:scale-95 dark:bg-purple-600 dark:hover:bg-purple-700 dark:shadow-[0_2px_8px_rgba(150,0,150,0.5)]">
            Watch Now
          </button>
          <button class="flex-1 px-4 py-2 rounded-xl bg-pink-300 hover:bg-pink-400 text-pink-800 font-semibold shadow-md transition-all duration-200 active:scale-95 dark:bg-pink-600 dark:hover:bg-pink-700 dark:text-pink-100 dark:shadow-[0_2px_8px_rgba(200,0,150,0.5)]">
            Add to Watchlist
          </button>
        </div>
      </div>
      <button aria-label="Close new release notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-opacity-70 bg-purple-300 hover:bg-purple-400 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-purple-600/70 dark:hover:bg-purple-700/80">
        <svg class="w-5 h-5 text-purple-800 dark:text-purple-200" 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>

  </div>
</div>

<style>
  /* Adding a subtle inset shadow for skeuomorphism */
  .shadow-inner-lg {
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.2), inset 0px -2px 5px rgba(255, 255, 255, 0.5);
  }

  .dark .shadow-inner-lg {
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.7), inset 0px -2px 5px rgba(25, 25, 25, 0.2);
  }

  /* Drop shadow for text for better blending with skeuomorphic elements */
  .drop-shadow-sm {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  }

  .dark .drop-shadow-sm {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  }
</style>

Gaming_Material_Form

A responsive gaming-themed form inspired by Material Design principles, featuring triadic colors, depth effects, and dark mode support. Suitable for login, registration, or game settings.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-800 via-pink-600 to-orange-400 dark:from-gray-900 dark:via-purple-900 dark:to-teal-900 p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans">

  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden
              p-6 sm:p-8 lg:p-10 border-t-4 border-purple-600 dark:border-pink-500 transform hover:scale-105">

    <div class="text-center mb-8">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-2 tracking-tight drop-shadow-md">
        <span class="text-purple-700 dark:text-pink-500">Gamer</span> Login
      </h2>
      <p class="text-gray-600 dark:text-gray-400 text-md sm:text-lg">Enter the Arena!</p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Username</label>
        <div class="relative">
          <input type="text" id="username" name="username" placeholder="PlayerOne" required
                 class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 block
                       dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 placeholder-gray-500 text-gray-900
                       transition duration-200 ease-in-out transform hover:scale-[1.01] focus:ring-2 focus:outline-none">
          <svg class="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 100 4v2a2 2 0 10-4 0v-2a2 2 0 100-4h-3a2 2 0 100 4v2a2 2 0 10-4 0v-2a2 2 0 100-4H7a2 2 0 100 4v2a2 2 0 10-4 0v-2a2 2 0 100-4h-3" />
          </svg>
        </div>
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
        <div class="relative">
          <input type="password" id="password" name="password" placeholder="********" required
                 class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-pink-500 focus:border-pink-500 block
                       dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 placeholder-gray-500 text-gray-900
                       transition duration-200 ease-in-out transform hover:scale-[1.01] focus:ring-2 focus:outline-none">
         <svg class="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2v5a2 2 0 01-2 2H9a2 2 0 01-2-2V9a2 2 0 012-2h6z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14H4a2 2 0 01-2-2V8a2 2 0 012-2h4" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 10h4a2 2 0 012 2v4a2 2 0 01-2 2h-4" />
          </svg>
        </div>
      </div>

      <div class="flex items-center justify-between text-sm">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox"
                 class="h-4 w-4 text-purple-600 dark:text-orange-400 focus:ring-purple-500 dark:focus:ring-orange-400 border-gray-300 rounded">
          <label for="remember-me" class="ml-2 block text-gray-700 dark:text-gray-300">
            Remember Me
          </label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-orange-400 dark:hover:text-amber-300 transition-colors duration-200">
            Forgot Password?
          </a>
        </div>
      </div>

      <div>
        <button type="submit"
                class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-lg text-lg sm:text-xl font-bold text-white
                       bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600
                       dark:from-pink-500 dark:to-orange-400 dark:hover:from-pink-600 dark:hover:to-orange-500
                       focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-orange-400
                       transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 active:scale-95
                       animate-pulse-on-hover">
          Level Up!
        </button>
      </div>
    </form>

    <div class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
      Don't have an account? 
      <a href="#" class="font-medium text-orange-500 hover:text-orange-400 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200">
        Sign Up for Adventure!
      </a>
    </div>

  </div>
</div>

Comments Section Component

A simple, clean, and minimalist comments section component with a retro/vintage color palette, designed for documentation or wiki sites. It is fully responsive and supports dark mode.

Open Preview

                <section class="font-sans antialiased bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 py-6 sm:py-8 lg:py-12">
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-2xl sm:text-3xl font-light tracking-tight mb-6 sm:mb-8 text-gray-700 dark:text-gray-100">
      Comments
    </h2>

    <div class="bg-white rounded-md p-4 sm:p-6 shadow-sm dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
      <!-- Comment Input/Add Section -->
      <div class="mb-6">
        <form>
          <textarea class="w-full p-3 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-stone-500 focus:border-stone-500 bg-gray-50 text-gray-800 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-300" rows="3" placeholder="Add a comment..."></textarea>
          <div class="flex justify-end mt-3">
            <button type="submit" class="px-4 py-2 text-sm font-medium rounded-md bg-zinc-600 text-white hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-600 dark:focus:ring-zinc-400">
              Post Comment
            </button>
          </div>
        </form>
      </div>

      <!-- Existing Comments Section -->
      <div class="space-y-4 sm:space-y-5">
        <!-- Comment 1 -->
        <div class="flex items-start">
          <img class="w-9 h-9 sm:w-10 sm:h-10 rounded-full mr-3 sm:mr-4 object-cover border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar of Sarah"> 
          <div>
            <p class="text-sm font-medium text-gray-700 dark:text-gray-200">Sarah J.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">2 days ago</p>
            <p class="text-sm text-gray-800 dark:text-gray-200 leading-relaxed">
              This documentation is very clear and concise. Thanks for the effort!
            </p>
          </div>
        </div>

        <!-- Comment 2 -->
        <div class="flex items-start">
          <img class="w-9 h-9 sm:w-10 sm:h-10 rounded-full mr-3 sm:mr-4 object-cover border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John"> 
          <div>
            <p class="text-sm font-medium text-gray-700 dark:text-gray-200">John D.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">1 day ago</p>
            <p class="text-sm text-gray-800 dark:text-gray-200 leading-relaxed">
              I found a small typo on line 42, but overall, excellent work!
            </p>
          </div>
        </div>

        <!-- Comment 3 (Newer) -->
        <div class="flex items-start">
          <img class="w-9 h-9 sm:w-10 sm:h-10 rounded-full mr-3 sm:mr-4 object-cover border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar of Emily"> 
          <div>
            <p class="text-sm font-medium text-gray-700 dark:text-gray-200">Emily R.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">5 hours ago</p>
            <p class="text-sm text-gray-800 dark:text-gray-200 leading-relaxed">
              Could you add an example for the `parse()` function? That would be very helpful.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Bauhaus_Music_Breadcrumb

A simple Bauhaus-inspired breadcrumb navigation component for music/audio platforms, featuring corporate blue tones and full responsiveness with dark mode support.

Open Preview

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
    <li class="inline-flex items-center">
      <a href="#"
        class="inline-flex items-center text-sm font-medium text-blue-800 hover:text-blue-950 dark:text-blue-300 dark:hover:text-white px-2 py-1 rounded-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-blue-300 dark:hover:border-blue-700"
        aria-current="page">
        <svg class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path
            d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
        </svg>
        Home
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-blue-600 mx-1 dark:text-blue-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
          fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
        </svg>
        <a href="#"
          class="ms-1 text-sm font-medium text-blue-800 hover:text-blue-950 dark:text-blue-300 dark:hover:text-white px-2 py-1 rounded-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-blue-300 dark:hover:border-blue-700 md:ms-2">Artists</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-blue-600 mx-1 dark:text-blue-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
          fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
        </svg>
        <span class="ms-1 text-sm font-semibold text-blue-900 dark:text-white px-2 py-1 rounded-sm md:ms-2">The Electroniks</span>
      </div>
    </li>
  </ol>
</nav>

Luxury_Premium_Crypto_Stat_Card

A simple, elegant crypto/blockchain statistic card with jewel tones, responsive design, and dark mode support, suitable for luxury and premium applications.

Open Preview

                <div class="p-4 sm:p-6 bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-slate-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-xs w-full bg-white dark:bg-gray-800 shadow-xl rounded-xl overflow-hidden transform transition duration-300 hover:scale-105 border-b-4 border-emerald-600 dark:border-emerald-500">
    <div class="p-6 sm:p-8 space-y-4">
      <div class="flex items-center justify-between">
        <h3 class="text-lg sm:text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100">Current BTC Price</h3>
        <svg class="w-6 h-6 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.593 1M12 8V4m0 4a8 8 0 100 16m0-16v4"></path>
        </svg>
      </div>
      <p class="text-3xl sm:text-4xl font-extrabold text-emerald-700 dark:text-emerald-300 tracking-tight leading-tight">$45,678.90</p>
      <div class="flex items-center justify-between text-sm sm:text-base">
        <span class="text-gray-600 dark:text-gray-400">24h Change:</span>
        <span class="flex items-center text-red-500 dark:text-red-400 font-semibold">
          <svg class="w-4 h-4 mr-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="M13 17l-5-5m0 0l5-5m-5 5h12"></path>
          </svg>
          -1.23%
        </span>
      </div>
      <div class="border-t border-gray-200 dark:border-gray-700 pt-4 flex justify-between items-center text-xs sm:text-sm text-gray-500 dark:text-gray-400">
        <span>Last updated:</span>
        <span>Just now</span>
      </div>
    </div>
  </div>
</div>

1 ... 67 68 69 70 71 ... 335

Search Components

Categories

All Components