Search Components

All Components

Browse all available Tailwind CSS components

Product Comparison Component

A complex, responsive product comparison component with 3D design elements, a triadic color scheme, and dark mode support, suitable for a dashboard context.

Open Preview

                <div class="bg-gradient-to-br from-indigo-50 to-purple-50 via-pink-50 min-h-screen p-4 sm:p-8 lg:p-12 font-sans dark:from-gray-900 dark:to-black dark:via-gray-800 text-gray-800 dark:text-gray-200">

  <!-- Component Title -->
  <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-12 relative z-10 animate-fade-in-down transform scale-y-105 transition-transform duration-500 hover:scale-y-100
    bg-clip-text text-transparent bg-gradient-to-r from-purple-600 via-pink-500 to-indigo-600
    dark:from-purple-400 dark:via-pink-300 dark:to-indigo-400
    before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-purple-200 before:via-pink-100 before:to-indigo-200 before:blur-lg before:-z-10 before:opacity-50 dark:before:from-gray-700 dark:before:via-gray-800 dark:before:to-gray-900">
    Product Comparison
  </h1>

  <!-- Comparison Grid Container -->
  <div class="grid gap-8 lg:gap-12 xl:grid-cols-3 max-w-7xl mx-auto">

    <!-- Product Card 1 -->
    <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden shadow-2xl transition-all duration-500 hover:shadow-3xl transform hover:-translate-y-2 group
      bg-gradient-to-br from-white to-gray-50 border-t-4 border-l-4 border-purple-400
      dark:from-gray-800 dark:to-gray-900 dark:border-purple-600
      after:content-[''] after:absolute after:inset-0 after:bg-purple-500 after:opacity-10 after:blur-3xl after:-z-10 after:transition-all after:duration-500 group-hover:after:scale-125">

      <!-- 3D Ribbon / Tag -->
      <div class="absolute -top-2 right-2 sm:right-6 bg-gradient-to-br from-purple-500 to-indigo-600 text-white text-xs font-bold px-4 py-2 rounded-bl-xl shadow-lg transform rotate-6 scale-95 group-hover:rotate-0 group-hover:scale-100 transition-transform duration-300 z-20">
        Popular Choice
      </div>

      <div class="text-center mb-6">
        <img src="https://picsum.photos/seed/product1/250/180" alt="Product A" class="w-full h-auto rounded-xl shadow-lg mb-4 object-cover transform perspective-1000 rotate-x-6 group-hover:rotate-x-0 transition-transform duration-300">
        <h2 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400 mb-2">Product Alpha</h2>
        <p class="text-gray-600 dark:text-gray-400">Cutting-edge features for professionals.</p>
      </div>

      <hr class="my-6 border-t border-gray-200 dark:border-gray-700">

      <ul class="space-y-4 text-sm">
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-purple-500 dark:text-purple-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">Advanced AI Engine</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-purple-500 dark:text-purple-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">Unlimited Integrations</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-purple-500 dark:text-purple-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">24/7 Premium Support</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Limited Storage</span>
        </li>
      </ul>

      <div class="flex justify-center mt-8">
        <button class="px-8 py-3 rounded-full text-lg font-bold transition-all duration-300
          bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg shadow-purple-200
          hover:from-purple-700 hover:to-indigo-700 hover:scale-105 hover:shadow-xl hover:shadow-purple-300
          dark:from-purple-500 dark:to-indigo-500 dark:shadow-purple-700 dark:hover:from-purple-600 dark:hover:to-indigo-600 dark:hover:shadow-purple-600">
          Choose Alpha
        </button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden shadow-2xl transition-all duration-500 hover:shadow-3xl transform hover:-translate-y-2 group
      bg-gradient-to-br from-white to-gray-50 border-t-4 border-l-4 border-pink-400
      dark:from-gray-800 dark:to-gray-900 dark:border-pink-600
      after:content-[''] after:absolute after:inset-0 after:bg-pink-500 after:opacity-10 after:blur-3xl after:-z-10 after:transition-all after:duration-500 group-hover:after:scale-125">

      <!-- 3D Ribbon / Tag -->
      <div class="absolute -top-2 right-2 sm:right-6 bg-gradient-to-br from-pink-500 to-red-600 text-white text-xs font-bold px-4 py-2 rounded-bl-xl shadow-lg transform rotate-6 scale-95 group-hover:rotate-0 group-hover:scale-100 transition-transform duration-300 z-20">
        Best Value
      </div>

      <div class="text-center mb-6">
        <img src="https://picsum.photos/seed/product2/250/180" alt="Product B" class="w-full h-auto rounded-xl shadow-lg mb-4 object-cover transform perspective-1000 rotate-x-6 group-hover:rotate-x-0 transition-transform duration-300">
        <h2 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-600 to-red-600 dark:from-pink-400 dark:to-red-400 mb-2">Product Beta</h2>
        <p class="text-gray-600 dark:text-gray-400">Balanced features for everyday use.</p>
      </div>

      <hr class="my-6 border-t border-gray-200 dark:border-gray-700">

      <ul class="space-y-4 text-sm">
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-pink-500 dark:text-pink-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">Intelligent Automation</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-pink-500 dark:text-pink-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">100 GB Storage</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Standard Integrations</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Standard Support</span>
        </li>
      </ul>

      <div class="flex justify-center mt-8">
        <button class="px-8 py-3 rounded-full text-lg font-bold transition-all duration-300
          bg-gradient-to-r from-pink-600 to-red-600 text-white shadow-lg shadow-pink-200
          hover:from-pink-700 hover:to-red-700 hover:scale-105 hover:shadow-xl hover:shadow-pink-300
          dark:from-pink-500 dark:to-red-500 dark:shadow-pink-700 dark:hover:from-pink-600 dark:hover:to-red-600 dark:hover:shadow-pink-600">
          Select Beta
        </button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden shadow-2xl transition-all duration-500 hover:shadow-3xl transform hover:-translate-y-2 group
      bg-gradient-to-br from-white to-gray-50 border-t-4 border-l-4 border-yellow-400
      dark:from-gray-800 dark:to-gray-900 dark:border-yellow-600
      after:content-[''] after:absolute after:inset-0 after:bg-yellow-500 after:opacity-10 after:blur-3xl after:-z-10 after:transition-all after:duration-500 group-hover:after:scale-125">

      <!-- 3D Ribbon / Tag -->
      <div class="absolute -top-2 right-2 sm:right-6 bg-gradient-to-br from-yellow-500 to-orange-600 text-white text-xs font-bold px-4 py-2 rounded-bl-xl shadow-lg transform rotate-6 scale-95 group-hover:rotate-0 group-hover:scale-100 transition-transform duration-300 z-20">
        New Arrival
      </div>

      <div class="text-center mb-6">
        <img src="https://picsum.photos/seed/product3/250/180" alt="Product C" class="w-full h-auto rounded-xl shadow-lg mb-4 object-cover transform perspective-1000 rotate-x-6 group-hover:rotate-x-0 transition-transform duration-300">
        <h2 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-yellow-600 to-orange-600 dark:from-yellow-400 dark:to-orange-400 mb-2">Product Gamma</h2>
        <p class="text-gray-600 dark:text-gray-400">Essential features for everyday users.</p>
      </div>

      <hr class="my-6 border-t border-gray-200 dark:border-gray-700">

      <ul class="space-y-4 text-sm">
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
          <svg class="w-5 h-5 mr-3 text-yellow-500 dark:text-yellow-400 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <span class="font-medium">Basic Analytics</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Limited Integrations</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>Community Support</span>
        </li>
        <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200 text-gray-500 dark:text-gray-400">
          <svg class="w-5 h-5 mr-3 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <span>No AI Engine</span>
        </li>
      </ul>

      <div class="flex justify-center mt-8">
        <button class="px-8 py-3 rounded-full text-lg font-bold transition-all duration-300
          bg-gradient-to-r from-yellow-600 to-orange-600 text-white shadow-lg shadow-yellow-200
          hover:from-yellow-700 hover:to-orange-700 hover:scale-105 hover:shadow-xl hover:shadow-yellow-300
          dark:from-yellow-500 dark:to-orange-500 dark:shadow-yellow-700 dark:hover:from-yellow-600 dark:hover:to-orange-600 dark:hover:shadow-yellow-600">
          Choose Gamma
        </button>
      </div>
    </div>

  </div>

  <!-- Key Feature Comparison Table (Optional for more complexity) -->
  <div class="mt-16 bg-white dark:bg-gray-850 p-8 rounded-3xl shadow-2xl overflow-x-auto relative z-10 animate-fade-in-up
    border border-gray-100 dark:border-gray-700
    before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-purple-50 before:via-pink-50 before:to-yellow-50 before:blur-3xl before:-z-10 before:opacity-50 dark:before:from-gray-900 dark:before:via-gray-800 dark:before:to-gray-900">
    <h3 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 via-pink-500 to-yellow-600 dark:from-purple-400 dark:via-pink-300 dark:to-yellow-400 mb-8 text-center">Detailed Feature Comparison</h3>
    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
      <thead class="bg-gray-50 dark:bg-gray-750">
        <tr>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400 rounded-tl-xl">Feature</th>
          <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">Product Alpha</th>
          <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400">Product Beta</th>
          <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider dark:text-gray-400 rounded-tr-xl">Product Gamma</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">AI Capabilities</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">
            <svg class="mx-auto h-6 w-6 text-purple-500 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-center">
            <svg class="mx-auto h-6 w-6 text-rose-500 dark:text-pink-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-center">
            <svg class="mx-auto h-6 w-6 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Storage Capacity</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Variable</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">100 GB</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">50 GB</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Integrations</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Unlimited</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Standard</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Basic</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Support</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">24/7 Premium</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Email/Chat</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">Community</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-200">Uptime Guarantee</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">99.9%</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">99.5%</td>
          <td class="px-6 py-4 whitespace-nowrap text-center">99%</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

