Search Components

All Components

Browse all available Tailwind CSS components

Art Deco Real Estate Buttons Component

A complex Art Deco inspired button component for real estate platforms, featuring geometric patterns, luxurious grayscale styling, and multiple interactive elements, with full responsiveness and dark mode support.

Open Preview

                <div class="font-sans bg-white dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8 flex flex-col items-center justify-center">

  <!-- Component Title -->
  <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-8 sm:mb-10 lg:mb-12 text-center tracking-tight leading-tight uppercase relative">
    <span class="block relative z-10">Property Actions</span>
    <span class="block w-full h-1 bg-gray-300 dark:bg-gray-700 absolute bottom-0 left-0 transform -translate-y-1/2 z-0"></span>
    <span class="block w-full h-1 bg-gray-300 dark:bg-gray-700 absolute top-0 left-0 transform translate-y-1/2 z-0"></span>
  </h1>

  <!-- Buttons Container -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8 max-w-7xl w-full">

    <!-- Primary Action Button: View Details -->
    <button aria-label="View Property Details" class="group relative overflow-hidden bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-800 text-gray-900 dark:text-white font-medium py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-opacity-75">
      <span class="absolute inset-0 block bg-gray-50 dark:bg-gray-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
      <div class="flex items-center justify-center space-x-3 relative z-10">
        <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 0M17.582 17.582A2 2 0 0118 20.414.418 2.766 2.766 0 0118.707 20l2.121-2.121a1 1 0 011.414 0l.707.707a1 1 0 010 1.414l-2.121 2.121a1 1 0 01-1.414 0L18 20.414A2 2 0 0117.586 18H2.414a2 2 0 01-1.414-.586l-.707-.707a1 1 0 010-1.414l2.121-2.121a1 1 0 011.414 0l.707.707a.418 2.766 2.766 0 01.293.293z"></path></svg>
        <span class="uppercase tracking-wider">View Details</span>
      </div>
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 clip-path-polygon-button bg-gray-500 dark:bg-gray-400 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>

    <!-- Secondary Action Button: Schedule Tour -->
    <button aria-label="Schedule a Property Tour" class="group relative overflow-hidden bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-700 text-gray-800 dark:text-gray-200 font-medium py-3 px-6 rounded-lg shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-gray-200 dark:border-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700 focus:ring-opacity-75">
      <span class="absolute inset-0 block bg-gray-50 dark:bg-gray-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
      <div class="flex items-center justify-center space-x-3 relative z-10">
        <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="M8 7V3m8 4V3m-9 8h.01M7 12h.01M7 15h.01M17 12h.01M17 15h.01M17 18h.01M2 20h20a2 2 0 002-2V6a2 2 0 00-2-2H2a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span class="">Schedule Tour</span>
      </div>
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 clip-path-polygon-button bg-gray-400 dark:bg-gray-500 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>

    <!-- Tertiary Action Button: Save to Favorites -->
    <button aria-label="Save Property to Favorites" class="group relative overflow-hidden bg-gradient-to-br from-gray-50 to-gray-200 dark:from-gray-900 dark:to-gray-800 text-gray-700 dark:text-gray-300 font-medium py-3 px-6 rounded-lg shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-gray-100 dark:border-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 focus:ring-opacity-75">
      <span class="absolute inset-0 block bg-gray-50 dark:bg-gray-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
      <div class="flex items-center justify-center space-x-3 relative z-10">
        <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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
        <span class="">Save Property</span>
      </div>
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 clip-path-polygon-button bg-gray-300 dark:bg-gray-600 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>

    <!-- Special Feature Button: Virtual Tour -->
    <button aria-label="Take a Virtual Tour" class="group relative overflow-hidden bg-gradient-to-br from-gray-300 to-gray-500 dark:from-gray-600 dark:to-gray-700 text-gray-900 dark:text-white font-medium py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-gray-400 dark:border-gray-500 focus:outline-none focus:ring-4 focus:ring-gray-500 dark:focus:ring-gray-500 focus:ring-opacity-75">
      <span class="absolute inset-0 block bg-gray-50 dark:bg-gray-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
      <div class="flex items-center justify-center space-x-3 relative z-10">
       <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="M4 7v10h16V7H4zm0 0l-2-2m2 2l-2-2m2 2l2-2m-2 2l-2-2m2 2l2-2m8 0h.01M7 7h.01M7 17h.01M17 7h.01M17 17h.01"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 9l-4 3m0 0l4 3m-4-3H4"></path></svg>
        <span class="uppercase tracking-wider">Virtual Tour</span>
      </div>
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 clip-path-polygon-button bg-gray-600 dark:bg-gray-300 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>

    <!-- Informational Button: Get Directions -->
    <button aria-label="Get Directions to Property" class="group relative overflow-hidden bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 text-gray-700 dark:text-gray-300 font-medium py-3 px-6 rounded-lg shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-gray-150 dark:border-gray-850 focus:outline-none focus:ring-4 focus:ring-gray-250 dark:focus:ring-gray-850 focus:ring-opacity-75">
      <span class="absolute inset-0 block bg-gray-50 dark:bg-gray-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
      <div class="flex items-center justify-center space-x-3 relative z-10">
        <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="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.553-.832L9 7m0 13l6-3m-6 3V7m6 10l4.447 2.224A1 1 0 0021 18.382V7.618a1 1 0 00-1.553-.832L15 11m0 9V11m0 0l-1 1m4-4l-1 1"></path></svg>
        <span class="">Get Directions</span>
      </div>
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 clip-path-polygon-button bg-gray-200 dark:bg-gray-700 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>

    <!-- Communication Button: Contact Agent -->
    <button aria-label="Contact the Real Estate Agent" class="group relative overflow-hidden bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-900 dark:text-gray-100 font-medium py-3 px-6 rounded-lg shadow-md hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 ease-in-out border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-opacity-75">
      <span class="absolute inset-0 block bg-gray-50 dark:bg-gray-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
      <div class="flex items-center justify-center space-x-3 relative z-10">
        <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="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"></path></svg>
        <span class="uppercase tracking-wider">Contact Agent</span>
      </div>
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 clip-path-polygon-button bg-gray-500 dark:bg-gray-400 opacity-10 group-hover:opacity-20 transition-opacity duration-300"></div>
    </button>

  </div>

  <!-- Custom CSS for Art Deco Polygon -->
  <style>
    .clip-path-polygon-button {
        clip-path: polygon(0% 0%, 10% 100%, 100% 100%, 90% 0%); /* Example of a geometric pattern (parallelogram) */
        /* Adjust values for diverse geometric shapes to fit Art Deco aesthetic */
    }

    /* To make dark mode toggleable for easy viewing if integrated */
     body.dark-mode .dark\:bg-gray-900 { background-color: #1a202c; }
     body.dark-mode .dark\:text-white { color: #ffffff; }
     body.dark-mode .dark\:from-gray-700 { background-image: linear-gradient(to bottom right, #4a5568, #2d3748); }
     body.dark-mode .dark\:to-gray-800 { background-image: linear-gradient(to bottom right, #4a5568, #2d3748); }
    /* ... other dark mode styles ... */
  </style>

</div>

360_Viewer_Component_Watercolor_Corporate_Blues

A complex 360° viewer component with a watercolor/artistic design style and corporate blue color scheme, specifically tailored for booking and reservation systems. It features multiple interactive elements and is fully responsive with dark mode support.

Open Preview

                <div class="relative min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4 dark:from-gray-900 dark:to-gray-800 font-sans">

  <!-- Top Header Section (For Booking/Reservation context) -->
  <div class="max-w-7xl mx-auto mb-6 p-4 bg-white/70 backdrop-blur-sm rounded-lg shadow-xl dark:bg-gray-800/70 border border-blue-200 dark:border-gray-700">
    <div class="flex flex-col md:flex-row justify-between items-center">
      <h1 class="text-3xl font-extrabold text-blue-800 dark:text-blue-300 mb-2 md:mb-0">Explore Our Space in 360°</h1>
      <div class="flex items-center space-x-4">
        <div class="relative group">
          <button class="px-6 py-2 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition duration-300 ease-in-out shadow-lg transform hover:scale-105">
            Book Now
          </button>
          <div class="absolute hidden group-hover:block whitespace-nowrap bg-blue-700 text-white text-xs rounded py-1 px-2 right-0 bottom-full mb-2 origin-bottom scale-0 group-hover:scale-100 transition-transform duration-200 ease-out">
            Start Your Reservation
          </div>
        </div>
        <button class="p-2 text-blue-600 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-100 rounded-full hover:bg-blue-100 dark:hover:bg-gray-700 transition duration-300 ease-in-out">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
          </svg>
          <span class="sr-only">Add to Calendar</span>
        </button>
      </div>
    </div>
  </div>

  <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-6">

    <!-- Left Panel: 360 Viewer Placeholder -->
    <div class="lg:col-span-2 relative aspect-video bg-white/80 dark:bg-gray-800/80 rounded-xl shadow-xl overflow-hidden border border-blue-200 dark:border-gray-700 group">
      <img class="w-full h-full object-cover" src="https://picsum.photos/1200/800?random=1" alt="360 Degree View Placeholder">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100/50 via-blue-200/50 to-indigo-200/50 dark:from-gray-700/50 dark:via-gray-800/50 dark:to-gray-900/50 opacity-90"></div>

      <!-- Artistic Overlay -->
      <div class="absolute inset-0 pointer-events-none opacity-50 dark:opacity-30" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\' preserveAspectRatio=\'none\'><rect x=\'0\' y=\'0\' width=\'100\' height=\'100\' fill=\'none\'/><path d=\'M0,50 C25,25 75,75 100,50 L100,0 L0,0 Z\' fill=\'%23add8e6\'/><path d=\'M0,50 C25,75 75,25 100,50 L100,100 L0,100 Z\' fill=\'%2387cefa\'/></svg>'); background-size: 100% 100%;"></div>

      <div class="absolute inset-0 flex flex-col items-center justify-center p-4">
        <h2 class="text-4xl md:text-5xl lg:text-6xl font-black text-blue-900 dark:text-blue-100 drop-shadow-lg text-center leading-snug tracking-tight mb-4 group-hover:scale-105 transition duration-300 ease-out">
          Immersive 360° Tour
        </h2>
        <p class="text-xl md:text-2xl text-blue-800 dark:text-blue-200 text-center max-w-lg mb-8 drop-shadow-md group-hover:translate-y-1 transition duration-300 ease-out">
          Click to activate the interactive experience.
        </p>
        <button class="relative px-8 py-3 bg-blue-700 text-white text-lg font-semibold rounded-full shadow-2xl hover:bg-blue-800 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 overflow-hidden group">
          <span class="absolute inset-0 bg-gradient-to-r from-blue-500 to-indigo-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <span class="relative z-10 flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
            </svg>
            Launch 360° Viewer
          </span>
        </button>
      </div>
    </div>

    <!-- Right Panel: Controls & Information -->
    <div class="flex flex-col space-y-6">

      <!-- Hotspot Navigation -->
      <div class="bg-white/80 dark:bg-gray-800/80 p-6 rounded-xl shadow-lg border border-blue-200 dark:border-gray-700">
        <h3 class="text-xl font-bold text-blue-800 dark:text-blue-300 mb-4">Navigate Hotspots</h3>
        <div class="grid grid-cols-2 lg:grid-cols-3 gap-3">
          <button class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 dark:bg-gray-700 dark:text-blue-200 dark:hover:bg-gray-900 transition duration-200 ease-in-out text-sm font-medium shadow-sm hover:shadow-md">
            Lobby
          </button>
          <button class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 dark:bg-gray-700 dark:text-blue-200 dark:hover:bg-gray-900 transition duration-200 ease-in-out text-sm font-medium shadow-sm hover:shadow-md">
            Conference Room
          </button>
          <button class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 dark:bg-gray-700 dark:text-blue-200 dark:hover:bg-gray-900 transition duration-200 ease-in-out text-sm font-medium shadow-sm hover:shadow-md">
            Office Desk Area
          </button>
          <button class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 dark:bg-gray-700 dark:text-blue-200 dark:hover:bg-gray-900 transition duration-200 ease-in-out text-sm font-medium shadow-sm hover:shadow-md">
            Breakroom
          </button>
          <button class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 dark:bg-gray-700 dark:text-blue-200 dark:hover:bg-gray-900 transition duration-200 ease-in-out text-sm font-medium shadow-sm hover:shadow-md">
            Reception
          </button>
        </div>
      </div>

      <!-- Interactive Controls -->
      <div class="bg-white/80 dark:bg-gray-800/80 p-6 rounded-xl shadow-lg border border-blue-200 dark:border-gray-700">
        <h3 class="text-xl font-bold text-blue-800 dark:text-blue-300 mb-4">Viewer Controls</h3>
        <div class="grid grid-cols-2 gap-4">
          <button class="flex items-center justify-center px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200 ease-in-out shadow-md focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
            </svg>
            Zoom In
          </button>
          <button class="flex items-center justify-center px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200 ease-in-out shadow-md focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7" />
            </svg>
            Zoom Out
          </button>
          <button class="flex items-center justify-center px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200 ease-in-out shadow-md focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 0h-4m4 0l-5-5" />
            </svg>
            Full Screen
          </button>
          <button class="flex items-center justify-center px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200 ease-in-out shadow-md focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
            Reset View
          </button>
        </div>
      </div>

      <!-- Additional Info/Testimonial -->
      <div class="bg-white/80 dark:bg-gray-800/80 p-6 rounded-xl shadow-lg border border-blue-200 dark:border-gray-700">
        <h3 class="text-xl font-bold text-blue-800 dark:text-blue-300 mb-4">What Our Clients Say</h3>
        <div class="flex items-start">
          <img class="w-16 h-16 rounded-full mr-4 object-cover border-2 border-blue-300 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Client Avatar">
          <div>
            <p class="text-blue-900 dark:text-blue-100 italic mb-2">"The 360° tour was incredibly helpful in visualizing the space before my booking. Highly recommend!"</p>
            <p class="text-blue-700 dark:text-blue-300 font-semibold">Jane Doe, satisfied client</p>
          </div>
        </div>
      </div>

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

Brutalist_ProgressBar

A high-contrast, brutalist-style progress bar component suitable for marketplace platforms, featuring bold colors and simple layout, with full responsiveness and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-zinc-900 min-h-screen flex items-center justify-center font-mono">
  <div class="w-full max-w-xl border-4 border-black dark:border-white shadow-xl dark:shadow-none bg-white dark:bg-black p-4 sm:p-6 md:p-8 relative overflow-hidden">
    
    <!-- Top-left overlay 'GLITCH' effect -->
    <div class="absolute -top-2 -left-2 text-6xl md:text-8xl font-black text-red-500 opacity-20 transform -rotate-12 select-none pointer-events-none z-0 hidden sm:block">
      GLITCH
    </div>

    <h2 class="text-2xl sm:text-3xl md:text-4xl font-black text-black dark:text-white mb-6 uppercase tracking-tighter relative z-10">
      Order Progress <span class="text-red-600 dark:text-yellow-400">STATUS</span>
    </h2>

    <div class="mb-8 relative z-10">
      <p class="text-lg sm:text-xl font-bold text-black dark:text-white mb-2 uppercase">
        Shipment: <span class="text-red-600 dark:text-yellow-400">75%</span> Complete
      </p>
      <div class="w-full h-8 sm:h-10 bg-gray-300 dark:bg-zinc-700 border-4 border-black dark:border-white relative overflow-hidden">
        <!-- Progress bar fill -->
        <div class="h-full bg-red-600 dark:bg-yellow-400" style="width: 75%;">
          <div class="absolute inset-0 bg-gradient-to-r from-transparent via-black/10 dark:via-white/10 to-transparent animate-pulse"></div>
        </div>

        <!-- Glitch line effect - CSS animated, but here as classes with high contrast -->
        <div class="absolute inset-0 border-x-4 border-red-800 dark:border-yellow-600 opacity-25 animate-glitch-line-1" style="animation-duration: 2s;"></div>
        <div class="absolute inset-0 border-x-4 border-black dark:border-white opacity-25 animate-glitch-line-2" style="animation-duration: 3s;"></div>
      </div>
      <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 mt-2 font-bold">Next step: Packaging (Expected today)</p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 relative z-10">
      <div class="p-4 border-4 border-black dark:border-white dark:bg-zinc-800 bg-gray-200">
        <h3 class="text-xl font-bold text-black dark:text-white mb-2 uppercase">Vendor A</h3>
        <div class="w-full h-6 bg-gray-300 dark:bg-zinc-700 border-2 border-black dark:border-white relative">
          <div class="h-full bg-blue-600 dark:bg-green-400" style="width: 90%;"></div>
        </div>
        <p class="text-sm text-gray-700 dark:text-gray-300 mt-1">Items Shipped: 90%</p>
      </div>

      <div class="p-4 border-4 border-black dark:border-white dark:bg-zinc-800 bg-gray-200">
        <h3 class="text-xl font-bold text-black dark:text-white mb-2 uppercase">Vendor B</h3>
        <div class="w-full h-6 bg-gray-300 dark:bg-zinc-700 border-2 border-black dark:border-white relative">
          <div class="h-full bg-purple-600 dark:bg-cyan-400" style="width: 40%;"></div>
        </div>
        <p class="text-sm text-gray-700 dark:text-gray-300 mt-1">Items Shipped: 40%</p>
      </div>
    </div>

    <!-- Bottom-right overlay 'VOID' effect -->
    <div class="absolute -bottom-2 -right-2 text-6xl md:text-8xl font-black text-black dark:text-gray-700 opacity-10 transform rotate-12 select-none pointer-events-none z-0 hidden sm:block">
      VOID
    </div>

  </div>

  <style>
    /* Basic keyframes for the glitch lines, adjust values for more or less chaos */
    @keyframes glitch-line-1 {
      0%, 100% { transform: translateY(0); opacity: 0.25; }
      20% { transform: translateY(5px); opacity: 0.5; }
      40% { transform: translateY(-5px); opacity: 0.1; }
      60% { transform: translateY(3px); opacity: 0.4; }
      80% { transform: translateY(-3px); opacity: 0.2; }
    }

    @keyframes glitch-line-2 {
      0%, 100% { transform: translateY(0); opacity: 0.25; }
      15% { transform: translateY(-7px); opacity: 0.3; }
      35% { transform: translateY(7px); opacity: 0.15; }
      55% { transform: translateY(-2px); opacity: 0.4; }
      75% { transform: translateY(4px); opacity: 0.2; }
    }

    .animate-glitch-line-1 { animation: glitch-line-1 2.5s infinite step-end; }
    .animate-glitch-line-2 { animation: glitch-line-2 3s infinite step-end; }
  </style>
</div>

Bauhaus_Autumn_Tooltip_Component

A Bauhaus-inspired tooltip component with an autumn color scheme, designed for fashion and beauty brands. Features a functional geometric design, responsiveness, and dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-orange-50 dark:bg-gray-900 p-4 font-sans">
  <div class="relative group max-w-sm">
    <button class="px-6 py-3 bg-red-800 text-white font-bold uppercase tracking-wider text-sm rounded-none shadow-lg transform transition duration-300 ease-in-out hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-75 dark:bg-red-900 dark:hover:bg-red-800">
      Hover for Details
    </button>

    <div class="absolute left-1/2 -translate-x-1/2 bottom-full mb-4 w-64 p-4 
                bg-yellow-800 dark:bg-gray-800 
                text-white dark:text-gray-200 
                border-4 border-amber-900 dark:border-gray-700 
                opacity-0 invisible group-hover:opacity-100 group-hover:visible 
                transition-opacity duration-300 ease-in-out 
                group-hover:translate-y-0 transform translate-y-4
                shadow-xl z-10 
                origin-bottom 
                before:content-[''] before:absolute before:left-1/2 before:-translate-x-1/2 before:top-full before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-t-[10px] before:border-t-yellow-800 dark:before:border-t-gray-800">
      <h3 class="text-lg font-extrabold mb-2 uppercase tracking-wide text-amber-100 dark:text-gray-100">Luxury Serum X</h3>
      <p class="text-sm leading-relaxed mb-3 text-amber-200 dark:text-gray-300">
        Unlock radiant skin with our concentrated formula. Infused with natural extracts.
      </p>
      <div class="flex items-center space-x-2 mb-3">
        <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Model" class="w-8 h-8 rounded-none border border-amber-600 dark:border-gray-600 object-cover">
        <span class="text-xs font-semibold text-amber-300 dark:text-gray-400">A favorite of beauty influencers!</span>
      </div>
      <a href="#" class="inline-block px-4 py-2 bg-amber-900 text-amber-100 font-bold text-xs uppercase tracking-wider hover:bg-amber-700 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-200">
        Shop Now
      </a>
    </div>
  </div>
</div>

Retro_Vintage_Sunset_Carousel_Slider_Component

A complex, responsive carousel slider component with a retro/vintage aesthetic, warm sunset color scheme, designed for dashboard use cases. Includes navigation arrows, dots, and dark mode support.

Open Preview

                <div class="relative w-full max-w-7xl mx-auto py-8 px-4 font-mono dark:bg-gray-900 bg-gradient-to-br from-yellow-100 via-orange-200 to-red-100 rounded-lg shadow-xl dark:shadow-2xl dark:shadow-orange-900 overflow-hidden">
  <h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center mb-10 tracking-wider uppercase text-red-800 dark:text-orange-300 drop-shadow-lg leading-tight">
    <span class="block">Data Flux</span>
    <span class="block text-2xl md:text-3xl text-orange-600 dark:text-yellow-500 normal-case">Analysis Center</span>
  </h2>

  <div class="relative w-full overflow-hidden group">
    <!-- Carousel Wrapper -->
    <div class="flex transition-transform duration-700 ease-in-out" style="transform: translateX(0%);">
      <!-- Slide 1 -->
      <div class="w-full flex-shrink-0 p-4 md:p-8 lg:p-12 bg-yellow-50 dark:bg-gray-800 rounded-xl shadow-inner dark:shadow-orange-900/50 border-4 border-dashed border-red-300 dark:border-orange-700/70">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-orange-200 dark:border-gray-600 transform hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=1" alt="Chart 1" class="w-full h-40 object-cover rounded mb-4 border-2 border-orange-300 dark:border-orange-600">
            <h3 class="text-2xl font-bold text-orange-700 dark:text-orange-300 mb-2">Sales Overview</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Quarterly sales performance with year-over-year comparison. Up 12% from last quarter.</p>
            <span class="inline-block bg-teal-400 dark:bg-teal-700 text-white text-xs px-3 py-1 rounded-full mt-3 font-semibold">+12% Growth</span>
          </div>
          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-orange-200 dark:border-gray-600 transform hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=2" alt="Chart 2" class="w-full h-40 object-cover rounded mb-4 border-2 border-orange-300 dark:border-orange-600">
            <h3 class="text-2xl font-bold text-orange-700 dark:text-orange-300 mb-2">User Activity</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Daily unique visitors and engagement rates. Hovered around 1.5M average.</p>
            <span class="inline-block bg-blue-400 dark:bg-blue-700 text-white text-xs px-3 py-1 rounded-full mt-3 font-semibold">1.5M Users</span>
          </div>
          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-orange-200 dark:border-gray-600 transform hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=3" alt="Chart 3" class="w-full h-40 object-cover rounded mb-4 border-2 border-orange-300 dark:border-orange-600">
            <h3 class="text-2xl font-bold text-orange-700 dark:text-orange-300 mb-2">Inventory Status</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Current stock levels and reorder points for key products. Stock levels critical for item C.</p>
            <span class="inline-block bg-red-400 dark:bg-red-700 text-white text-xs px-3 py-1 rounded-full mt-3 font-semibold">Critical Stock</span>
          </div>
        </div>
      </div>

      <!-- Slide 2 -->
      <div class="w-full flex-shrink-0 p-4 md:p-8 lg:p-12 bg-yellow-50 dark:bg-gray-800 rounded-xl shadow-inner dark:shadow-orange-900/50 border-4 border-dashed border-red-300 dark:border-orange-700/70">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-orange-200 dark:border-gray-600 transform hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=4" alt="Chart 4" class="w-full h-40 object-cover rounded mb-4 border-2 border-orange-300 dark:border-orange-600">
            <h3 class="text-2xl font-bold text-orange-700 dark:text-orange-300 mb-2">Customer Feedback</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Sentiment analysis from recent surveys. Overall positive, minor issues reported.</p>
            <span class="inline-block bg-green-400 dark:bg-green-700 text-white text-xs px-3 py-1 rounded-full mt-3 font-semibold">92% Positive</span>
          </div>
          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-orange-200 dark:border-gray-600 transform hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=5" alt="Chart 5" class="w-full h-40 object-cover rounded mb-4 border-2 border-orange-300 dark:border-orange-600">
            <h3 class="text-2xl font-bold text-orange-700 dark:text-orange-300 mb-2">Website Traffic</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Geographic distribution of website visitors. Peak traffic from North America.</p>
            <span class="inline-block bg-purple-400 dark:bg-purple-700 text-white text-xs px-3 py-1 rounded-full mt-3 font-semibold">Global Reach</span>
          </div>
          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-orange-200 dark:border-gray-600 transform hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=6" alt="Chart 6" class="w-full h-40 object-cover rounded mb-4 border-2 border-orange-300 dark:border-orange-600">
            <h3 class="text-2xl font-bold text-orange-700 dark:text-orange-300 mb-2">Team Performance</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Average task completion time per team. Team Alpha leading with efficiency.</p>
            <span class="inline-block bg-indigo-400 dark:bg-indigo-700 text-white text-xs px-3 py-1 rounded-full mt-3 font-semibold">Team Alpha</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Navigation Buttons - Hidden by default, shown on hover/focus -->
    <button aria-label="Previous slide" class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-gradient-to-r from-red-600 to-orange-500 dark:from-orange-700 dark:to-orange-500 text-white p-3 rounded-full shadow-lg opacity-80 hover:opacity-100 transition-opacity duration-300 z-10 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 border-2 border-white dark:border-gray-900 group-hover:opacity-100 lg:scale-125">
      <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M15 19l-7-7 7-7"></path></svg>
    </button>
    <button aria-label="Next slide" class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-gradient-to-r from-orange-500 to-red-600 dark:from-orange-500 dark:to-orange-700 text-white p-3 rounded-full shadow-lg opacity-80 hover:opacity-100 transition-opacity duration-300 z-10 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 border-2 border-white dark:border-gray-900 group-hover:opacity-100 lg:scale-125">
      <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7"></path></svg>
    </button>
  </div>

  <!-- Pagination Dots -->
  <div class="flex justify-center items-center space-x-3 mt-8">
    <button aria-label="Go to slide 1" class="h-4 w-4 rounded-full bg-red-500 dark:bg-orange-400 border-2 border-white dark:border-gray-900 shadow-md focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 transition-all duration-300 transform hover:scale-125 focus:scale-125"></button>
    <button aria-label="Go to slide 2" class="h-3 w-3 rounded-full bg-orange-400 dark:bg-red-500 border-2 border-white dark:border-gray-900 shadow-md focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 transition-all duration-300 transform hover:scale-125 focus:scale-125"></button>
  </div>

  <!-- Retro Footer Accent -->
  <div class="mt-12 text-center text-orange-700 dark:text-orange-300 text-sm opacity-75">
    <p>&copy; 1988 - <span class="font-bold">ANALOG ANALYTICS CORP.</span> - All Rights Reserved</p>
    <p class="mt-2 text-xs">SYSTEM STATUS: <span class="text-lime-500 dark:text-lime-400">OPERATIONAL</span></p>
  </div>

  <!-- Retro Scanline Overlay (Visual only, no interaction) -->
  <div class="pointer-events-none absolute inset-0 z-20 opacity-5 dark:opacity-10" style="background: repeating-linear-gradient(rgba(0,0,0,0) 0px, rgba(0,0,0,.05) 1px, rgba(0,0,0,0) 2px);">
  </div>

  <!-- Retro Vignette Overlay -->
  <div class="pointer-events-none absolute inset-0 z-20" style="box-shadow: inset 0 0 100px rgba(0,0,0,.4);">
  </div>
</div>

Retro Gaming Reaction Buttons

A complex, retro-themed reaction button component for gaming websites, featuring 'like' and other reaction types with counts, designed with autumn colors and full responsiveness, including dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-amber-200 to-amber-500 dark:from-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-['Press_Start_2P',_cursive] tracking-wide">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-gradient-to-br from-red-800 to-red-900 border-4 border-solid border-red-950 dark:from-gray-700 dark:to-gray-900 dark:border-gray-950 rounded-lg p-3 sm:p-4 md:p-6 shadow-2xl transform rotate-0 hover:rotate-1 transition-all duration-300 ease-in-out relative overflow-hidden">
    <!-- Scanline Overlay for Retro Effect -->
    <div class="absolute inset-0 z-10 pointer-events-none opacity-20 dark:opacity-10">
      <div class="w-full h-full bg-repeat-y bg-[length:100%_4px] bg-[url('data:image/svg+xml;base264,PHN2ZyB2aWQ9J0xheWVyXzEnIGRhdGEtbmFtZT0nTGF5ZXIgMScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB2aWV3Qm94PScwIDAgNCA0Jz48ZGVmcz48c3R5bGU+LmNscy0xLHtmaWxsOm5vbmU7c3Ryb2tlOiNGRkY7c3Ryb2tlLXdpZHRoOjEuNjFweDtvcGFjaXR5OjAuNTA7fS5jbHMtMntmaWxsOiNGRkY7fTwvc3R5bGU+PC9kZWZzPjxyZWN0IGNsYXNzPSJjbHMtMSIgeD0iMC42NyIgYz0iMC42NyIgd2lkdGhcdX0iMy44OCIgaGVpZ2h0PSIyLjY2Ii8-PHJlY3QgY2xhc3M9ImNscy0yIiB5PSIyLjI4IiB3aWR0aD0iNC4xIiBoZWlnaHQ9IjEuMDUiLz48L3N2Zz4=')] bg-white"></div>
    </div>

    <div class="relative z-20">
      <div class="text-center mb-4 md:mb-6">
        <h2 class="text-xl sm:text-2xl md:text-3xl lg:text-4xl text-amber-300 dark:text-orange-400 mb-2 drop-shadow-[0_0_8px_rgba(255,200,0,0.8)] dark:drop-shadow-[0_0_8px_rgba(255,165,0,0.8)]">GAME OVER? NAY!</h2>
        <p class="text-sm sm:text-base text-amber-100 dark:text-gray-300">Rate this 'EPIC' moment!</p>
      </div>

      <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 md:gap-4 lg:gap-5">
        <!-- Like Button -->
        <button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
          <span class="block text-3xl sm:text-4xl mb-1 group-hover:animate-bounce-y drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">👍</span>
          <span class="block">Like</span>
          <span class="text-xs sm:text-sm mt-1 text-amber-50">1.2K</span>
        </button>

        <!-- Epic Button -->
        <button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
          <span class="block text-3xl sm:text-4xl mb-1 group-hover:rotate-12 group-hover:scale-110 drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">🔥</span>
          <span class="block">Epic</span>
          <span class="text-xs sm:text-sm mt-1 text-amber-50">789</span>
        </button>

        <!-- LOL Button -->
        <button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
          <span class="block text-3xl sm:text-4xl mb-1 group-hover:animate-spin-slow drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">😂</span>
          <span class="block">LOL</span>
          <span class="text-xs sm:text-sm mt-1 text-amber-50">543</span>
        </button>

        <!-- Sad Button -->
        <button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
          <span class="block text-3xl sm:text-4xl mb-1 group-hover:animate-shake drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">😭</span>
          <span class="block">oof</span>
          <span class="text-xs sm:text-sm mt-1 text-amber-50">210</span>
        </button>

        <!-- Mind Blown Button -->
        <button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
          <span class="block text-3xl sm:text-4xl mb-1 group-hover:scale-125 drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">🤯</span>
          <span class="block">WTF!</span>
          <span class="text-xs sm:text-sm mt-1 text-amber-50">99</span>
        </button>

        <!-- GG Button -->
        <button class="flex flex-col items-center justify-center p-2 sm:p-3 bg-[#9b3a0f] dark:bg-red-800 rounded-md border-b-4 border-r-2 border-[#6f290b] dark:border-red-950 text-amber-200 dark:text-amber-100 font-bold uppercase text-xs sm:text-sm md:text-base shadow-xl transform active:translate-y-1 active:border-b-0 transition-all duration-150 ease-in-out group">
          <span class="block text-3xl sm:text-4xl mb-1 group-hover:scale-110 drop-shadow-[0_0_6px_rgba(255,255,0,0.5)]">🏆</span>
          <span class="block">GG</span>
          <span class="text-xs sm:text-sm mt-1 text-amber-50">350</span>
        </button>
      </div>

      <div class="mt-6 md:mt-8 p-3 bg-red-900 border-2 border-red-950 dark:bg-gray-800 dark:border-gray-900 rounded-md shadow-inner text-amber-100 dark:text-gray-300">
        <p class="text-center text-sm md:text-base">Your reactions power up the leaderboard!</p>
      </div>
    </div>
  </div>

  <!-- Custom Animation Styles (would be in a <style> tag or CSS file) -->
  <style>
    @keyframes bounce-y {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-0.15em); }
    }
    .group-hover\:animate-bounce-y:hover {
      animation: bounce-y 0.6s ease-in-out infinite;
    }

    @keyframes spin-slow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .group-hover\:animate-spin-slow:hover {
      animation: spin-slow 2s linear infinite;
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-0.1em); }
      20%, 40%, 60%, 80% { transform: translateX(0.1em); }
    }
    .group-hover\:animate-shake:hover {
      animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    }

    /* To use 'Press Start 2P' font, link it from Google Fonts: */
    /* @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); */
    /* Then apply: font-family: 'Press Start 2P', cursive; */
  </style>
</div>

Media Components Component

A responsive media component for finance/banking interfaces, featuring clean design, blue tones, and dark mode support. Includes a main content area with image, title, description, and action button, along with a list of related articles or insights.

Open Preview

                <div class="font-sans antialiased bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-8 md:p-12 lg:p-16">

  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-850 shadow-xl rounded-lg overflow-hidden border border-blue-100 dark:border-blue-900">

    <!-- Header/Title Section -->
    <div class="p-6 sm:p-8 bg-gradient-to-r from-blue-700 to-blue-500 dark:from-blue-900 dark:to-blue-700 text-white">
      <h2 class="text-2xl sm:text-3xl font-bold mb-2">Latest Financial Insights</h2>
      <p class="text-blue-100 text-sm sm:text-base">Stay updated with market trends and expert analysis.</p>
    </div>

    <div class="flex flex-col md:flex-row">

      <!-- Main Content Area -->
      <div class="w-full md:w-2/3 p-6 sm:p-8">
        <h3 class="text-xl sm:text-2xl font-semibold text-blue-800 dark:text-blue-200 mb-4">Understanding Portfolio Diversification</h3>
        
        <div class="relative w-full h-48 sm:h-64 md:h-72 lg:h-80 mb-6 rounded-lg overflow-hidden shadow-md group">
          <img src="https://picsum.photos/1200/800?random=1" alt="Financial chart showing growth" class="w-full h-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-gray-900/0 to-gray-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <p class="absolute bottom-3 left-4 text-white text-xs sm:text-sm md:text-base opacity-0 group-hover:opacity-100 transition-opacity duration-300">Image source: Investing.com</p>
        </div>

        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          Diversifying your investment portfolio is a cornerstone of a sound financial strategy. By spreading investments across various asset classes, industries, and geographies, you can mitigate risks and potentially enhance returns over the long term. This strategy aims to balance risk and reward by investing in different kinds of assets.
        </p>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          A well-diversified portfolio helps protect against the volatility of any single investment. For instance, if one sector performs poorly, the impact on your overall portfolio is cushioned by the positive performance of other sectors. It’s not just about stocks and bonds; diversification also involves considering real estate, commodities, and alternative investments.
        </p>

        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-6">
          <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-blue-300 dark:border-blue-600">
          <span class="font-medium text-gray-600 dark:text-gray-300">John Doe</span>
          <span class="mx-2">•</span>
          <span>September 15, 2023</span>
          <span class="ml-auto text-blue-600 dark:text-blue-400 hover:underline cursor-pointer">#Investments</span>
        </div>

        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
          Read Full Article
          <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>

      <!-- Sidebar/Related Content -->
      <div class="w-full md:w-1/3 border-t md:border-t-0 md:border-l border-blue-100 dark:border-blue-900 p-6 sm:p-8 bg-blue-50 dark:bg-gray-800">
        <h4 class="text-lg sm:text-xl font-semibold mb-6 text-blue-700 dark:text-blue-300">More Insights</h4>

        <ul class="space-y-6">
          <!-- Related Article 1 -->
          <li>
            <a href="#" class="flex items-start group">
              <img src="https://picsum.photos/150/100?random=2" alt="Thumbnail of related article" class="w-24 h-16 object-cover rounded-md flex-shrink-0 mr-4 shadow-sm group-hover:shadow-md transition-shadow duration-200">
              <div>
                <p class="text-sm font-medium text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 transition-colors duration-200">The Future of Digital Banking</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">October 1, 2023</p>
              </div>
            </a>
          </li>
          <!-- Related Article 2 -->
          <li>
            <a href="#" class="flex items-start group">
              <img src="https://picsum.photos/150/100?random=3" alt="Thumbnail of related article" class="w-24 h-16 object-cover rounded-md flex-shrink-0 mr-4 shadow-sm group-hover:shadow-md transition-shadow duration-200">
              <div>
                <p class="text-sm font-medium text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 transition-colors duration-200">Navigating Cryptocurrency Volatility</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">September 28, 2023</p>
              </div>
            </a>
          </li>
          <!-- Related Article 3 -->
          <li>
            <a href="#" class="flex items-start group">
              <img src="https://picsum.photos/150/100?random=4" alt="Thumbnail of related article" class="w-24 h-16 object-cover rounded-md flex-shrink-0 mr-4 shadow-sm group-hover:shadow-md transition-shadow duration-200">
              <div>
                <p class="text-sm font-medium text-blue-600 dark:text-blue-400 group-hover:text-blue-800 dark:group-hover:text-blue-200 transition-colors duration-200">Smart Savings Strategies for Millennials</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">September 20, 2023</p>
              </div>
            </a>
          </li>
        </ul>

        <div class="mt-8">
          <h5 class="text-base font-semibold mb-3 text-blue-700 dark:text-blue-300">Subscribe to our Newsletter</h5>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Get weekly market updates directly to your inbox.</p>
          <form class="flex flex-col sm:flex-row gap-3">
            <input type="email" placeholder="Your Email Address" aria-label="Email address for newsletter" class="flex-grow px-4 py-2 rounded-md border border-blue-300 dark:border-blue-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            <button type="submit" class="px-5 py-2 rounded-md bg-blue-600 text-white font-medium hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
              Subscribe
            </button>
          </form>
        </div>
      </div>

    </div>

    <!-- Footer (optional, for component context) -->
    <div class="p-6 sm:p-8 bg-blue-700 dark:bg-gray-900 text-blue-200 text-center text-xs sm:text-sm">
      &copy; 2023 Financial Insights Inc. All rights reserved.
    </div>

  </div>

</div>

Retro Navigation Bar

A responsive, high-contrast retro/vintage navigation bar suitable for food/restaurant websites, featuring 80s/90s aesthetics and dark mode support.

Open Preview

                <nav class="bg-red-600 dark:bg-gray-900 border-b-8 border-yellow-400 dark:border-yellow-600 font-mono text-white p-4 shadow-xl z-50 relative">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-yellow-300 dark:text-yellow-400 leading-none tracking-tight transform -rotate-2 hover:rotate-0 transition-transform duration-300 ease-in-out">
      <span class="block">BURGER</span>
      <span class="block -mt-3 sm:-mt-4 lg:-mt-6 ml-4 text-white dark:text-gray-200 text-3xl sm:text-4xl lg:text-5xl">BLAST!</span>
    </a>

    <!-- Mobile Menu Button -->
    <div class="md:hidden flex items-center">
      <button id="menu-button" class="text-white focus:outline-none focus:ring-4 focus:ring-yellow-400 dark:focus:ring-yellow-600 p-2 rounded-lg bg-yellow-400 dark:bg-yellow-600 border-2 border-white transform hover:scale-105 transition-transform duration-200 ease-in-out">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-6 lg:space-x-8 text-2xl lg:text-3xl font-bold uppercase tracking-wider">
      <a href="#" class="relative group transition-all duration-200 ease-in-out">
        HOME
        <span class="absolute left-0 bottom-0 w-full h-1 bg-yellow-300 dark:bg-yellow-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="relative group transition-all duration-200 ease-in-out">
        MENU
        <span class="absolute left-0 bottom-0 w-full h-1 bg-yellow-300 dark:bg-yellow-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="relative group transition-all duration-200 ease-in-out">
        LOCATIONS
        <span class="absolute left-0 bottom-0 w-full h-1 bg-yellow-300 dark:bg-yellow-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="relative group transition-all duration-200 ease-in-out flex items-center space-x-2">
        CART
        <svg class="w-7 h-7" 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="bg-yellow-300 dark:bg-yellow-400 text-red-700 dark:text-gray-900 text-sm font-extrabold px-3 py-1 rounded-full absolute -top-2 -right-3 border-2 border-white dark:border-gray-900">3</span>
        <span class="absolute left-0 bottom-0 w-full h-1 bg-yellow-300 dark:bg-yellow-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
    </div>
  </div>

  <!-- Mobile Menu (initially hidden, shown with JS) -->
  <div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-red-600 dark:bg-gray-900 border-t-4 border-yellow-400 dark:border-yellow-600 pb-4 shadow-xl z-40">
    <div class="flex flex-col items-center space-y-4 text-2xl font-bold uppercase py-4">
      <a href="#" class="w-full text-center py-2 hover:bg-red-700 dark:hover:bg-gray-800 transition-colors duration-200 ease-in-out border-b border-red-700 dark:border-gray-800">HOME</a>
      <a href="#" class="w-full text-center py-2 hover:bg-red-700 dark:hover:bg-gray-800 transition-colors duration-200 ease-in-out border-b border-red-700 dark:border-gray-800">MENU</a>
      <a href="#" class="w-full text-center py-2 hover:bg-red-700 dark:hover:bg-gray-800 transition-colors duration-200 ease-in-out border-b border-red-700 dark:border-gray-800">LOCATIONS</a>
      <a href="#" class="w-full text-center py-2 hover:bg-red-700 dark:hover:bg-gray-800 transition-colors duration-200 ease-in-out flex items-center justify-center space-x-2">
        <span>CART</span>
        <svg class="w-7 h-7" 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="bg-yellow-300 dark:bg-yellow-400 text-red-700 dark:text-gray-900 text-sm font-extrabold px-3 py-1 rounded-full">3</span>
      </a>
    </div>
  </div>
</nav>

<!-- Simple JavaScript for mobile menu toggle -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const menuButton = document.getElementById('menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    menuButton.addEventListener('click', function () {
      mobileMenu.classList.toggle('hidden');
    });
  });
