Search Components

All Components

Browse all available Tailwind CSS components

Skeuomorphic_Monochromatic_File_Viewer

A complex skeuomorphic file viewer component for a marketplace, designed with a monochromatic color scheme. It includes a file list, a preview pane, action buttons, and a detailed information section, all while being fully responsive and supporting dark mode.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-blue-100 dark:bg-gray-900 min-h-screen font-sans antialiased flex items-center justify-center">
  <div class="flex flex-col lg:flex-row w-full max-w-7xl mx-auto border-4 border-blue-300 dark:border-gray-700 rounded-3xl shadow-xl overflow-hidden
    bg-gradient-to-br from-blue-200 to-blue-300 dark:from-gray-800 dark:to-gray-900 p-2 sm:p-4 lg:p-6
    transition-all duration-300 ease-in-out transform hover:scale-[1.005]">

    <!-- Left Pane: File List / Navigation -->
    <div class="lg:w-1/3 xl:w-1/4 bg-blue-100 dark:bg-gray-850 p-4 rounded-xl mb-4 lg:mb-0 lg:mr-4
      shadow-inner-sm border border-blue-200 dark:border-gray-700
      flex flex-col">
      <div class="text-lg font-bold text-blue-800 dark:text-blue-200 mb-4 pb-2 border-b border-blue-300 dark:border-gray-700
        shadow-text-light dark:shadow-text-dark text-center tracking-wide">File Browser</div>

      <div class="mb-4 relative">
        <input type="text" placeholder="Search files..." class="w-full p-3 rounded-full bg-blue-50 dark:bg-gray-800 text-blue-800 dark:text-blue-200
          placeholder-blue-400 dark:placeholder-gray-500 border border-blue-200 dark:border-gray-700
          shadow-inset-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 pl-10">
        <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-500 dark:text-gray-500" fill="currentColor" viewBox="0 0 24 24" width="20" height="20">
          <path d="M10 18a8 8 0 100-16 8 8 0 000 16zM21.707 20.293L17 15.586A8 8 0 0018 10c0-1.89-.5-3.66-1.37-5.18L17.707 4.293a1 1 0 01-1.414 1.414L15 6.414A9.957 9.957 0 0110 0c-5.523 0-10 4.477-10 10s4.477 10 10 10c1.88 0 3.65-.52 5.17-1.38l-.707.707a.999.999 0 010 1.414.999.999 0 01-1.414 0l-5.707-5.707A9.957 9.957 0 010 10C0 4.477 4.477 0 10 0s10 4.477 10 10c0 1.9-.53 3.67-1.42 5.19l5.707 5.707a.999.999 0 010 1.414.999 0 01-1.414 0z" />
        </svg>
      </div>

      <ul class="space-y-2 overflow-y-auto flex-grow pr-2 scrollbar-thumb-blue-400 scrollbar-track-blue-100 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-800 scrollbar-thin">
        <!-- File List Item -->
        <li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
          bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
          hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
          shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
          <div class="flex items-center">
            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
              <path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7zM6 4h6v5a1 1 0 01-1 1H6V4zm14 16H6V4h5v6h6v10z" />
            </svg>
            <span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Product_Catalogue_Q3.pdf</span>
          </div>
          <small class="text-blue-500 dark:text-gray-400 text-xs">1.2 MB</small>
        </li>
        <li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
          bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
          hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
          shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
          <div class="flex items-center">
            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5l-3.5-3.5L7 11l3 3 6-6 1.5 1.5z" />
            </svg>
            <span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Market_Research_Report.docx</span>
          </div>
          <small class="text-blue-500 dark:text-gray-400 text-xs">890 KB</small>
        </li>
        <li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
          bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
          hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
          shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
          <div class="flex items-center">
            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM12 9c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 10.9V22c-5.52-.55-9.98-4.84-10-10H2.05c.02 4.41 3.51 7.9 7.95 7.9zm0-18.9V2c5.52.55 9.98 4.84 10 10h1.95c-.02-4.41-3.51-7.9-7.95-7.9zM12 4.1L2.05 4.1A9.957 9.957 0 0110 0c5.52 0 10 4.48 10 10s-4.48 10-10 10-10-4.48-10-10h1.95A7.95 7.95 0 0012 4.1zm0 15.8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z" />
            </svg>
            <span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Contract_Draft_V2.docx</span>
          </div>
          <small class="text-blue-500 dark:text-gray-400 text-xs">2.1 MB</small>
        </li>
         <li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
          bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
          hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
          shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
          <div class="flex items-center">
            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5l-3.5-3.5L7 11l3 3 6-6 1.5 1.5z" />
            </svg>
            <span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Quarterly_Sales_2023.xlsx</span>
          </div>
          <small class="text-blue-500 dark:text-gray-400 text-xs">1.5 MB</small>
        </li>
        <li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
          bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
          hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
          shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
          <div class="flex items-center">
            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
              <path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7zM6 4h6v5a1 1 0 01-1 1H6V4zm14 16H6V4h5v6h6v10z" />
            </svg>
            <span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Marketing_Plan_2024.pptx</span>
          </div>
          <small class="text-blue-500 dark:text-gray-400 text-xs">4.8 MB</small>
        </li>
        <li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
          bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
          hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
          shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
          <div class="flex items-center">
            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
              <path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7zM6 4h6v5a1 1 0 01-1 1H6V4zm14 16H6V4h5v6h6v10z" />
            </svg>
            <span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">User_Manual_V1.pdf</span>
          </div>
          <small class="text-blue-500 dark:text-gray-400 text-xs">900 KB</small>
        </li>
      </ul>

      <button class="mt-4 w-full p-3 rounded-xl text-white font-semibold flex items-center justify-center
        bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-600
        shadow-neumorphic-button dark:shadow-neumorphic-button-dark
        active:shadow-inset-button active:bg-blue-800 dark:active:bg-blue-800 transition-all duration-200 ease-in-out">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
        </svg>
        Upload File
      </button>
    </div>

    <!-- Right Pane: File Preview & Details -->
    <div class="lg:w-2/3 xl:w-3/4 flex flex-col p-4
      bg-blue-100 dark:bg-gray-850 rounded-xl shadow-inner-sm border border-blue-200 dark:border-gray-700">
      <div class="flex justify-between items-center mb-4 pb-4 border-b border-blue-300 dark:border-gray-700">
        <h2 class="text-xl font-bold text-blue-800 dark:text-blue-200 shadow-text-light dark:shadow-text-dark tracker-wide">File Preview</h2>
        <div class="flex space-x-2">
          <button class="p-3 rounded-full bg-blue-200 dark:bg-gray-750 text-blue-700 dark:text-blue-300
            hover:bg-blue-300 dark:hover:bg-gray-700 shadow-neumorphic-icon dark:shadow-neumorphic-icon-dark
            active:shadow-inset-icon active:bg-blue-400 dark:active:bg-gray-600 transition-all duration-200 ease-in-out">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 9l-7 7 1.41 1.41L12 11.83l5.59 5.58L19 16l-7-7z" />
            </svg>
          </button>
          <button class="p-3 rounded-full bg-blue-200 dark:bg-gray-750 text-blue-700 dark:text-blue-300
            hover:bg-blue-300 dark:hover:bg-gray-700 shadow-neumorphic-icon dark:shadow-neumorphic-icon-dark
            active:shadow-inset-icon active:bg-blue-400 dark:active:bg-gray-600 transition-all duration-200 ease-in-out">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
            </svg>
          </button>
          <button class="p-3 rounded-full bg-blue-200 dark:bg-gray-750 text-blue-700 dark:text-blue-300
            hover:bg-blue-300 dark:hover:bg-gray-700 shadow-neumorphic-icon dark:shadow-neumorphic-icon-dark
            active:shadow-inset-icon active:bg-blue-400 dark:active:bg-gray-600 transition-all duration-200 ease-in-out">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
            </svg>
          </button>
        </div>
      </div>

      <!-- Preview Area -->
      <div class="flex-grow flex items-center justify-center bg-blue-50 dark:bg-gray-900 rounded-xl mb-6
        border border-blue-200 dark:border-gray-700 shadow-inset-md overflow-hidden">
        <img src="https://picsum.photos/600/400?random=1" alt="File Preview" class="max-w-full max-h-full object-contain rounded-lg shadow-lg opacity-80">
      </div>

      <!-- File Details -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
        <div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
          <h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">File Name</h3>
          <p class="text-blue-900 dark:text-blue-100 text-base overflow-hidden truncate">Product_Catalogue_Q3.pdf</p>
        </div>
        <div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
          <h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">File Type</h3>
          <p class="text-blue-900 dark:text-blue-100 text-base">PDF Document</p>
        </div>
        <div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
          <h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">Size</h3>
          <p class="text-blue-900 dark:text-blue-100 text-base">1.2 MB</p>
        </div>
        <div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
          <h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">Uploaded On</h3>
          <p class="text-blue-900 dark:text-blue-100 text-base">2023-10-26</p>
        </div>
        <div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
          <h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">Last Modified</h3>
          <p class="text-blue-900 dark:text-blue-100 text-base">2023-11-15</p>
        </div>
        <div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm flex items-center">
          <img class="w-8 h-8 rounded-full mr-3 border border-blue-300 dark:border-gray-600 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Uploader">
          <div>
            <h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">Uploaded By</h3>
            <p class="text-blue-900 dark:text-blue-100 text-base">John Doe</p>
          </div>
        </div>
      </div>

      <!-- File Tags / Categories -->
      <div class="mb-6">
        <h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-2">Tags</h3>
        <div class="flex flex-wrap gap-2">
          <span class="px-4 py-2 rounded-full text-blue-700 dark:text-blue-200 text-xs font-semibold
            bg-blue-200 dark:bg-gray-700 border border-blue-300 dark:border-gray-600 shadow-tag">Marketing</span>
          <span class="px-4 py-2 rounded-full text-blue-700 dark:text-blue-200 text-xs font-semibold
            bg-blue-200 dark:bg-gray-700 border border-blue-300 dark:border-gray-600 shadow-tag">Catalogue</span>
          <span class="px-4 py-2 rounded-full text-blue-700 dark:text-blue-200 text-xs font-semibold
            bg-blue-200 dark:bg-gray-700 border border-blue-300 dark:border-gray-600 shadow-tag">Q3</span>
        </div>
      </div>

      <!-- Share and Version History -->
      <div class="flex flex-col sm:flex-row justify-between items-center pt-4 border-t border-blue-300 dark:border-gray-700">
        <button class="flex-1 w-full sm:w-auto p-3 rounded-xl text-white font-semibold flex items-center justify-center
          bg-blue-500 dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-500 mr-0 sm:mr-4 mb-2 sm:mb-0
          shadow-neumorphic-button dark:shadow-neumorphic-button-dark
          active:shadow-inset-button active:bg-blue-700 dark:active:bg-blue-700 transition-all duration-200 ease-in-out">
          <svg class="w-5 h-5 mr-2" 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-.41.09-.6s-.04-.4-.09-.6l7.05-4.11c.52.48 1.2.78 1.96.78 2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4c0 .2.04.4.09.6L7.05 11.9c-.52-.48-1.2-.78-1.96-.78-2.21 0-4 1.79-4 4s1.79 4 4 4c.76 0 1.44-.3 1.96-.77l7.05 4.11c-.05.2-.09.41-.09.6 0 2.21 1.79 4 4 4s4-1.79 4-4-1.79-4-4-4z" />
          </svg>
          Share File
        </button>
        <button class="flex-1 w-full sm:w-auto p-3 rounded-xl text-blue-800 dark:text-blue-200 font-semibold flex items-center justify-center
          bg-blue-200 dark:bg-gray-700 hover:bg-blue-300 dark:hover:bg-gray-600
          shadow-neumorphic-button-alt dark:shadow-neumorphic-button-alt-dark
          active:shadow-inset-button active:bg-blue-400 dark:active:bg-gray-600 transition-all duration-200 ease-in-out">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" />
          </svg>
          Version History
        </button>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom tailwind utilities for skeuomorphism */
  .shadow-neumorphic-button {
    box-shadow: 6px 6px 12px #9bcafa, -6px -6px 12px #d3faff;
  }

  .dark .shadow-neumorphic-button-dark {
    box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #2a2a2a;
  }

  .shadow-neumorphic-button-alt {
    box-shadow: 4px 4px 8px #9bcafa, -4px -4px 8px #d3faff;
  }

  .dark .shadow-neumorphic-button-alt-dark {
    box-shadow: 4px 4px 8px #4a4a4a, -4px -4px 8px #2a2a2a;
  }


  .shadow-neumorphic-icon {
    box-shadow: 4px 4px 8px #9bcafa, -4px -4px 8px #d3faff;
  }

  .dark .shadow-neumorphic-icon-dark {
    box-shadow: 4px 4px 8px #4a4a4a, -4px -4px 8px #2a2a2a;
  }

  .shadow-inset-button {
    box-shadow: inset 4px 4px 8px #9bcafa, inset -4px -4px 8px #d3faff;
  }

  .dark .shadow-inset-button {
    box-shadow: inset 4px 4px 8px #4a4a4a, inset -4px -4px 8px #2a2a2a;
  }

  .shadow-inset-icon {
    box-shadow: inset 3px 3px 6px #9bcafa, inset -3px -3px 6px #d3faff;
  }

  .dark .shadow-inset-icon {
    box-shadow: inset 3px 3px 6px #4a4a4a, inset -3px -3px 6px #2a2a2a;
  }

  .shadow-light {
    box-shadow: 3px 3px 6px #bbd6fb, -3px -3px 6px #e0f6ff;
  }

  .dark .shadow-dark {
    box-shadow: 3px 3px 6px #4a4a4a, -3px -3px 6px #2a2a2a;
  }

   .shadow-inset-sm {
    box-shadow: inset 2px 2px 4px #bbd6fb, inset -2px -2px 4px #e0f6ff;
  }

  .dark .shadow-inset-sm {
    box-shadow: inset 2px 2px 4px #4a4a4a, inset -2px -2px 4px #2a2a2a;
  }

   .shadow-inset-md {
    box-shadow: inset 4px 4px 8px #bbd6fb, inset -4px -4px 8px #e0f6ff;
  }

  .dark .shadow-inset-md {
    box-shadow: inset 4px 4px 8px #4a4a4a, inset -4px -4px 8px #2a2a2a;
  }

  .shadow-tag {
      box-shadow: 2px 2px 4px #9bcafa, -2px -2px 4px #d3faff;
  }

  .dark .shadow-tag {
      box-shadow: 2px 2px 4px #4a4a4a, -2px -2px 4px #2a2a2a;
  }

  .shadow-text-light {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7), -1px -1px 2px rgba(0, 0, 0, 0.2);
  }

  .dark .shadow-text-dark {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7), -1px -1px 2px rgba(255, 255, 255, 0.2);
  }

  /* Custom scrollbar styles */
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
  }

  .scrollbar-thumb-blue-400::-webkit-scrollbar-thumb {
    background-color: #60a5fa;
    border-radius: 10px;
    border: 1px solid #93c5fd;
  }

  .dark .scrollbar-thumb-gray-600::-webkit-scrollbar-thumb {
    background-color: #4b5563;
    border: 1px solid #6b7280;
  }

  .scrollbar-track-blue-100::-webkit-scrollbar-track {
    background: #dbeafe;
  }

  .dark .scrollbar-track-gray-800::-webkit-scrollbar-track {
    background: #1f2937;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: #3b82f6;
  }

  .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: #374151;
  }