<style>
  /* This is for the '3D' effect on images and cards */
  .perspective-1000 {
    perspective: 1000px;
  }

  .rotate-x-6 {
    transform: rotateX(6deg);
  }

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

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

  /* Keyframe for fade-in-up animation */
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
  }

  /* Custom shadow for pseudo 3D effect on hover */
  .shadow-3xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), /* Default Tailwind 2xl */
                0 0 60px -15px rgba(0, 0, 0, 0.5);
  }

  .dark .shadow-3xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), /* Darker for dark mode */
                0 0 60px -15px rgba(0, 0, 0, 0.9);
  }

  /* Tailwind does not have a native way to apply custom properties in CSS, 
     so a custom class for backdrop color is used for the overall theme. */
  body {
    @apply bg-gradient-to-br from-indigo-50 to-purple-50 via-pink-50 dark:from-gray-900 dark:to-black dark:via-gray-800;
  }
</style>

File Viewer Component

A skeuomorphic file viewer component with a pastel color scheme, designed for e-commerce, featuring responsive layout and dark mode support. It mimics a physical folder with tabs and a content area.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950 dark:to-purple-950 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 p-6 sm:p-8 lg:p-10 flex flex-col transform perspective-1000 -rotate-x-3 duration-500 hover:rotate-x-0 hover:translate-y-2 relative overflow-hidden">
    <!-- Top 'Folder Tab' Element -->
    <div class="absolute -top-4 left-1/2 -translate-x-1/2 w-48 h-12 bg-gradient-to-br from-blue-200 to-indigo-200 dark:from-blue-700 dark:to-indigo-700 rounded-t-lg shadow-inner border border-blue-300 dark:border-blue-600 flex items-center justify-center transform skew-x-12 -rotate-2 origin-bottom-left group-hover:skew-x-0 group-hover:rotate-0 transition-all duration-300">
      <span class="text-white font-semibold text-sm drop-shadow-md">Product Details</span>
    </div>

    <!-- Main Content Area - Mimics a paper sheet -->
    <div class="relative bg-white dark:bg-gray-850 rounded-lg p-6 sm:p-8 pt-12 sm:pt-16 pb-6 shadow-inner-lg shadow-gray-200 dark:shadow-gray-900 border border-t-4 border-gray-100 dark:border-gray-700 dark:border-t-4 dark:border-gray-600 flex flex-col md:flex-row gap-6 sm:gap-8 lg:gap-10 overflow-hidden transform skew-y-1 -rotate-1 origin-top-left group-hover:skew-y-0 group-hover:rotate-0 transition-all duration-300">

      <!-- Left: Product Image Placeholder -->
      <div class="md:w-1/2 relative group">
        <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="w-full h-auto rounded-md shadow-md border-4 border-gray-100 dark:border-gray-700 transform hover:scale-105 transition-transform duration-300 ease-in-out glow-on-hover">
        <div class="absolute bottom-2 right-2 p-2 bg-gradient-to-br from-pink-200 to-orange-200 dark:from-pink-700 dark:to-orange-700 rounded-full shadow-lg border border-pink-300 dark:border-pink-600 transform scale-0 group-hover:scale-100 transition-transform duration-300 translate-y-2">
          <svg class="w-6 h-6 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="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
          </svg>
        </div>
      </div>

      <!-- Right: Product Details -->
      <div class="md:w-1/2 flex flex-col justify-between">
        <div>
          <h2 class="text-2xl sm:text-3xl font-bold mb-3 text-blue-800 dark:text-blue-200 drop-shadow-sm">Vintage Leather Satchel</h2>
          <p class="text-gray-700 dark:text-gray-300 mb-4 text-sm sm:text-base leading-relaxed tracking-wide">
            Crafted with genuine full-grain leather, this satchel combines timeless elegance with modern utility. 
            Perfect for the discerning professional seeking both style and durability. Features multiple compartments 
            and adjustable straps.
          </p>
          <div class="flex items-center mb-4">
            <span class="text-xl sm:text-2xl font-bold text-green-700 dark:text-green-300 mr-2">$129.99</span>
            <span class="text-gray-500 dark:text-gray-400 line-through text-sm">$149.99</span>
          </div>

          <!-- Rating Area -->
          <div class="flex items-center mb-4">
            <div class="flex space-x-1 text-orange-400 dark:text-orange-300">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.76c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.76c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.76c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.76c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.929 8.76c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
            <span class="text-sm text-gray-600 dark:text-gray-400 ml-2">(4.5 / 5.0)</span>
          </div>
        </div>

        <!-- Add to Cart Button -->
        <button class="w-full py-3 px-6 bg-gradient-to-br from-green-300 to-teal-300 dark:from-green-600 dark:to-teal-600 text-white font-bold rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out border-b-4 border-green-500 dark:border-green-800 active:translate-y-0 active:shadow-md active:border-b-0 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75 relative group">
          Add to Cart
          <svg class="w-5 h-5 absolute right-4 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 group-hover:block" 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
           <span class="absolute top-0 left-0 w-full h-full bg-white dark:bg-gray-800 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-20 rounded-lg"></span>
        </button>
      </div>

      <!-- Corner 'Paper Clip' Element -->
      <div class="absolute top-1 right-2 w-8 h-8 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-600 dark:to-gray-700 rounded-full shadow-inner border border-gray-400 dark:border-gray-500 transform rotate-45 -translate-y-2 translate-x-2 animate-bounce-custom"></div>

      <!-- Bottom Edge Shadow -->
      <div class="absolute bottom-0 left-0 right-0 h-4 bg-gray-100 dark:bg-gray-700 opacity-75 rounded-b-lg blur-sm"></div>
    </div>
  </div>

  <style>
    .perspective-1000 {
      perspective: 1000px;
    }
    .shadow-inner-lg {
      box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06), inset 0 4px 8px 0 rgba(0, 0, 0, 0.06);
    }
    .dark .shadow-inner-lg {
      box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2), inset 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    }
    .glow-on-hover {
      transition: box-shadow 0.3s ease-in-out;
    }
    .glow-on-hover:hover {
      box-shadow: 0 0 15px rgba(255, 204, 204, 0.7), 0 0 25px rgba(255, 153, 153, 0.5);
    }
    .dark .glow-on-hover:hover {
      box-shadow: 0 0 15px rgba(200, 100, 100, 0.7), 0 0 25px rgba(150, 50, 50, 0.5);
    }
    @keyframes bounce-custom {
      0%, 100% { transform: rotate(45deg) translate(-2px, -2px); }
      50% { transform: rotate(45deg) translate(2px, 2px); }
    }
    .animate-bounce-custom {
      animation: bounce-custom 2s infinite ease-in-out;
    }
  </style>