</script>

Two-Factor Authentication Component

A responsive two-factor authentication component with a 3D design aesthetic, muted color scheme, and dark mode support. It features input fields for a verification code and a resend option.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-xl shadow-2xl p-8 transform perspective-1000 rotate-x-6 rotate-y-3 transition-all duration-300 hover:rotate-x-0 hover:rotate-y-0 hover:shadow-3xl flex flex-col items-center border border-gray-200 dark:border-gray-600">
    <div class="bg-blue-200 dark:bg-blue-600 rounded-full p-4 mb-6 shadow-md transform translate-z-20">
      <svg class="w-12 h-12 text-blue-800 dark:text-blue-100" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v3h8z" />
      </svg>
    </div>
    <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-4 text-center transform translate-z-10">
      2-Step Verification
    </h2>
    <p class="text-sm text-gray-600 dark:text-gray-300 mb-6 text-center transform translate-z-5">
      Please enter the 6-digit code sent to your email address or phone number.
    </p>

    <div class="flex space-x-3 sm:space-x-4 mb-6 transform translate-z-10">
      <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
      <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
      <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
      <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
      <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
      <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-18 text-center text-3xl font-extrabold text-gray-800 dark:text-gray-100 bg-gray-50 dark:bg-gray-600 rounded-lg shadow-inner focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-200 transform hover:scale-105 border border-gray-200 dark:border-gray-500" pattern="[0-9]" inputmode="numeric" />
    </div>

    <button class="w-full py-3 px-6 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold rounded-lg shadow-lg transform translate-z-15 transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-gray-700 mb-4">
      Verify Code
    </button>

    <p class="text-sm text-gray-500 dark:text-gray-400 transform translate-z-5">
      Didn't receive the code? <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 font-medium transition-colors duration-200">Resend Code</a>
    </p>
  </div>
</div>

1 ... 70 71 72 73 74 ... 335

Search Components

Categories

All Components

Art Deco Real Estate Buttons Component

360_Viewer_Component_Watercolor_Corporate_Blues

Brutalist_ProgressBar

Tag Cloud Component

Bauhaus_Autumn_Tooltip_Component

Retro_Vintage_Sunset_Carousel_Slider_Component

Retro Gaming Reaction Buttons

Media Components Component

Retro Navigation Bar

Two-Factor Authentication Component