</style>

Neumorphic_Charity_E-commerce_Component

A complex, responsive e-commerce component designed for non-profit/charitable organizations, featuring a soft neumorphic style with a sepia/brown color scheme and dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-stone-200 to-stone-300 p-4 font-sans text-stone-800 transition-colors duration-300 dark:from-stone-900 dark:to-stone-950 dark:text-stone-200 lg:p-8">

  <!-- Section Title (Neumorphic) -->
  <h1 class="mb-8 text-center text-4xl font-extrabold tracking-tight drop-shadow-sm md:text-5xl lg:text-6xl">
    <span class="inline-block rounded-2xl bg-gradient-to-br from-stone-100 to-stone-200 px-6 py-3 shadow-md transition-all duration-300 ease-in-out hover:scale-105 hover:from-stone-50 hover:to-stone-100 dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:from-stone-700 dark:hover:to-stone-850">
      Support a Cause Today
    </span>
  </h1>

  <!-- Main Grid Layout -->
  <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

    <!-- Product Card 1 -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/1015/400/300" alt="Education Support" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Education for All</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Provide essential learning materials and tuition for underprivileged children.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $10,000
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $6,500
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 65%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/10/400/300" alt="Healthcare Initiative" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Health & Wellness</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Support medical camps and provide essential health services to remote communities.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $15,000
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $12,800
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 85%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/1043/400/300" alt="Environmental Conservation" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Environmental Protection</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Fund reforestation projects and initiatives to protect endangered species.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $8,000
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $4,200
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 53%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

    <!-- Product Card 4 (Featured/Highlighted) -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-amber-500 to-amber-600 text-white shadow-xl ring-4 ring-amber-400 ring-offset-4 ring-offset-stone-200 transition-all duration-300 ease-in-out hover:shadow-2xl dark:ring-offset-stone-900">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-amber-700 to-amber-800 shadow-inner">
        <img src="https://picsum.photos/id/351/400/300" alt="Disaster Relief" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-black/20