</div>

Glassmorphism_Dashboard_Modal

A complex, responsive glassmorphism modal component with monochromatic styling, suitable for dashboard data visualization and control panels, including dark mode support.

Open Preview

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-20 backdrop-blur-sm dark:bg-gray-900 dark:bg-opacity-40">
  <div class="relative w-full max-w-4xl max-h-[90vh] overflow-y-auto bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl border border-white border-opacity-20 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-30 transform transition-all sm:scale-100 opacity-100">
    <div class="p-6 sm:p-8 space-y-8">
      <!-- Modal Header -->
      <div class="flex items-center justify-between pb-4 border-b border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-30">
        <h2 class="text-2xl sm:text-3xl font-extrabold text-white dark:text-gray-100 drop-shadow-lg">Dashboard Analytics Overview</h2>
        <button class="p-2 rounded-full text-white text-opacity-80 dark:text-gray-300 dark:text-opacity-80 hover:bg-white hover:bg-opacity-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white focus:ring-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 dark:focus:ring-gray-600 transition duration-300">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
      </div>

      <!-- Modal Body - Grid Layout -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        <!-- Card 1: Sales Summary -->
        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20 transition duration-300 hover:scale-[1.02]">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 drop-shadow">Total Sales</h3>
          <p class="text-4xl font-bold text-white dark:text-gray-50 mb-2 drop-shadow">$12,500</p>
          <p class="text-sm text-white text-opacity-70 dark:text-gray-300 dark:text-opacity-70">+8% from last month</p>
          <div class="mt-4 flex items-center justify-end">
            <span class="text-xs text-white text-opacity-60 dark:text-gray-400">Updated 2 mins ago</span>
          </div>
        </div>

        <!-- Card 2: New Customers -->
        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20 transition duration-300 hover:scale-[1.02]">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 drop-shadow">New Customers</h3>
          <p class="text-4xl font-bold text-white dark:text-gray-50 mb-2 drop-shadow">280</p>
          <p class="text-sm text-white text-opacity-70 dark:text-gray-300 dark:text-opacity-70">+15% from last week</p>
          <div class="mt-4 flex items-center justify-end">
            <span class="text-xs text-white text-opacity-60 dark:text-gray-400">Updated 1 hour ago</span>
          </div>
        </div>

        <!-- Card 3: Avg. Session Duration -->
        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20 transition duration-300 hover:scale-[1.02]">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 drop-shadow">Avg. Session</h3>
          <p class="text-4xl font-bold text-white dark:text-gray-50 mb-2 drop-shadow">03:45<span class="text-xl">min</span></p>
          <p class="text-sm text-white text-opacity-70 dark:text-gray-300 dark:text-opacity-70">-2% from yesterday</p>
          <div class="mt-4 flex items-center justify-end">
            <span class="text-xs text-white text-opacity-60 dark:text-gray-400">Refreshed now</span>
          </div>
        </div>

        <!-- Card 4: Recent Activities (List) -->
        <div class="md:col-span-2 bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-5 drop-shadow">Recent Activities</h3>
          <ul class="space-y-4">
            <li class="flex items-center space-x-3">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover border border-white border-opacity-30 dark:border-gray-600">
              <div class="flex-1">
                <p class="text-white dark:text-gray-100"><span class="font-medium">Jane Doe</span> updated product pricing.</p>
                <p class="text-xs text-white text-opacity-60 dark:text-gray-400">15 minutes ago</p>
              </div>
              <span class="text-sm text-white text-opacity-70 dark:text-gray-300 px-3 py-1 rounded-full bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-30">Sales</span>
            </li>
            <li class="flex items-center space-x-3">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover border border-white border-opacity-30 dark:border-gray-600">
              <div class="flex-1">
                <p class="text-white dark:text-gray-100"><span class="font-medium">John Smith</span> added a new report.</p>
                <p class="text-xs text-white text-opacity-60 dark:text-gray-400">1 hour ago</p>
              </div>
              <span class="text-sm text-white text-opacity-70 dark:text-gray-300 px-3 py-1 rounded-full bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-30">Data</span>
            </li>
            <li class="flex items-center space-x-3">
              <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover border border-white border-opacity-30 dark:border-gray-600">
              <div class="flex-1">
                <p class="text-white dark:text-gray-100"><span class="font-medium">Emily White</span> completed task 'CRM Integration'.</p>
                <p class="text-xs text-white text-opacity-60 dark:text-gray-400">Yesterday</p>
              </div>
              <span class="text-sm text-white text-opacity-70 dark:text-gray-300 px-3 py-1 rounded-full bg-white bg-opacity-15 dark:bg-gray-700 dark:bg-opacity-30">Project</span>
            </li>
          </ul>
        </div>

        <!-- Card 5: Performance Chart (Placeholder) -->
        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-white border-opacity-15 flex flex-col items-center justify-center dark:bg-gray-800 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-20">
          <h3 class="text-xl font-semibold text-white dark:text-gray-100 mb-4 drop-shadow">Quarterly Performance</h3>
          <img src="https://picsum.photos/300/200?grayscale&blur=5" alt="Chart Placeholder" class="w-full h-auto rounded-md object-cover opacity-70" />
          <p class="text-sm text-white text-opacity-70 dark:text-gray-300 dark:text-opacity-70 mt-3">Visualization data here.</p>
        </div>

      </div>

      <!-- Modal Footer -->
      <div class="pt-6 border-t border-white border-opacity-20 flex flex-col sm:flex-row justify-end space-y-4 sm:space-y-0 sm:space-x-4 dark:border-gray-700 dark:border-opacity-30">
        <button class="flex-1 sm:flex-none px-6 py-3 rounded-full text-white text-opacity-80 dark:text-gray-300 dark:text-opacity-80 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-30 shadow-md hover:bg-white hover:bg-opacity-20 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white focus:ring-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 dark:focus:ring-gray-600 transition duration-300">
          Refresh Data
        </button>
        <button class="flex-1 sm:flex-none px-6 py-3 rounded-full bg-white bg-opacity-25 text-white font-semibold shadow-lg hover:bg-opacity-35 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:bg-gray-700 dark:bg-opacity-30 dark:hover:bg-opacity-40 dark:focus:ring-gray-600 transition duration-300">
          Close Panel
        </button>
      </div>
    </div>
  </div>
</div>

A minimalist and vibrant alert messages component for business/corporate websites, featuring responsive design and dark mode support. It includes different alert types like success, error, info, and warning.

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="mx-auto max-w-4xl space-y-6">

    <!-- Success Alert -->
    <div role="alert" class="p-4 rounded-lg shadow-md bg-green-100 text-green-800 border border-green-200 dark:bg-green-700 dark:text-green-50 dark:border-green-800 flex items-start space-x-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-green-600 dark:text-green-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <div class="flex-grow">
        <h3 class="font-bold text-lg leading-tight">Success! Your operation was completed.</h3>
        <p class="mt-1 text-sm">The data has been successfully saved to the cloud. You can now view the changes in your dashboard.</p>
      </div>
      <button class="p-1 rounded-full text-green-600 hover:bg-green-200 dark:text-green-50 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Error Alert -->
    <div role="alert" class="p-4 rounded-lg shadow-md bg-red-100 text-red-800 border border-red-200 dark:bg-red-700 dark:text-red-50 dark:border-red-800 flex items-start space-x-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-red-600 dark:text-red-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <div class="flex-grow">
        <h3 class="font-bold text-lg leading-tight">Error! Something went wrong.</h3>
        <p class="mt-1 text-sm">Failed to process your request. Please try again later or contact support if the problem persists.</p>
      </div>
      <button class="p-1 rounded-full text-red-600 hover:bg-red-200 dark:text-red-50 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Info Alert -->
    <div role="alert" class="p-4 rounded-lg shadow-md bg-blue-100 text-blue-800 border border-blue-200 dark:bg-blue-700 dark:text-blue-50 dark:border-blue-800 flex items-start space-x-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-blue-600 dark:text-blue-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <div class="flex-grow">
        <h3 class="font-bold text-lg leading-tight">Information! Please note this important update.</h3>
        <p class="mt-1 text-sm">We have updated our privacy policy. Please review the new terms to continue using our services.</p>
      </div>
      <button class="p-1 rounded-full text-blue-600 hover:bg-blue-200 dark:text-blue-50 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Warning Alert -->
    <div role="alert" class="p-4 rounded-lg shadow-md bg-yellow-100 text-yellow-800 border border-yellow-200 dark:bg-yellow-700 dark:text-yellow-50 dark:border-yellow-800 flex items-start space-x-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-yellow-600 dark:text-yellow-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" 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" />
      </svg>
      <div class="flex-grow">
        <h3 class="font-bold text-lg leading-tight">Warning! Your session will expire soon.</h3>
        <p class="mt-1 text-sm">You have 5 minutes left before your current session times out. Please save your work to avoid data loss.</p>
      </div>
      <button class="p-1 rounded-full text-yellow-600 hover:bg-yellow-200 dark:text-yellow-50 dark:hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

  </div>
</div>

Brutalism_Earth_Tone_Back_To_Top_Button

A brutalist-inspired 'Back to Top' button with earth tones, designed for blog/content sites. It's moderately complex, responsive, and supports dark mode. The button features a high-contrast design and a slightly crude aesthetic.

Open Preview

                <div class="fixed bottom-4 right-4 z-50 group" x-data="{ showButton: false }" @scroll.window="showButton = (window.pageYOffset > 300) ? true : false" x-show="showButton" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90 -translate-y-4" x-transition:enter-end="opacity-100 scale-100 translate-y-0" x-cloak>
  <button
    @click="window.scrollTo({top: 0, behavior: 'smooth'})"
    class="p-4 bg-lime-700 dark:bg-lime-900 border-2 border-stone-900 dark:border-stone-100
           text-stone-100 dark:text-stone-100 text-xl font-bold uppercase
           shadow-[4px_4px_0_0_rgba(28,25,23,1)] dark:shadow-[4px_4px_0_0_rgba(250,250,250,1)]
           hover:bg-lime-800 dark:hover:bg-lime-950
           active:shadow-[0px_0px_0_0_rgba(28,25,23,1)] active:translate-x-[4px] active:translate-y-[4px]
           focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-amber-300/50
           transition-all duration-150 ease-in-out
           flex items-center justify-center space-x-2 w-16 h-16 sm:w-20 sm:h-20"
    aria-label="Back to top"
  >
    <svg class="w-8 h-8 sm:w-10 sm:h-10 transform -rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="square" stroke-linejoin="square" stroke-width="3" d="M9 5l7 7-7 7"></path>
    </svg>
  </button>
  <div class="absolute -top-1 -left-1 w-16 h-16 sm:w-20 sm:h-20 border-2 border-stone-900 dark:border-stone-100 pointer-events-none group-active:translate-x-[4px] group-active:translate-y-[4px] transition-all duration-150 ease-in-out"></div>
  <div class="absolute top-1 left-1 w-16 h-16 sm:w-20 sm:h-20 border-2 border-stone-900 dark:border-stone-100 pointer-events-none group-active:translate-x-[4px] group-active:translate-y-[4px] transition-all duration-150 ease-in-out"></div>
</div>

Skeuomorphic_Social_Media_Form_Complex