"></div>
        <span class="absolute right-4 top-4 rounded-full bg-white/20 px-3 py-1 text-xs font-bold uppercase backdrop-blur-sm">Urgent</span>

      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-bold text-white">Disaster Relief Fund</h3>
        <p class="mb-4 text-sm text-amber-100">Provide immediate aid and long-term recovery support to communities affected by natural disasters.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-dark text-nowrap from-amber-700 to-amber-800 px-3 py-1 text-sm font-medium text-amber-100">
            Goal: $20,000
          </span>
          <span class="neumorphic-badge-dark text-nowrap from-amber-700 to-amber-800 px-3 py-1 text-sm font-bold text-amber-100">
            Raised: $18,900
          </span>
        </div>

        <div class="neumorphic-progress-bar-featured mb-4 h-2 rounded-full shadow-inner">
          <div class="h-full rounded-full bg-gradient-to-r from-white to-amber-200" style="width: 94%;"></div>
        </div>

        <button class="neumorphic-button-alt w-full">
          Contribute Now
        </button>
      </div>
    </div>

    <!-- Add more product cards as needed (using the first card's structure) -->
    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/1060/400/300" alt="Food Security" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Food Security Program</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Help end hunger by providing nutritious meals and sustainable food sources.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $12,000
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $9,100
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 76%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

    <div class="group relative overflow-hidden rounded-3xl bg-gradient-to-br from-stone-100 to-stone-200 leading-tight shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl dark:from-stone-800 dark:to-stone-900 dark:shadow-stone-950/70 dark:hover:shadow-stone-950/90">
      <div class="relative flex h-48 items-center justify-center overflow-hidden rounded-t-2xl bg-gradient-to-br from-stone-300 to-stone-400 shadow-inner dark:from-stone-700 dark:to-stone-800">
        <img src="https://picsum.photos/id/401/400/300" alt="Community Development" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-800/40 via-transparent to-stone-800/10"></div>
      </div>
      <div class="p-6">
        <h3 class="mb-2 text-2xl font-semibold text-stone-800 dark:text-stone-200">Community Development</h3>
        <p class="mb-4 text-sm text-stone-600 dark:text-stone-400">Invest in local infrastructure and sustainable livelihood projects.</p>

        <div class="mb-4 flex items-center justify-between">
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-medium text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Goal: $9,500
          </span>
          <span class="neumorphic-badge-light text-nowrap from-stone-50 to-stone-150 px-3 py-1 text-sm font-bold text-stone-700 dark:from-stone-700 dark:to-stone-850 dark:text-stone-300">
            Raised: $5,300
          </span>
        </div>

        <div class="mb-4 h-2 rounded-full bg-stone-300 shadow-inner dark:bg-stone-700">
          <div class="h-full rounded-full bg-gradient-to-r from-amber-600 to-amber-700" style="width: 56%;"></div>
        </div>

        <button class="neumorphic-button-primary w-full">
          Donate Now
        </button>
      </div>
    </div>

  </div>

  <!-- Helper Classes for Neumorphism (can be defined in a CSS file or as @apply in Tailwind CSS config) -->
  <style>
    .neumorphic-button-primary {
      @apply relative rounded-xl bg-gradient-to-br from-stone-300 to-stone-400 px-6 py-3 font-semibold text-stone-800 shadow-lg transition-all duration-300 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:from-stone-200 hover:to-stone-300 active:translate-y-0.5 active:scale-95 active:shadow-inner dark:from-stone-700 dark:to-stone-800 dark:text-stone-200 dark:shadow-stone-950/70 dark:hover:from-stone-600 dark:hover:to-stone-750 dark:active:shadow-stone-950/90;
    }
    .neumorphic-button-primary:active {
      box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2), inset -2px -2px 5px rgba(255,255,255,0.7), 0 0 0 transparent !important; /* override hover shadow */
      @apply dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)];
    }

    .neumorphic-button-alt {
      @apply relative rounded-xl bg-gradient-to-br from-white to-amber-100 px-6 py-3 font-semibold text-amber-800 shadow-lg transition-all duration-300 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:from-amber-50 hover:to-white active:translate-y-0.5 active:scale-95 active:shadow-inner;
    }
    .neumorphic-button-alt:active {
      box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2), inset -2px -2px 5px rgba(255,255,255,0.7), 0 0 0 transparent !important; /* override hover shadow */
    }

    .neumorphic-badge-light {
      @apply inline-block rounded-full bg-gradient-to-br shadow-md;
      box-shadow: 2px 2px 4px rgba(0,0,0,0.1), -2px -2px 4px rgba(255,255,255,0.8); /* manual neumorphic shadow for badges */
      @apply dark:shadow-[2px_2px_4px_rgba(0,0,0,0.5),-2px_-2px_4px_rgba(255,255,255,0.1)];
    }

    .neumorphic-badge-dark {
      @apply inline-block rounded-full bg-gradient-to-br shadow-md;
      box-shadow: 2px 2px 4px rgba(0,0,0,0.3), -2px -2px 4px rgba(255,255,255,0.15); /* manual neumorphic shadow for badges */
    }

    .neumorphic-progress-bar-featured {
      background: linear-gradient(145deg, #cc8000, #ff9900);
      box-shadow: inset 2px 2px 5px rgba(0,0,0,0.4), inset -2px -2px 5px rgba(255,255,255,0.2);
    }
  </style>

</div>

Product Cards Component - Agriculture/Farming

A responsive product card component designed for agriculture and farming websites, featuring clean typography, grid systems, and autumn colors. Includes dark mode support.

Open Preview

                <section class="py-12 bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 font-sans">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl font-bold text-center mb-10 tracking-tight dark:text-orange-500">
      Our Farm Produce
    </h2>
    <p class="max-w-3xl mx-auto text-center text-lg mb-12 opacity-90 leading-relaxed">
      Discover our selection of fresh, high-quality agricultural products, sustainably grown and harvested with care. From field to your table.
    </p>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">

      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
        <div class="relative pb-2/3 overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1015/400/300" alt="Fresh Organic Apples">
          <span class="absolute top-3 right-3 bg-orange-600 text-white text-xs font-semibold px-3 py-1 rounded-full shadow-md">NEW</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 line-clamp-2">Organic Gala Apples</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">Sweet and crisp, perfect for snacking or baking. Grown without pesticides.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$4.99 <span class="text-base text-stone-500">/lb</span></span>
            <div class="flex items-center text-orange-500">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
        <div class="relative pb-2/3 overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1004/400/300" alt="Freshly Harvested Carrots">
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 line-clamp-2">Farm Fresh Carrots</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">Sweet, crunchy, and packed with vitamins. Directly from our fields to your kitchen.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$2.49 <span class="text-base text-stone-500">/bunch</span></span>
            <div class="flex items-center text-orange-500">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
        <div class="relative pb-2/3 overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1018/400/300" alt="Artisan Sourdough Bread">
          <span class="absolute top-3 left-3 bg-burgundy-700 text-white text-xs font-semibold px-3 py-1 rounded-full shadow-md dark:bg-burgundy-600">LIMITED</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 line-clamp-2">Artisan Sourdough Bread</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">Hand-baked with our own ancient grain flour. A true taste of tradition.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$6.00 <span class="text-base text-stone-500">/loaf</span></span>
            <div class="flex items-center text-orange-500">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-stone-300 dark:text-stone-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border border-stone-200 dark:border-stone-700">
        <div class="relative pb-2/3 overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1020/400/300" alt="Farm Fresh Eggs">
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 line-clamp-2">Pasture-Raised Eggs</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-3">From happy, healthy chickens roaming freely. Rich yolks and superior taste.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-orange-700 dark:text-orange-500">$5.19 <span class="text-base text-stone-500">/dozen</span></span>
            <div class="flex items-center text-orange-500">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-orange-300 dark:text-orange-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 transform hover:-translate-y-0.5 shadow-md hover:shadow-lg dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
            Add to Cart
          </button>
        </div>
      </div>

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

Paper/Print-inspired Navigation for Entertainment Platforms

A simple, responsive navigation component for entertainment platforms, mimicking a paper/print style with a forest green color palette. Includes dark mode support and uses semantic HTML.

Open Preview

                <nav class="bg-lime-50 dark:bg-gray-800 p-4 border-b-4 border-lime-700 dark:border-lime-300 font-serif overflow-hidden relative">
  <div class="max-w-7xl mx-auto flex justify-between items-center">
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-lime-700 dark:text-lime-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M3 5h18M5 9h14v10a2 2 0 01-2 2H7a2 2 0 01-2-2V9zm0 0V5a2 2 0 012-2h10a2 2 0 012 2v4M7 9h10l-1 12H8l-1-12z" />
      </svg>
      <a href="#" class="text-lime-800 dark:text-lime-100 text-2xl font-bold tracking-tight">Page Turner</a>
    </div>

    <!-- Desktop Navigation -->
    <ul class="hidden md:flex space-x-8">
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">Home</a></li>
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">Browse</a></li>
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">My Shelf</a></li>
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">About</a></li>
    </ul>

    <!-- Mobile Menu Button -->
    <button aria-label="Toggle Mobile Menu" class="md:hidden text-lime-700 dark:text-lime-300 cursor-pointer focus:outline-none focus:ring-2 focus:ring-lime-500 rounded" onclick="document.getElementById('mobile-menu').classList.toggle('hidden');">
      <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </div>

  <!-- Mobile Navigation (hidden by default) -->
  <div id="mobile-menu" class="hidden md:hidden mt-4 border-t border-lime-700 dark:border-lime-400 pt-4">
    <ul class="flex flex-col space-y-4">
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">Home</a></li>
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">Browse</a></li>
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">My Shelf</a></li>
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">About</a></li>
    </ul>
  </div>

  <!-- Subtle paper texture element -->
  <div class="absolute inset-0 pointer-events-none opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzgiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgNzggMTAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNOS4xNDc0NSAzLjM3MjM2QzcuOTUyNzcgMi41Njg2MSA3LjUwNjExIDIuMDcwOTggNi42NDQyNyAxLjU5NTQzQzQuMjI5ODYgMC4yNjUwMzggMS40ODk0OSAtMC42NTk1MjkgMS42MDQyMiAxLjUxOTU0QzEuNzUzNjUgNjk0LjI2IDAuNzU2Mjg4IDkyNC43MTggMC43NTYyODggOTI2LjgyMUMwLjc1NjI4OCA5NjguNzY5IDQwLjg0OTUgOTk5LjE3NSA3OC4yMzE5IDk5OS4xNzVDNzguMjMxOSA5OTkuMTc1IDc2LjAxNzUgMTAwMSA3NS4wNjc2IDEwMDJDNzEuNzk5MSAxMDIxLjM5IDY5LjE0MTIgMTAwMCA2OS4wNzQ4IDEwMDAuMDZDNDkuNTM2OCA5OTkuODYxIDI2LjAwNjkgOTUwLjk0MiAxNi4xNDggOTI2LjgyQzExLjU0OTUgODk5LjQ2NCAxMC42NjcxIDguOTA3NDggOS4xNDc0NSAzLjM3MjM2WiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eXM9IjAuMDUiLz4KPC9zdmc+'); background-repeat: repeat;"></div>
</nav>

Table of Contents Component - Booking/Reservation

A simple, responsive Table of Contents component for booking/reservation systems, featuring grayscale colors and subtle gradient transitions. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="relative p-6 sm:p-8 bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-2 leading-tight">
        Your Reservation Guide
      </h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300">
        Navigate through your booking steps.
      </p>
      <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10 pointer-events-none rounded-lg" style="background-image: linear-gradient(135deg, #e0e0e0 0%, #ffffff 100%); dark-background-image: linear-gradient(135deg, #333333 0%, #1a1a1a 100%);"></div>
    </div>
    <nav aria-label="Booking Navigation" class="p-4 sm:p-6 space-y-4">
      <a href="#step-1" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
        <span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
          1
        </span>
        <div class="ml-4 flex-grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
            Select Service
          </h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">Choose your desired service or treatment.</p>
        </div>
        <svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-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="2" d="M9 5l7 7-7 7"></path></svg>
      </a>

      <a href="#step-2" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
        <span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
          2
        </span>
        <div class="ml-4 flex-grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
            Pick Date & Time
          </h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">Find available slots that suit your schedule.</p>
        </div>
        <svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-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="2" d="M9 5l7 7-7 7"></path></svg>
      </a>

      <a href="#step-3" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
        <span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
          3
        </span>
        <div class="ml-4 flex-grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
            Your Details
          </h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">Provide contact and preference information.</p>
        </div>
        <svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-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="2" d="M9 5l7 7-7 7"></path></svg>
      </a>

      <a href="#step-4" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
        <span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
          4
        </span>
        <div class="ml-4 flex-grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
            Confirm Booking
          </h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">Review your reservation details and complete.</p>
        </div>
        <svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-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="2" d="M9 5l7 7-7 7"></path></svg>
      </a>
    </nav>
  </div>
</div>

Memphis_Finance_Charts_Component

A complex financial charts component inspired by Memphis Design, featuring bold colors, geometric shapes, and a neon/electric color scheme. It's fully responsive, supports dark mode, and is suitable for finance/banking interfaces.

Open Preview

                <div class="font-sans bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-purple-950 p-4 sm:p-8 md:p-12 min-h-screen text-gray-800 dark:text-gray-100 relative overflow-hidden">

  <!-- Memphis background elements (for visual interest) -->
  <div class="absolute top-0 left-0 w-48 h-48 bg-purple-400 dark:bg-purple-700 opacity-30 dark:opacity-20 rounded-full blur-3xl -ml-24 -mt-24"></div>
  <div class="absolute bottom-0 right-0 w-64 h-64 bg-yellow-300 dark:bg-yellow-600 opacity-30 dark:opacity-20 rounded-full blur-3xl -mr-32 -mb-32"></div>
  <div class="absolute top-1/2 left-1/4 w-32 h-32 bg-pink-400 dark:bg-pink-700 opacity-30 dark:opacity-20 rounded-lg blur-xl -translate-x-1/2 -translate-y-1/2 rotate-45"></div>
  <div class="absolute bottom-1/2 right-1/4 w-40 h-40 bg-teal-300 dark:bg-teal-600 opacity-20 dark:opacity-10 rounded-full blur-2xl translate-x-1/2 translate-y-1/2"></div>

  <div class="max-w-7xl mx-auto relative z-10">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-8 text-center drop-shadow-lg leading-tight" style="text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.2), 4px 4px 0px rgba(0, 0, 0, 0.1);">
      <span class="text-fuchsia-600 dark:text-fuchsia-400">F</span>inancial <span class="text-lime-500 dark:text-lime-300">P</span>erformance
    </h1>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
      <!-- Main Overview Card -->
      <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-fuchsia-400 dark:border-fuchsia-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
        <div class="absolute top-0 right-0 w-24 h-24 bg-teal-300 dark:bg-teal-600 -mt-12 -mr-12 rounded-full opacity-20"></div>
        <div class="absolute bottom-0 left-0 w-32 h-32 bg-lime-300 dark:bg-lime-600 -mb-16 -ml-16 rounded-lg opacity-20 transform rotate-12"></div>
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 relative z-10">
          <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-50 drop-shadow">Portfolio Growth</h2>
          <div class="mt-4 sm:mt-0 flex space-x-2">
            <button class="px-4 py-2 border-2 border-fuchsia-500 dark:border-fuchsia-400 text-fuchsia-600 dark:text-fuchsia-400 rounded-full font-semibold text-sm hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 transition-colors duration-200">1M</button>
            <button class="px-4 py-2 border-2 border-fuchsia-500 dark:border-fuchsia-400 text-fuchsia-600 dark:text-fuchsia-400 rounded-full font-semibold text-sm hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 bg-fuchsia-100 dark:bg-fuchsia-800 transition-colors duration-200">6M</button>
            <button class="px-4 py-2 border-2 border-fuchsia-500 dark:border-fuchsia-400 text-fuchsia-600 dark:text-fuchsia-400 rounded-full font-semibold text-sm hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 transition-colors duration-200">1Y</button>
          </div>
        </div>
        <div class="relative flex justify-center items-center h-64 md:h-80 bg-gradient-to-tr from-fuchsia-100 to-purple-100 dark:from-purple-900 dark:to-fuchsia-900 rounded-xl mb-6 overflow-hidden border-2 border-fuchsia-500 dark:border-fuchsia-700">
          <!-- Placeholder for Chart Image -->
          <img src="https://picsum.photos/800/400?random=1&grayscale&blur=2" alt="Placeholder chart" class="absolute inset-0 w-full h-full object-cover opacity-30 dark:opacity-10 rounded-xl">
          <div class="absolute inset-0 flex items-center justify-center p-4">
            <div class="w-full h-full border-2 border-dashed border-fuchsia-500 dark:border-fuchsia-300 rounded-lg flex flex-col justify-center items-center text-center p-4">
                <p class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-fuchsia-700 dark:text-fuchsia-300 drop-shadow-md">+15.7%</p>
                <p class="text-lg sm:text-xl font-semibold text-gray-600 dark:text-gray-300">Total Return (6 Months)</p>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 relative z-10">
          <div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Current Value</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$85,450</p>
          </div>
          <div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Invested</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$73,800</p>
          </div>
          <div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Daily Change</p>
            <p class="text-lg font-bold text-lime-600 dark:text-lime-300">+$345</p>
          </div>
          <div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Asset Count</p>
            <p class="text-lg font-bold text-orange-600 dark:text-orange-300">12</p>
          </div>
        </div>
      </div>

      <!-- Top Holdings Card -->
      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-lime-400 dark:border-lime-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-20 h-20 bg-fuchsia-300 dark:bg-fuchsia-600 -mt-10 -ml-10 rounded-full opacity-20"></div>
        <h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Top Holdings</h2>
        <ul class="space-y-4 relative z-10">
          <li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
            <img src="https://picsum.photos/40/40?random=2" alt="Stock Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">NASDAQ 100</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">35% of Portfolio</p>
            </div>
            <span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+2.1%</span>
          </li>
          <li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
            <img src="https://picsum.photos/40/40?random=3" alt="Crypto Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Bitcoin (BTC)</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">20% of Portfolio</p>
            </div>
            <span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+1.8%</span>
          </li>
          <li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
            <img src="https://picsum.photos/40/40?random=4" alt="Bond Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">US Treasury Bonds</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">15% of Portfolio</p>
            </div>
            <span class="ml-auto text-red-600 dark:text-red-300 font-bold">-0.5%</span>
          </li>
          <li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
            <img src="https://picsum.photos/40/40?random=5" alt="Gold Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Gold ETF</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">10% of Portfolio</p>
            </div>
            <span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+0.9%</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- Recent Transactions & Risk Assessment -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- Recent Transactions Card -->
      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-purple-400 dark:border-purple-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
        <div class="absolute top-0 right-0 w-20 h-20 bg-lime-300 dark:bg-lime-600 -mt-10 -mr-10 rounded-full opacity-20"></div>
        <h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Recent Activity</h2>
        <ul class="space-y-4 relative z-10">
          <li class="flex items-center space-x-4 bg-fuchsia-50 dark:bg-fuchsia-900 p-3 rounded-lg border-2 border-fuchsia-300 dark:border-fuchsia-600 transition-colors duration-200">
            <div class="w-10 h-10 rounded-full bg-lime-200 dark:bg-lime-700 flex items-center justify-center text-lime-700 dark:text-lime-300 font-bold text-xl drop-shadow">↑</div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Deposit</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">From Checking Account</p>
            </div>
            <span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+$1,500</span>
          </li>
          <li class="flex items-center space-x-4 bg-fuchsia-50 dark:bg-fuchsia-900 p-3 rounded-lg border-2 border-fuchsia-300 dark:border-fuchsia-600 transition-colors duration-200">
            <div class="w-10 h-10 rounded-full bg-red-200 dark:bg-red-700 flex items-center justify-center text-red-700 dark:text-red-300 font-bold text-xl drop-shadow">↓</div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Withdrawal</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">To Savings Account</p>
            </div>
            <span class="ml-auto text-red-600 dark:text-red-300 font-bold">-$500</span>
          </li>
          <li class="flex items-center space-x-4 bg-fuchsia-50 dark:bg-fuchsia-900 p-3 rounded-lg border-2 border-fuchsia-300 dark:border-fuchsia-600 transition-colors duration-200">
            <div class="w-10 h-10 rounded-full bg-purple-200 dark:bg-purple-700 flex items-center justify-center text-purple-700 dark:text-purple-300 font-bold text-xl drop-shadow">📈</div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Buy NASDAQ</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">100 Units</p>
            </div>
            <span class="ml-auto text-purple-600 dark:text-purple-300 font-bold">-$10,000</span>
          </li>
        </ul>
      </div>

      <!-- Risk Assessment Card -->
      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-teal-400 dark:border-teal-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
        <div class="absolute bottom-0 right-0 w-24 h-24 bg-fuchsia-300 dark:bg-fuchsia-600 -mb-12 -mr-12 rounded-lg opacity-20 transform -rotate-12"></div>
        <h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Risk Assessment</h2>
        <div class="relative flex justify-center items-center h-48 bg-gradient-to-br from-teal-100 to-lime-100 dark:from-lime-900 dark:to-teal-900 rounded-xl mb-6 overflow-hidden border-2 border-teal-500 dark:border-teal-700">
          <img src="https://picsum.photos/600/300?random=6&grayscale&blur=2" alt="Placeholder risk chart" class="absolute inset-0 w-full h-full object-cover opacity-20 dark:opacity-10 rounded-xl">
          <div class="relative z-10 flex flex-col items-center justify-center p-4">
            <p class="text-5xl font-extrabold text-teal-700 dark:text-teal-300 drop-shadow-md mb-2">Moderate</p>
            <p class="text-lg font-semibold text-gray-600 dark:text-gray-300 text-center">Your portfolio risk is currently balanced.</p>
            <a href="#" class="mt-4 inline-block px-5 py-2 bg-teal-500 dark:bg-teal-600 text-white rounded-full font-semibold hover:bg-teal-600 dark:hover:bg-teal-700 transition-colors duration-200 shadow-md">View Details</a>
          </div>
        </div>

        <div class="p-4 bg-teal-50 dark:bg-teal-900 rounded-xl border-2 border-teal-300 dark:border-teal-600 relative z-10">
          <p class="text-sm text-gray-600 dark:text-gray-300">
            Your current risk score is <strong>4.5/10</strong>, primarily driven by your exposure to tech stocks. Consider diversifying further for optimal balance.
          </p>
        </div>
      </div>
    </div>

    <!-- Advisory Section -->
    <div class="mt-8 bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-orange-400 dark:border-orange-700 relative overflow-hidden">
      <div class="absolute top-0 left-0 w-24 h-24 bg-fuchsia-300 dark:bg-fuchsia-600 -mt-12 -ml-12 rounded-full opacity-20"></div>
      <div class="absolute bottom-0 right-0 w-20 h-20 bg-lime-300 dark:bg-lime-600 -mb-10 -mr-10 rounded-lg opacity-20 transform -rotate-45"></div>
      <h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Expert Insights</h2>
      <div class="flex flex-col sm:flex-row items-center gap-6 relative z-10">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Financial Advisor" class="w-24 h-24 rounded-full border-4 border-orange-500 dark:border-orange-400 shadow-lg">
        <div>
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">"Market trends indicate potential for growth in renewable energy. Consider allocating a small portion of your portfolio."</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">— <span class="font-medium text-orange-600 dark:text-orange-300">Alex Chen, Senior Financial Advisor</span></p>
          <a href="#" class="mt-3 inline-block px-5 py-2 bg-gradient-to-r from-orange-500 to-yellow-500 dark:from-orange-600 dark:to-yellow-600 text-white rounded-full font-semibold hover:from-orange-600 hover:to-yellow-600 dark:hover:from-orange-700 dark:hover:to-yellow-700 transition-colors duration-200 shadow-md">Schedule a Call</a>
        </div>
      </div>
    </div>
  </div>
</div>

Monospace_Developer_Alert_Messages_Component

A complex, monospace-inspired alert messages component with a black, white, and accent color scheme, designed for blog/content consumption. Includes responsive design and dark mode support.

Open Preview

                <div class="font-mono p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen">
  <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-8 text-gray-900 dark:text-gray-100 border-b-2 border-gray-300 dark:border-gray-700 pb-2">
    System Alerts <span class="text-green-500">_</span>
  </h1>

  <!-- Success Alert -->
  <div class="mb-6 p-4 sm:p-5 border-2 border-green-600 bg-green-50 dark:bg-gray-800 text-green-800 dark:text-green-400 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg">
    <div class="flex items-start">
      <svg class="flex-shrink-0 w-6 h-6 sm:w-7 sm:h-7 mr-3 text-green-600 dark:text-green-500" 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>
      <div class="flex-1">
        <h3 class="text-lg sm:text-xl font-bold dark:text-green-300">[SUCCESS] Operation Complete</h3>
        <p class="text-sm sm:text-base mt-1">Files synchronized successfully. Total <code>24</code> items updated. Log ID: <span class="bg-green-100 dark:bg-gray-700 rounded px-1 py-0.5 text-green-900 dark:text-green-400 text-xs"><code>#SYS_LOG_20231027_001</code></span></p>
        <pre class="mt-3 p-2 text-xs sm:text-sm bg-green-100 dark:bg-gray-700 text-green-900 dark:text-green-400 rounded overflow-x-auto whitespace-pre-wrap"><code>console.log('Sync successful at ' + new Date().toISOString());</code></pre>
        <div class="mt-4 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
          <button class="px-4 py-2 text-black bg-green-500 dark:bg-green-600 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-green-600 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>View Log Details</code>
          </button>
          <button class="px-4 py-2 text-green-800 dark:text-green-400 border border-green-600 dark:border-green-500 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-green-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>Dismiss</code>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Warning Alert -->
  <div class="mb-6 p-4 sm:p-5 border-2 border-yellow-600 bg-yellow-50 dark:bg-gray-800 text-yellow-800 dark:text-yellow-400 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg">
    <div class="flex items-start">
      <svg class="flex-shrink-0 w-6 h-6 sm:w-7 sm:h-7 mr-3 text-yellow-600 dark:text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM10 13a1 1 0 100-2 1 1 0 000 2zm-1-4a1 1 0 102 0V6a1 1 0 10-2 0v3z" clip-rule="evenodd"></path>
      </svg>
      <div class="flex-1">
        <h3 class="text-lg sm:text-xl font-bold dark:text-yellow-300">[WARNING] Disk Usage Critical</h3>
        <p class="text-sm sm:text-base mt-1">Storage <code>/dev/sda1</code> is at <span class="bg-yellow-100 dark:bg-gray-700 rounded px-1 py-0.5 text-yellow-900 dark:text-yellow-400 text-xs"><code>92%</code></span> capacity. Consider clearing old logs.</p>
        <pre class="mt-3 p-2 text-xs sm:text-sm bg-yellow-100 dark:bg-gray-700 text-yellow-900 dark:text-yellow-400 rounded overflow-x-auto whitespace-pre-wrap"><code>df -h /dev/sda1
Filesystem      Size  Used Avail Use% Mounted on
/dev/sda1       98G   90G  4.5G  92% /</code></pre>
        <div class="mt-4 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
          <button class="px-4 py-2 text-black bg-yellow-500 dark:bg-yellow-600 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-yellow-600 dark:hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>Optimize Storage</code>
          </button>
          <button class="px-4 py-2 text-yellow-800 dark:text-yellow-400 border border-yellow-600 dark:border-yellow-500 text-sm sm:text-base font-semibold rounded-md shadow-sm hover:bg-yellow-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 transition duration-150 ease-in-out">
            <code>Acknowledge</code>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Error Alert -->
  <div class="mb-6 p-4 sm:p-5 border-2 border-red-600 bg-red-50 dark:bg-gray-800 text-red-800 dark:text-red-400 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg">
    <div class="flex items-start">
      <svg class="flex-shrink-0 w-6 h-6 sm:w-7 sm:h-7 mr-3 text-red-600 dark:text-red-500" 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 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586l-1.293-1.293z" clip-rule="evenodd"></path>
      </svg>
      <div class="flex-1">
        <h3 class="text-lg sm:text-xl font-bold dark:text-red-300">[ERROR] Database Connection Failed</h3>
        <p class="text-sm sm:text-base mt-1">Failed to establish connection to <code>production_db</code>. Error code: <span class="bg-red-100 dark:bg-gray-700 rounded px-1 py-0.5 text-red-900 dark:text-red-400 text-xs"><code>DB-ERR-503</code></span>. Check network.</p>
        <pre class="mt-3 p-2 text-xs sm:text-sm bg-red-100 dark:bg-gray-700 text-red-900 dark:text-red-400 rounded overflow-x-auto whitespace-pre-wrap"><code>{ "timestamp": "2023-10-27T10:30:00Z"

E-commerce Components Component

A simple, responsive real estate listing card with a paper/print-inspired design and earth tone color scheme, including dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-warm-gray-100 dark:bg-stone-900 min-h-screen flex items-center justify-center font-serif">
  <div class="max-w-sm mx-auto bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border-2 border-stone-200 dark:border-stone-700 relative">
    <!-- Paper texture overlay (pseudo-element for better control) -->
    <div class="absolute inset-0 z-0 pointer-events-none opacity-40 dark:opacity-20" style="background-image: url('data:image/svg+xml,%3Csvg width=\'100%\' height=\'100%\' viewBox=\'0 0 40 40\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M20 20.5a.5.5 0 011 0V21a.5.5 0 01-1 0v-.5zM20 0a.5.5 0 011 0v20a.5.5 0 01-1 0V0zM0 20a.5.5 0 010 1h20a.5.5 0 010-1H0zM0 0a.5.5 0 010 1h20a.5.5 0 010-1H0zM20 0a.5.5 0 01.5-.5h-1a.5.5 0 01.5.5zM0 20a.5.5 0 01-.5-.5v1a.5.5 0 01.5-.5z\'%3E%3C/path%3E%3C/svg%3E'); background-size: 10px 10px; opacity: 0.1; background-color: rgba(255, 255, 255, 0.5);">
    </div>

    <div class="relative z-10">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Property Thumbnail">
      <div class="absolute top-2 right-2 bg-stone-700/80 text-white text-xs px-2 py-1 rounded-sm tracking-wide font-sans">
        FOR SALE
      </div>

      <div class="p-4">
        <h3 class="text-xl font-bold text-stone-800 dark:text-stone-100 mb-2 leading-tight">
          Charming Suburban Retreat
        </h3>
        <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 tracking-wide">
          123 Harmony Lane, Willow Creek
        </p>

        <div class="flex items-center justify-between mb-4">
          <span class="text-2xl font-extrabold text-green-700 dark:text-green-400">
            $450,000
          </span>
          <div class="flex space-x-3 text-stone-700 dark:text-stone-300">
            <div class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1.586l3.293 3.293a1 1 0 01-1.414 1.414L10 6.414 7.121 9.293a1 1 0 11-1.414-1.414L9 4.586V3a1 1 0 011-1zM2 10a8 8 0 1116 0 8 8 0 01-16 0zm8 4a2 2 0 100-4 2 2 0 000 4z"></path></svg>
              3 Beds
            </div>
            <div class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 6a2 2 0 110 4 2 2 0 010-4z"></path><path fill-rule="evenodd" d="M4 0h12a2 2 0 012 2v16a2 2 0 01-2 2H4a2 2 0 01-2-2V2a2 2 0 012-2zm0 2v5h12V2H4zM2 9v9a2 2 0 002 2h12a2 2 0 002-2V9H2z" clip-rule="evenodd"></path></svg>

              2 Baths
            </div>
          </div>
        </div>

        <button class="w-full bg-orange-700 hover:bg-orange-800 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-200 shadow-sm
                       dark:bg-orange-600 dark:hover:bg-orange-700">
          View Details
        </button>
      </div>
    </div>
  </div>
</div>

Vibrant_Dark_Mode_Feedback_Component

A simple, vibrant feedback component designed for entertainment/media platforms with a dark mode UI to reduce eye strain. It features a prominent title, a sub-description, and a call-to-action button, all fully responsive.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-950 p-4">
  <div class="w-full max-w-sm rounded-lg shadow-xl p-6 bg-gradient-to-br from-indigo-900 to-purple-900 dark:from-indigo-950 dark:to-purple-950 text-white animate-fade-in">
    <div class="text-center mb-6">
      <svg class="mx-auto mb-4 h-12 w-12 text-pink-400 dark:text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.5 13.5l-3.5 3.5-3.5-3.5M12 21V6m0 0l4-4m-4 4L8 2z" />
      </svg>
      <h2 class="text-3xl font-extrabold text-white mb-2 dark:text-gray-50">We'd Love Your Feedback!</h2>
      <p class="text-sm text-indigo-200 dark:text-purple-200">Help us improve your experience on our platform.</p>
    </div>
    <div class="space-y-4">
      <textarea placeholder="Share your thoughts..." class="w-full p-3 rounded-md bg-indigo-800 dark:bg-purple-800 border border-indigo-700 dark:border-purple-700 text-white placeholder-indigo-300 focus:ring-2 focus:ring-pink-500 focus:border-transparent transition duration-300 ease-in-out text-sm h-24 resize-none"></textarea>
      <div class="flex flex-col sm:flex-row gap-4">
        <input type="email" placeholder="Your email (optional)" class="flex-1 p-3 rounded-md bg-indigo-800 dark:bg-purple-800 border border-indigo-700 dark:border-purple-700 text-white placeholder-indigo-300 focus:ring-2 focus:ring-pink-500 focus:border-transparent transition duration-300 ease-in-out text-sm">
        <select class="flex-1 p-3 rounded-md bg-indigo-800 dark:bg-purple-800 border border-indigo-700 dark:border-purple-700 text-white focus:ring-2 focus:ring-pink-500 focus:border-transparent transition duration-300 ease-in-out text-sm">
          <option value="">Select Category (optional)</option>
          <option value="bug">Bug Report</option>
          <option value="feature">Feature Request</option>
          <option value="general">General Feedback</option>
          <option value="content">Content Suggestion</option>
        </select>
      </div>
    </div>
    <button class="mt-6 w-full py-3 px-4 rounded-md bg-pink-600 dark:bg-pink-700 hover:bg-pink-700 dark:hover:bg-pink-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 focus:ring-offset-indigo-900 dark:focus:ring-offset-purple-950 transition duration-300 ease-in-out text-lg font-semibold text-white shadow-lg transform hover:scale-105 active:scale-95">
      Submit Feedback
    </button>
  </div>
</div>

<style>
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
  }
</style>

Retro Follow Button Component

A simple, responsive follow button component with a retro/vintage aesthetic, complementary color scheme, and gaming purpose, including dark mode support.

Open Preview

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <button class="relative group flex items-center justify-center px-6 py-3 font-bold uppercase tracking-wider text-xl text-yellow-900 dark:text-yellow-100 transition-all duration-300 ease-in-out
    bg-gradient-to-br from-yellow-400 to-orange-500
    dark:from-yellow-700 dark:to-orange-800
    border-2 border-yellow-700 dark:border-yellow-900
    shadow-lg shadow-yellow-500/50 dark:shadow-yellow-900/50
    transform skew-x-[-10deg] hover:skew-x-0
    overflow-hidden
    rounded-lg
    focus:outline-none focus:ring-4 focus:ring-yellow-600 dark:focus:ring-yellow-800">
    
    <span class="relative z-10 flex items-center gap-2">
      <svg class="h-6 w-6 text-yellow-900 dark:text-yellow-100 transform -skew-x-[10deg] group-hover:skew-x-0 transition-transform duration-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="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM12 14v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0z"></path>
      </svg>
      <span class="transform -skew-x-[10deg] group-hover:skew-x-0 transition-transform duration-300">Follow Player</span>
    </span>

    <div class="absolute inset-0 bg-yellow-300 dark:bg-yellow-600 opacity-0 group-hover:opacity-30 transition-opacity duration-300 pointer-events-none"></div>

    <div class="absolute inset-0 border-2 border-yellow-800 dark:border-orange-900 border-dashed opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none transform scale-105 group-hover:scale-100"></div>

    <span class="absolute top-0 left-0 w-4 h-4 bg-yellow-700 dark:bg-yellow-900 transform -translate-x-1/2 -translate-y-1/2 rotate-45 opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out"></span>
    <span class="absolute bottom-0 right-0 w-4 h-4 bg-yellow-700 dark:bg-yellow-900 transform translate-x-1/2 translate-y-1/2 rotate-45 opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out"></span>
  </button>
</div>

1 ... 3 4 5 6 7 ... 335