A complex, skeuomorphic social media form component with complementary colors, responsive design, and dark mode support. Mimics real-world button feels and textures.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center font-sans">
  <div class="w-full max-w-2xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 rounded-3xl shadow-xl border-t border-gray-50 border-solid dark:border-gray-700/50 p-6 sm:p-8 lg:p-10 flex flex-col gap-8 transition-all duration-300 ease-in-out">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-200 text-center drop-shadow-md tracking-tight">
      Connect and Share
    </h2>

    <!-- Post Creation Section -->
    <section class="bg-gray-100 dark:bg-gray-850 p-6 rounded-2xl shadow-inner-lg shadow-gray-300/50 dark:shadow-gray-950/50 border-b border-gray-300 dark:border-gray-700 relative">
      <div class="absolute inset-0 rounded-2xl pointer-events-none"
           style="background: radial-gradient(circle at top left, rgba(255,255,255,0.05), rgba(255,255,255,0) 50%),
                      radial-gradient(circle at bottom right, rgba(0,0,0,0.05), rgba(0,0,0,0) 50%);"></div>

      <div class="flex items-start gap-4 mb-4">
        <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transform translate-z-0">
        <textarea placeholder="What's on your mind, Sarah?" class="flex-1 text-lg p-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 transition duration-200 appearance-none" rows="4" style="resize: none;"></textarea>
      </div>

      <div class="flex flex-col sm:flex-row items-center justify-between gap-4 mt-6">
        <div class="flex flex-wrap gap-3">
          <button class="flex items-center gap-2 p-3 rounded-full bg-blue-300 hover:bg-blue-400 active:bg-blue-500 text-blue-900 dark:bg-blue-600 dark:hover:bg-blue-700 dark:active:bg-blue-800 dark:text-gray-100 font-semibold shadow-md shadow-blue-500/30 dark:shadow-none hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0.5 transition-all duration-200 ease-in-out border border-blue-400 dark:border-blue-700 relative overflow-hidden group">
            <div class="inset-0 absolute rounded-full bg-gradient-to-t from-blue-400 to-blue-200 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-blue-700 dark:to-blue-500"></div>
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-4 4 4 4-4V5c0-.55-.45-1-1-1H5a1 1 0 00-1 1v7.586l3.293-3.293a1 1 0 011.414 0L9 11l3.293-3.293a1 1 0 011.414 0L15 10.586V5h-.586l-2-2-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586L14 13.586V5H6v8.586l-2-2-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586L4 12.586V5h-.586L2 7V5c0-.55.45-1 1-1h13zm-1 9.586L13.586 12 12 13.586l-2-2-1.414 1.414L8 15.586V5h-.586L4 7V5c0-.55.45-1 1-1h10a1 1 0 011 1v7.586zM15 13.414L13.586 12 12 13.414l-2-2-1.414 1.414L8 15.414V5h-.586L4 7V5c0-.55.45-1 1-1h10a1 1 0 011 1v7.414zM15 13.414L13.586 12 12 13.414l-2-2-1.414 1.414L8 15.414V5h-.586L4 7V5c0-.55.45-1 1-1h9.586L13 13.586z" clip-rule="evenodd" /></svg>
            <span class="relative z-10">Photo/Video</span>
          </button>
          <button class="flex items-center gap-2 p-3 rounded-full bg-pink-300 hover:bg-pink-400 active:bg-pink-500 text-pink-900 dark:bg-pink-600 dark:hover:bg-pink-700 dark:active:bg-pink-800 dark:text-gray-100 font-semibold shadow-md shadow-pink-500/30 dark:shadow-none hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0.5 transition-all duration-200 ease-in-out border border-pink-400 dark:border-pink-700 relative overflow-hidden group">
            <div class="inset-0 absolute rounded-full bg-gradient-to-t from-pink-400 to-pink-200 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-pink-700 dark:to-pink-500"></div>
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd" /></svg>
            <span class="relative z-10">Feeling/Activity</span>
          </button>
        </div>
        <button type="submit" class="px-8 py-3 rounded-full text-xl font-bold bg-green-500 hover:bg-green-600 active:bg-green-700 text-white dark:bg-green-700 dark:hover:bg-green-800 dark:active:bg-green-900 shadow-xl shadow-green-600/40 dark:shadow-none active:shadow-inner active:shadow-green-900/50 hover:-translate-y-1 active:translate-y-0.5 transition-all duration-300 ease-in-out border-b-4 border-green-700 dark:border-green-900 relative overflow-hidden group">
          <div class="inset-0 absolute rounded-full bg-gradient-to-t from-green-600 to-green-400 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-green-800 dark:to-green-600"></div>
          <span class="relative z-10">Post</span>
        </button>
      </div>
    </section>

    <!-- Advanced Settings / Privacy Section -->
    <section class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-gray-100 dark:bg-gray-850 p-6 rounded-2xl shadow-inner-lg shadow-gray-300/50 dark:shadow-gray-950/50 border-b border-gray-300 dark:border-gray-700 relative text-gray-800 dark:text-gray-200">
          <div class="absolute inset-0 rounded-2xl pointer-events-none"
               style="background: radial-gradient(circle at top right, rgba(255,255,255,0.05), rgba(255,255,255,0) 50%),
                          radial-gradient(circle at bottom left, rgba(0,0,0,0.05), rgba(0,0,0,0) 50%);"></div>

        <h3 class="text-xl font-semibold mb-4 text-blue-700 dark:text-blue-300 drop-shadow-sm">Audience Settings</h3>
        <div class="mb-4">
          <label for="audience" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Who can see your post?</label>
          <div class="relative">
            <select id="audience" class="block appearance-none w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 text-gray-800 dark:text-gray-200 py-3 pl-4 pr-10 rounded-xl shadow-inner transition duration-200 cursor-pointer">
              <option value="public">Public</option>
              <option value="friends">Friends</option>
              <option value="private">Only Me</option>
              <option value="custom">Custom</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707 3.536-3.536.707-.707L10 6.586 6.464 10.12l.707.707z"/></svg>
            </div>
          </div>
        </div>

        <div>
          <label for="comments" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Who can comment?</label>
          <div class="relative">
            <select id="comments" class="block appearance-none w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 text-gray-800 dark:text-gray-200 py-3 pl-4 pr-10 rounded-xl shadow-inner transition duration-200 cursor-pointer">
              <option value="anyone">Anyone</option>
              <option value="friends">Friends</option>
              <option value="mentions">Only Mentions</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707 3.536-3.536.707-.707L10 6.586 6.464 10.12l.707.707z"/></svg>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-gray-100 dark:bg-gray-850 p-6 rounded-2xl shadow-inner-lg shadow-gray-300/50 dark:shadow-gray-950/50 border-b border-gray-300 dark:border-gray-700 relative text-gray-800 dark:text-gray-200">
          <div class="absolute inset-0 rounded-2xl pointer-events-none"
               style="background: radial-gradient(circle at top left, rgba(255,255,255,0.05), rgba(255,255,255,0) 50%),
                          radial-gradient(circle at bottom right, rgba(0,0,0,0.05), rgba(0,0,0,0) 50%);"></div>

        <h3 class="text-xl font-semibold mb-4 text-blue-700 dark:text-blue-300 drop-shadow-sm">Advanced Options</h3>
        <div class="flex items-center justify-between mb-4">
          <span class="text-gray-700 dark:text-gray-300">Enable notifications</span>
          <label class="relative inline-flex items-center cursor-pointer transition-all duration-200 ease-in-out">
            <input type="checkbox" value="" class="sr-only peer">
            <div class="w-14 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-green-500 shadow-inner peer-checked:shadow-green-600/50 dark:shadow-none"></div>
          </label>
        </div>
        <div class="flex items-center justify-between mb-4">
          <span class="text-gray-700 dark:text-gray-300">Save as draft</span>
          <label class="relative inline-flex items-center cursor-pointer transition-all duration-200 ease-in-out">
            <input type="checkbox" value="" class="sr-only peer">
            <div class="w-14 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-green-500 shadow-inner peer-checked:shadow-green-600/50 dark:shadow-none"></div>
          </label>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-gray-700 dark:text-gray-300">Enable location tagging</span>
          <label class="relative inline-flex items-center cursor-pointer transition-all duration-200 ease-in-out">
            <input type="checkbox" value="" class="sr-only peer">
            <div class="w-14 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-green-500 shadow-inner peer-checked:shadow-green-600/50 dark:shadow-none"></div>
          </label>
        </div>
      </div>
    </section>

    <!-- Call to action/secondary actions -->
    <div class="flex flex-col sm:flex-row gap-4 justify-end mt-4">
      <button type="button" class="px-6 py-3 rounded-full text-lg font-semibold bg-gray-300 hover:bg-gray-400 active:bg-gray-500 text-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-500 dark:text-gray-200 shadow-md shadow-gray-400/30 dark:shadow-none hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0.5 transition-all duration-200 ease-in-out border border-gray-400 dark:border-gray-600 relative overflow-hidden group">
        <div class="inset-0 absolute rounded-full bg-gradient-to-t from-gray-400 to-gray-200 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-gray-700 dark:to-gray-500"></div>
        <span class="relative z-10">Cancel</span>
      </button>
      <button type="button" class="px-6 py-3 rounded-full text-lg font-semibold bg-indigo-500 hover:bg-indigo-600 active:bg-indigo-700 text-white dark:bg-indigo-700 dark:hover:bg-indigo-800 dark:active:bg-indigo-900 shadow-xl shadow-indigo-600/40 dark:shadow-none active:shadow-inner active:shadow-indigo-900/50 hover:-translate-y-1 active:translate-y-0.5 transition-all duration-300 ease-in-out border-b-4 border-indigo-700 dark:border-indigo-900 relative overflow-hidden group">
        <div class="inset-0 absolute rounded-full bg-gradient-to-t from-indigo-600 to-indigo-400 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-indigo-800 dark:to-indigo-600"></div>
        <span class="relative z-10">Save Draft</span>
      </button>
    </div>
  </div>
</div>

Table of Contents Component - 3D Earth Tones

A complex 3D-inspired table of contents component for business and corporate websites, featuring earth tones and full responsiveness with dark mode support. Designed to provide depth and engagement.

Open Preview

                <div class="font-sans bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-4 md:p-8 lg:p-12 min-h-screen">

  <div class="max-w-7xl mx-auto py-8 lg:py-16">
    <h2 class="text-4xl lg:text-5xl font-extrabold text-center mb-12 lg:mb-16 tracking-tight text-stone-800 dark:text-stone-200 relative">
      <span class="block">Table of Contents</span>
      <span class="absolute top-full left-1/2 -translate-x-1/2 w-24 h-1 bg-amber-500 rounded-full mt-2"></span>
    </h2>

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

      <!-- TOC Item 1 -->
      <a href="#introduction" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-amber-500 to-amber-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-amber-400 dark:bg-amber-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 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 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253m9 0c1.168-.776 2.754-1.253 4.5-1.253s3.332.477 4.5 1.253m-9 0V14m0-7a3 3 0 013 3v2m0 0l-1.477 1.477L9 16m4-4s-1.143-2-3-2m9 0a3 3 0 013 3v2m0 0l-1.477 1.477L21 16m-4-4c-1.143 2-3 2-3 2s-1.143 0-3-2"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">1. Introduction</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Overview of our mission and values.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-amber-500 dark:bg-amber-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-amber-600 dark:group-hover:bg-amber-800 transition-colors duration-200">Read More</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 2 -->
      <a href="#company-history" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-green-600 to-green-700 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-green-500 dark:bg-green-700 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">2. Company History</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Key milestones and growth journey.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-green-600 dark:bg-green-800 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-green-700 dark:group-hover:bg-green-900 transition-colors duration-200">Explore Past</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 3 -->
      <a href="#our-services" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-blue-700 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-blue-500 dark:bg-blue-700 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 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="M21 13.255v-2.189a1.125 1.125 0 011.125-1.125h.875a.875.875 0 00.875-.875V7a.875.875 0 00-.875-.875H22a1.125 1.125 0 01-1.125-1.125V4.255a1.125 1.125 0 00-1.125-1.125H16.89M12 17.5a4.5 4.5 0 110-9 4.5 4.5 0 010 9zM12 17.5V21M12 6.5V3"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">3. Our Services</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Comprehensive solutions for your business.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-blue-600 dark:bg-blue-800 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-blue-700 dark:group-hover:bg-blue-900 transition-colors duration-200">View Offerings</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 4 -->
      <a href="#client-testimonials" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-red-500 to-red-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-red-400 dark:bg-red-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 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="M7 8h10M7 12h10M7 16h10M4 6h16a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2z"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">4. Client Testimonials</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Hear from our satisfied clients.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-red-500 dark:bg-red-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-red-600 dark:group-hover:bg-red-800 transition-colors duration-200">Read Reviews</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 5 -->
      <a href="#our-team" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-purple-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-purple-400 dark:bg-purple-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 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="M17 20h-8a4 4 0 01-4-4v-1.586a1 1 0 01-.293-.707L4 12V6a2 2 0 012-2h12a2 2 0 012 2v6a2 2 0 01-2 2h-1m-7 8a4 4 0 100-8 4 4 0 000 8z"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">5. Our Team</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Meet the experts behind our success.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-purple-500 dark:bg-purple-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-purple-600 dark:group-hover:bg-purple-800 transition-colors duration-200">Meet Us</span>
          </div>
        </div>
      </a>

      <!-- TOC Item 6 -->
      <a href="#contact-us" class="group block perspective-1000">
        <div class="relative bg-stone-200 dark:bg-stone-800 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 transform-style-preserve-3d group-hover:rotateY-5 group-hover:rotateX-5 group-hover:scale-105 group-hover:shadow-2xl dark:group-hover:shadow-xl-dark backface-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-teal-500 to-teal-600 opacity-20 dark:opacity-10 rounded-3xl after:absolute after:inset-0 after:rounded-3xl after:shadow-inner-xl after:dark:shadow-inner-xl-dark"></div>
          <div class="p-6 md:p-8 lg:p-10 relative z-10 flex flex-col items-center text-center">
            <div class="w-16 h-16 bg-teal-400 dark:bg-teal-600 rounded-full flex items-center justify-center mb-4 transform translateZ-20 shadow-md">
              <svg class="w-8 h-8 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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-stone-800 dark:text-stone-100 transform translateZ-10">6. Contact Us</h3>
            <p class="text-stone-700 dark:text-stone-300 text-sm transform translateZ-5">Get in touch for inquiries.</p>
            <span class="mt-4 inline-block px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white text-xs font-semibold rounded-full transform translateZ-15 shadow-lg group-hover:bg-teal-600 dark:group-hover:bg-teal-800 transition-colors duration-200">Contact Now</span>
          </div>
        </div>
      </a>

    </div>
  </div>

  <style>
  /* Adding custom CSS for 3D transforms */
  .perspective-1000 {
    perspective: 1000px;
  }

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

  .rotateY-5 {
    transform: rotateY(5deg);
  }

  .rotateX-5 {
    transform: rotateX(5deg);
  }
  .group-hover\:rotateY-5:hover {
    transform: rotateY(5deg) scale(1.05);
  }
  .group-hover\:rotateX-5:hover {
    transform: rotateX(5deg) scale(1.05);
  }
  .group-hover\:scale-105:hover {
    transform: scale(1.05);
  }

  /* Combining for better 3D effect on hover */
  .group-hover\:rotateY-5.group-hover\:rotateX-5.group-hover\:scale-105:hover {
    transform: rotateY(5deg) rotateX(5deg) scale(1.05);
  }
  
  /* Z-axis transforms */
  .translateZ-5 {
    transform: translateZ(5px);
  }
  .translateZ-10 {
    transform: translateZ(10px);
  }
  .translateZ-15 {
    transform: translateZ(15px);
  }
  .translateZ-20 {
    transform: translateZ(20px);
  }

  /* Inner shadow for '3D' depth */
  .shadow-inner-xl {
    box-shadow: inset 0 6px 12px rgba(0,0,0,0.1);
  }
  .dark\:shadow-inner-xl-dark {
    box-shadow: inset 0 6px 12px rgba(255,255,255,0.05);
  }
  .shadow-xl-dark {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  }
  
  /* Backface visibility to prevent flickering on 3D transforms */
  .backface-hidden {
    backface-visibility: hidden;
  }
  </style>

</div>

Chat Window Component

A responsive chat window component designed for business/corporate use, featuring a dark mode UI with a complementary color scheme. Includes placeholder messages, contact list, and input area.

Open Preview

                <div class="flex flex-col h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-sans">

  <!-- Chat Window Wrapper -->
  <div class="flex-1 flex overflow-hidden rounded-lg shadow-xl m-4 lg:m-8 bg-white dark:bg-gray-800">

    <!-- Left Panel: Contacts List (Hidden on Mobile, shown on larger screens) -->
    <div class="hidden md:flex flex-col w-1/4 border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-850">
      <div class="p-4 border-b border-gray-200 dark:border-gray-700">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Chats</h2>
        <input type="text" placeholder="Search chats..." class="w-full mt-3 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-600 dark:focus:ring-purple-400">
      </div>
      <div class="flex-1 overflow-y-auto">
        <!-- Contact 1 (Active) -->
        <a href="#" class="flex items-center p-4 hover:bg-purple-100 dark:hover:bg-purple-900 transition-colors duration-200 bg-purple-50 dark:bg-purple-800 border-l-4 border-purple-600 dark:border-purple-400">
          <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="font-semibold text-purple-800 dark:text-purple-200">John Doe</p>
            <p class="text-sm text-purple-600 dark:text-purple-400 truncate">Hey, are you free for a call?</p>
          </div>
          <span class="text-xs text-purple-500 dark:text-purple-300">10:30 AM</span>
        </a>
        <!-- Contact 2 -->
        <a href="#" class="flex items-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200">
          <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Jane Smith</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">That's great news!</p>
          </div>
          <span class="text-xs text-gray-500 dark:text-gray-300">Yesterday</span>
        </a>
        <!-- Contact 3 -->
        <a href="#" class="flex items-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200">
          <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/51.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Michael Johnson</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Let me know if you need anything.</p>
          </div>
          <span class="text-xs text-gray-500 dark:text-gray-300">2 days ago</span>
        </a>
      </div>
    </div>

    <!-- Right Panel: Chat Messages -->
    <div class="flex flex-col flex-1">
      <!-- Chat Header -->
      <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-850">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
            <p class="text-sm text-green-500 dark:text-green-400">Online</p>
          </div>
        </div>
        <div class="flex space-x-4">
          <button aria-label="Call" class="text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200">
            <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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
            </svg>
          </button>
          <button aria-label="Video Call" class="text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200">
            <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="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
            </svg>
          </button>
        </div>
      </div>

      <!-- Chat Messages Area -->
      <div class="flex-1 overflow-y-auto p-4 space-y-4">
        <!-- Incoming Message -->
        <div class="flex items-start">
          <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-xl max-w-sm">
            <p class="text-sm text-gray-800 dark:text-gray-100">Hey, good morning! Hope you're having a productive day.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">10:28 AM</p>
          </div>
        </div>

        <!-- Outgoing Message -->
        <div class="flex justify-end">
          <div class="bg-purple-600 dark:bg-purple-700 text-white p-3 rounded-xl max-w-sm">
            <p class="text-sm">Good morning! I am. Just finishing up the Q3 report. Have you reviewed the client proposal?</p>
            <p class="text-xs text-purple-200 dark:text-purple-300 text-right mt-1">10:29 AM</p>
          </div>
        </div>

        <!-- Incoming Message -->
        <div class="flex items-start">
          <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-xl max-w-sm">
            <p class="text-sm text-gray-800 dark:text-gray-100">Yes, I have. Looks solid. Just a minor tweak on the budget section, I'll send you the revised version in a bit.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">10:30 AM</p>
          </div>
        </div>

        <!-- Outgoing Message (Last message) -->
        <div class="flex justify-end">
          <div class="bg-purple-600 dark:bg-purple-700 text-white p-3 rounded-xl max-w-sm">
            <p class="text-sm">Perfect, looking forward to it. Are you free for a quick call to discuss the next steps on project 'Alpha'?</p>
            <p class="text-xs text-purple-200 dark:text-purple-300 text-right mt-1">10:30 AM</p>
          </div>
        </div>

      </div>

      <!-- Chat Input Area -->
      <div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-850 flex items-center space-x-3">
        <button aria-label="Attach file" class="text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200">
          <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="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.414a4 4 0 00-5.656-5.656l-6.415 6.415a3 3 0 104.243 4.243l.707-.707m1.414-.707l.707-.707m1.414-.707l.707-.707m0 0l1 1m0-1v1" />
          </svg>
        </button>
        <input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-600 dark:focus:ring-purple-400">
        <button aria-label="Send message" class="bg-purple-600 dark:bg-purple-500 text-white p-3 rounded-full hover:bg-purple-700 dark:hover:bg-purple-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-90 -mr-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
          </svg>
        </button>
      </div>
    </div>

  </div>

</div>

Brutalist Monochromatic Tooltip

A complex, brutalist-style monochromatic tooltip component designed for blog/content sites, featuring multiple interactive elements and full responsiveness with dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 transition-colors duration-300">
  <div class="relative group max-w-sm mx-auto">
    <a href="#" class="inline-block px-6 py-3 text-lg font-extrabold tracking-tight uppercase border-4 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-transparent transition-all duration-300 transform -skew-x-6 hover:translate-x-1 hover:-translate-y-1 hover:shadow-brutal dark:hover:shadow-brutal-dark focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600">
      Hover Me
    </a>

    <div class="absolute hidden group-hover:block transition-all duration-300 ease-out transform scale-0 origin-bottom-left group-hover:scale-100 mt-4 md:mt-6 left-1/2 -ml-24 w-60 sm:w-72 md:w-80 lg:w-96 p-4 md:p-6 bg-gray-200 dark:bg-gray-800 border-4 border-gray-800 dark:border-gray-200 shadow-brutal dark:shadow-brutal-dark z-50 overflow-hidden">
      <div class="absolute -top-4 left-6 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-800 dark:border-b-gray-200 transform rotate-[135deg]"></div>
      <div class="absolute -top-4 left-6 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-200 dark:border-b-gray-800 transform rotate-[135deg] -translate-x-0.5 -translate-y-0.5"></div>

      <h3 class="text-xl md:text-2xl font-extrabold uppercase mb-2 text-gray-900 dark:text-gray-100 border-b-2 border-dashed border-gray-500 dark:border-gray-500 pb-1">
        Brutal Tip Title
      </h3>
      <p class="text-sm md:text-base text-gray-700 dark:text-gray-300 mb-4 tracking-tight leading-snug">
        This is a raw and unpolished tooltip designed with a brutalist aesthetic. It's meant to convey information bluntly and directly. 
        Consider this a visual declaration, not a gentle suggestion.
      </p>
      
      <div class="mb-4 flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4 border-t-2 border-dashed border-gray-500 dark:border-gray-500 pt-3">
        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Author" class="w-10 h-10 rounded-full border-2 border-gray-800 dark:border-gray-200 object-cover flex-shrink-0">
        <div>
          <p class="text-xs md:text-sm font-bold uppercase text-gray-800 dark:text-gray-200">By John 'The Hammer' Doe</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">March 15, 2023</p>
        </div>
      </div>

      <div class="flex flex-wrap gap-2 mb-4">
        <span class="px-2 py-1 text-xs font-bold uppercase border-2 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 select-none">#Brutalism</span>
        <span class="px-2 py-1 text-xs font-bold uppercase border-2 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 select-none">#Monochromatic</span>
        <span class="px-2 py-1 text-xs font-bold uppercase border-2 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 select-none">#Content</span>
      </div>

      <a href="#" class="inline-block w-full text-center px-4 py-2 text-sm md:text-base font-extrabold uppercase border-4 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-transparent transition-all duration-300 transform -skew-x-3 hover:translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-sm dark:hover:shadow-brutal-sm-dark focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600">
        Read More
      </a>

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

<style>
  /* Custom shadows for brutalism style */
  .shadow-brutal {
    box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 1);
  }
  .dark .shadow-brutal-dark {
    box-shadow: 10px 10px 0px 0px rgba(255, 255, 255, 1);
  }
  .shadow-brutal-sm {
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
  }
  .dark .shadow-brutal-sm-dark {
    box-shadow: 4px 4px 0px 0px rgba(255, 255, 255, 1);
  }

  /* Triangle for tooltip */
  .group-hover\:block {
    left: 50%;
    transform: translateX(-50%) translateY(10px) rotate(0deg) scale(0);
    transform-origin: bottom center;
  }
  .group:hover .group-hover\:block {
    transform: translateX(-50%) translateY(0px) rotate(0deg) scale(1);
  }
  @media (min-width: 768px) {
    .group-hover\:block {
      left: 50%;
      transform: translateX(-50%) translateY(20px) rotate(0deg) scale(0);
      transform-origin: bottom center;
    }
    .group:hover .group-hover\:block {
      transform: translateX(-50%) translateY(0px) rotate(0deg) scale(1);
    }
  }
</style>

Skeuomorphic Loader Component

A professional, responsive loader component with a skeuomorphic design, complementary color scheme, and dark mode support, suitable for business/corporate websites. Features a subtle, animated loading bar within a metallic-like container.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-500">

  <h2 class="text-3xl font-extrabold text-blue-800 dark:text-blue-200 mb-8 tracking-tight text-center">
    Loading...
  </h2>

  <!-- Skeuomorphic Loader Container -->
  <div class="relative w-full max-w-sm h-20 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(0,0,0,0.3),5px_5px_15px_rgba(0,0,0,0.2)] dark:shadow-[inset_2px_2px_5px_rgba(255,255,255,0.1),inset_-2px_-2px_8px_rgba(0,0,0,0.9),5px_5px_15px_rgba(0,0,0,0.5)] p-4 border border-solid border-gray-400 dark:border-gray-600 transition-all duration-500 animate-pulse-subtle flex flex-col justify-center items-center">
    
    <!-- Inner Bezel/Recess -->
    <div class="relative w-full h-12 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 rounded-xl shadow-[inset_1px_1px_3px_rgba(0,0,0,0.2),inset_-1px_-1px_3px_rgba(255,255,255,0.7)] dark:shadow-[inset_1px_1px_3px_rgba(255,255,255,0.05),inset_-1px_-1px_3px_rgba(0,0,0,0.9)] p-2 transition-all duration-500">
      
      <!-- Loading Bar Track -->
      <div class="w-full h-full bg-gray-300 dark:bg-gray-700 rounded-lg overflow-hidden shadow-inner-dark transition-colors duration-500">
        
        <!-- Loading Progress Bar (complementary color - often orange/yellow or green) -->
        <div class="h-full bg-gradient-to-r from-orange-400 to-amber-500 dark:from-orange-500 dark:to-amber-600 rounded-lg animate-loading-bar origin-left shadow-[0_0_8px_rgba(251,146,60,0.8)] dark:shadow-[0_0_10px_rgba(249,115,22,0.6)]" style="width: 75%;">
        </div>
      </div>
    </div>
    
    <p class="absolute -bottom-6 text-sm text-gray-600 dark:text-gray-400 font-medium whitespace-nowrap overflow-hidden">
      Preparing resources...
    </p>

  </div>

  <style>
    @keyframes loading-bar {
      0% { width: 0%; transform: translateX(-100%); opacity: 0.5; }
      25% { width: 50%; transform: translateX(0%); opacity: 0.8; }
      50% { width: 100%; opacity: 1; }
      75% { width: 50%; transform: translateX(50%); opacity: 0.8; }
      100% { width: 0%; transform: translateX(100%); opacity: 0.5; }
    }

    .animate-loading-bar {
      animation: loading-bar 2s ease-in-out infinite alternate;
    }

    @keyframes pulse-subtle {
      0%, 100% { transform: scale(1); filter: brightness(1); }
      50% { transform: scale(1.01); filter: brightness(1.05); }
    }

    .animate-pulse-subtle {
      animation: pulse-subtle 3s ease-in-out infinite;
    }

    /* Custom utility for inner dark shadow to mimic depth */
    .shadow-inner-dark {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    }
    .dark .shadow-inner-dark {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
    }
  </style>

</div>

1 ... 112 113 114 115 116 ... 335

Search Components

Categories

All Components

Product Comparison Component

File Viewer Component

Glassmorphism_Dashboard_Modal

Alert Messages Component

Brutalism_Earth_Tone_Back_To_Top_Button

Skeuomorphic_Social_Media_Form_Complex

Table of Contents Component - 3D Earth Tones

Chat Window Component

Brutalist Monochromatic Tooltip

Skeuomorphic Loader Component