Search Components

All Components

Browse all available Tailwind CSS components

Neumorphic_Gaming_Social_Login_Component

A complex, responsive social login component in a neumorphic style with earth tones, designed for gaming websites. Includes multiple login options and dark mode support.

Open Preview

                <div class="min-h-screen bg-stone-200 dark:bg-stone-900 flex items-center justify-center p-4 sm:p-6 font-sans antialiased text-stone-800 dark:text-stone-300">
  <div class="w-full max-w-md p-6 sm:p-8 rounded-3xl bg-stone-200 dark:bg-stone-900 shadow-neu-light dark:shadow-neu-dark transition-all duration-300 relative overflow-hidden group">
    <div class="absolute inset-0 rounded-3xl bg-gradient-to-br from-stone-300/30 to-stone-100/30 dark:from-stone-800/30 dark:to-stone-700/30 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>

    <h2 class="text-3xl sm:text-4xl font-bold text-center mb-6 sm:mb-8 text-stone-700 dark:text-stone-200 drop-shadow-sm">
      <span class="block">Player Login</span>
      <span class="block text-sm sm:text-base font-normal mt-1 opacity-70">Join the Arena!</span>
    </h2>

    <div class="space-y-4 sm:space-y-5 mb-6">
      <button class="w-full py-3 px-6 rounded-xl flex items-center justify-center space-x-3 text-lg font-semibold bg-stone-200 dark:bg-stone-900 shadow-neu-inner-light dark:shadow-neu-inner-dark hover:shadow-neu-light hover:dark:shadow-neu-dark active:shadow-neu-inner-light active:dark:shadow-neu-inner-dark transition-all duration-300 text-stone-700 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.172 8.413 9.879v-6.988H7.078V12h2.335V9.75c0-2.322 1.41-3.592 3.49-3.592 1.002 0 1.98.074 1.98.074v2.16H13.6c-1.132 0-1.49.529-1.49 1.43v1.725h3.9L16 12h-3.328v6.988C18.343 21.172 22 16.991 22 12z" />
        </svg>
        <span>Login with Facebook</span>
      </button>

      <button class="w-full py-3 px-6 rounded-xl flex items-center justify-center space-x-3 text-lg font-semibold bg-stone-200 dark:bg-stone-900 shadow-neu-inner-light dark:shadow-neu-inner-dark hover:shadow-neu-light hover:dark:shadow-neu-dark active:shadow-neu-inner-light active:dark:shadow-neu-inner-dark transition-all duration-300 text-stone-700 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.24 10.29c-.35-.2-.79-.34-1.24-.34-1.16 0-2.22.61-2.92 1.63V7.9H5.06v8.1h2.92v-2.02c.7-.91 1.76-1.63 2.92-1.63 1.08 0 2.05.35 2.87 1.01 1.07.82 1.73 2.1 1.73 3.61c0 1.5-.66 2.79-1.73 3.61-.82.66-1.79 1.01-2.87 1.01-1.16 0-2.22-.61-2.92-1.63v2.02H5.06v-8.1h2.92V9.92c-.7.91-1.76 1.63-2.92 1.63-1.08 0-2.05-.35-2.87-1.01-1.07-.82-1.73-2.1-1.73-3.61c0-1.5.66-2.79 1.73-3.61.82-.66 1.79-1.01 2.87-1.01 1.16 0 2.22.61 2.92 1.63V4.9H5.06v8.1h2.92V7.9H5.06V4.9h2.92V2.9c0-1.72 1.34-3.12 3.01-3.12 1.34 0 2.45.69 3.05 1.76L16 2.6c-.6-.73-1.46-1.2-2.45-1.2-1.67 0-3.01 1.41-3.01 3.12z" />
        </svg>
        <span>Login with Google</span>
      </button>

      <button class="w-full py-3 px-6 rounded-xl flex items-center justify-center space-x-3 text-lg font-semibold bg-stone-200 dark:bg-stone-900 shadow-neu-inner-light dark:shadow-neu-inner-dark hover:shadow-neu-light hover:dark:shadow-neu-dark active:shadow-neu-inner-light active:dark:shadow-neu-inner-dark transition-all duration-300 text-stone-700 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M20.21 16.94c.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0 0 0 0 0 0 0 .0-.0 0-.0 0-.0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .0-.0.0-.0.0-.0.0-.0.0-.0V14.1c0 0 0-.0-.0-.0c0-.0-.0-.0-.0-.0c.0-.0-.0-.0-.0-.0.0-.0.0-.0-.0-.0.0-.0-.0-.0-.0-.0.0-.0-.0-.0-.0-.0.0-.0-.0-.0-.0-.0.0-.0-.0-.0-.0-.0.0-.0.0-.0.0-.0.0-.0.0-.0.0-.0V14.1zM12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zM12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zM12.91 16.974c-.032-.012-.064-.025-.096-.038-.035-.014-.07-.028-.105-.043-.03-.012-.06-.024-.09-.037-.035-.014-.07-.029-.105-.043-.033-.013-.066-.026-.099-.04-.04-.016-.08-.032-.12-.048-.034-.014-.068-.027-.101-.041-.04-.016-.079-.032-.119-.048-.034-.013-.069-.027-.103-.041-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.034-.013-.069-.027-.103-.041-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.018-.007-.036-.014-.054-.022-.02-.008-.04-.015-.06-.023C6.014 16.96 6.012 16.96 6.012 16.96h-.002c-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0 0 0 0 0 0 0 .0 0 .0-.0 .0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0C5.992 16.94 5.992 16.94 5.992 16.94h-.002c-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0 0 0 0 0 0 0 .0 0 .0-.0 .0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0S6.01 16.94 6.01 16.94z" />
        </svg>
        <span>Login with Apple</span>
      </button>
    </div>

    <div class="relative flex py-5 items-center mb-6">
      <div class="flex-grow border-t border-stone-400 dark:border-stone-700"></div>
      <span class="flex-shrink mx-4 text-stone-500 dark:text-stone-400 text-sm">Or use your Player ID</span>
      <div class="flex-grow border-t border-stone-400 dark:border-stone-700"></div>
    </div>

    <form class="space-y-5">
      <div class="relative">
        <input
          type="text"
          id="username"
          name="username"
          placeholder=""
          class="peer w-full px-4 py-3 rounded-xl bg-stone-200 dark:bg-stone-900 border border-transparent shadow-neu-inner-light dark:shadow-neu-inner-dark focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900 transition-all duration-300 text-stone-800 dark:text-stone-300 placeholder-transparent"
          autocomplete="username"
        />
        <label
          for="username"
          class="absolute left-4 top-1/2 -translate-y-1/2 text-stone-500 dark:text-stone-400 text-base transition-all duration-300 ease-in-out
                   peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-stone-500 peer-placeholder-shown:dark:text-stone-400 peer-placeholder-shown:text-base
                   peer-focus:top-3 peer-focus:-translate-y-full peer-focus:text-xs peer-focus:text-amber-600 dark:peer-focus:text-amber-400"
        >
          Player ID or Email
        </label>
      </div>

      <div class="relative">
        <input
          type="password"
          id="password"
          name="password"
          placeholder=""
          class="peer w-full px-4 py-3 rounded-xl bg-stone-200 dark:bg-stone-900 border border-transparent shadow-neu-inner-light dark:shadow-neu-inner-dark focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900 transition-all duration-300 text-stone-800 dark:text-stone-300 placeholder-transparent"
          autocomplete="current-password"
        />
        <label
          for="password"
          class="absolute left-4 top-1/2 -translate-y-1/2 text-stone-500 dark:text-stone-400 text-base transition-all duration-300 ease-in-out
                   peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-stone-500 peer-placeholder-shown:dark:text-stone-400 peer-placeholder-shown:text-base
                   peer-focus:top-3 peer-focus:-translate-y-full peer-focus:text-xs peer-focus:text-amber-600 dark:peer-focus:text-amber-400"
        >
          Password
        </label>
      </div>

      <div class="flex items-center justify-between text-sm sm:text-base">
        <div class="flex items-center">
          <input
            type="checkbox"
            id="remember-me"
            name="remember-me"
            class="h-4 w-4 text-amber-600 dark:text-amber-500 rounded border-stone-300 dark:border-stone-700 bg-stone-300 dark:bg-stone-700 focus:ring-amber-500 dark:focus:ring-amber-600 mr-2 shadow-neu-inner-light dark:shadow-neu-inner-dark transform scale-90 checked:scale-100 transition-all duration-200 cursor-pointer"
          />
          <label for="remember-me" class="text-stone-600 dark:text-stone-400 select-none">Remember me</label>
        </div>
        <a href="#" class="text-amber-600 dark:text-amber-500 hover:text-amber-700 dark:hover:text-amber-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900 rounded-md py-0.5 px-1 -mx-1 -my-0.5">Forgot Password?</a>
      </div>

      <button type="submit" class="w-full py-3 px-6 rounded-xl font-bold text-lg bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600 text-white shadow-lg shadow-amber-500/50 dark:shadow-amber-700/50 hover:shadow-xl hover:shadow-amber-600/60 dark:hover:shadow-amber-800/60 transition-all duration-300 transform active:scale-98 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900">
        Login
      </button>
    </form>

    <p class="mt-8 text-center text-stone-600 dark:text-stone-400 text-sm sm:text-base">
      Don't have an account? 
      <a href="#" class="text-amber-600 dark:text-amber-500 hover:text-amber-700 dark:hover:text-amber-400 font-semibold transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900 rounded-md py-0.5 px-1 -mx-1 -my-0.5">Sign Up</a>
    </p>

    <!-- Decorative elements from Neumorphism principles -->
    <div class="absolute -top-8 -left-8 w-24 h-24 rounded-full bg-stone-300 dark:bg-stone-800 shadow-xl opacity-30 blur-md group-hover:top-4 group-hover:left-4 transition-all duration-700 pointer-events-none"></div>
    <div class="absolute -bottom-8 -right-8 w-32 h-32 rounded-full bg-amber-300 dark:bg-amber-800 shadow-xl opacity-20 blur-md group-hover:bottom-4 group-hover:right-4 transition-all duration-700 delay-100 pointer-events-none"></div>

  </div>
</div>

<style>
  /* Custom CSS for Neumorphism shadows */
  .shadow-neu-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neu-light {
    box-shadow: none; /* Disable light shadow in dark mode */
  }
  .shadow-neu-dark {
    box-shadow: none; /* Disable dark shadow in light mode */
  }
  .dark .shadow-neu-dark {
    box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #2a2a2a;
  }

  .shadow-neu-inner-light {
    box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-neu-inner-light {
    box-shadow: none;
  }
  .shadow-neu-inner-dark {
    box-shadow: none;
  }
  .dark .shadow-neu-inner-dark {
    box-shadow: inset 5px 5px 10px #1c1c1c, inset -5px -5px 10px #2a2a2a;
  }

  /* Animated Label for input fields */
  .group.relative input:placeholder-shown + label,
  .peer:placeholder-shown + label {
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem; /* Base size */
    color: theme('colors.stone.500');
  }

  .dark .group.relative input:placeholder-shown + label,
  .dark .peer:placeholder-shown + label {
    color: theme('colors.stone.400');
  }

  .group.relative input:focus + label,
  .peer:focus + label {
    top: 0.75rem; /* 12px from top */
    transform: translateY(-100%);
    font-size: 0.75rem; /* text-xs */
    color: theme('colors.amber.600');
  }

  .dark .group.relative input:focus + label,
  .dark .peer:focus + label {
    color: theme('colors.amber.400');
  }

   .peer:focus ~ .text-stone-500 {
      color: theme('colors.amber.600'); /* Change label color on focus */
   }
   .dark .peer:focus ~ .text-stone-500 {
      color: theme('colors.amber.400');
   }
</style>

Retro Candy Table of Contents

A nostalgic retro-themed table of contents component with a candy-inspired color scheme, suitable for food and restaurant websites. Features a 'sticky' sidebar-like navigation with smooth scrolling indicators and dark mode support.

Open Preview

                <div class="font-sans bg-amber-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100 p-4 sm:p-6 md:p-8 relative overflow-x-hidden">

  <!-- Retro Border Top -->
  <div class="hidden md:block absolute top-0 left-0 w-full h-4 bg-gradient-to-r from-pink-400 via-purple-400 to-teal-400 dark:from-pink-600 dark:via-purple-600 dark:to-teal-600 shadow-lg z-10"></div>

  <div class="max-w-7xl mx-auto flex flex-col md:flex-row gap-8 lg:gap-12 relative z-20">

    <!-- Table of Contents Sidebar -->
    <nav class="md:w-1/4 lg:w-1/5 flex-shrink-0 relative">
      <div class="sticky top-8 lg:top-12 p-5 md:p-6 bg-gradient-to-br from-pink-200 to-purple-200 dark:from-pink-800 dark:to-purple-800 rounded-3xl shadow-xl border-4 border-pink-400 dark:border-pink-600 transform -rotate-1 skew-x-1 origin-top-left">
        <div class="relative p-2 md:p-3 bg-gradient-to-br from-yellow-100 to-green-100 dark:from-yellow-700 dark:to-green-700 rounded-2xl border-dashed border-2 border-green-500 dark:border-green-400">
          <h3 class="text-2xl lg:text-3xl font-extrabold text-purple-800 dark:text-yellow-100 mb-4 text-center font-serif tracking-wider transform rotate-1 scale-105">
            Sweet Eats Menu
          </h3>
          <ul class="space-y-3">
            <li>
              <a href="#appetizers" class="block text-lg lg:text-xl font-bold text-gray-700 dark:text-gray-200 hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200 py-1 px-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-yellow-600 transform hover:scale-105 hover:rotate-1 origin-left">
                <span class="mr-2 text-pink-500 text-2xl dark:text-pink-400">&#x2605;</span> Appetizers
              </a>
            </li>
            <li>
              <a href="#main-courses" class="block text-lg lg:text-xl font-bold text-gray-700 dark:text-gray-200 hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200 py-1 px-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-yellow-600 transform hover:scale-105 hover:rotate-1 origin-left">
                <span class="mr-2 text-pink-500 text-2xl dark:text-pink-400">&#x2600;</span> Main Courses
              </a>
            </li>
            <li>
              <a href="#desserts" class="block text-lg lg:text-xl font-bold text-gray-700 dark:text-gray-200 hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200 py-1 px-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-yellow-600 transform hover:scale-105 hover:rotate-1 origin-left">
                <span class="mr-2 text-pink-500 text-2xl dark:text-pink-400">&#x2764;</span> Desserts
              </a>
            </li>
            <li>
              <a href="#drinks" class="block text-lg lg:text-xl font-bold text-gray-700 dark:text-gray-200 hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200 py-1 px-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-yellow-600 transform hover:scale-105 hover:rotate-1 origin-left">
                <span class="mr-2 text-pink-500 text-2xl dark:text-pink-400">&#x2615;</span> Drinks
              </a>
            </li>
            <li>
              <a href="#specials" class="block text-lg lg:text-xl font-bold text-gray-700 dark:text-gray-200 hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200 py-1 px-3 rounded-lg hover:bg-yellow-200 dark:hover:bg-yellow-600 transform hover:scale-105 hover:rotate-1 origin-left">
                <span class="mr-2 text-pink-500 text-2xl dark:text-pink-400">&#x1F36C;</span> Chef's Specials
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Main Content Area -->
    <main class="md:flex-1 p-5 md:p-8 bg-gradient-to-br from-mint-green-100 to-blue-100 dark:from-mint-green-800 dark:to-blue-800 rounded-3xl shadow-2xl border-4 border-mint-green-400 dark:border-mint-green-600 transform rotate-1 skew-y-1 origin-top-right">
      <div class="relative bg-white dark:bg-gray-800 p-6 md:p-8 rounded-2xl shadow-inner border-dashed border-2 border-blue-500 dark:border-blue-400">

        <h2 id="appetizers" class="text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-100 mb-6 font-serif tracking-wide transform -rotate-1 origin-top-left">
          Appetizers <span class="text-pink-500 text-5xl dark:text-pink-400">&#x2605;</span>
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
          <div class="border-4 border-yellow-300 dark:border-yellow-500 rounded-xl p-4 bg-yellow-50 dark:bg-yellow-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=1" alt="Crispy Spring Rolls" class="rounded-lg mb-3 shadow-lg border-2 border-yellow-400 dark:border-yellow-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-yellow-200 mb-2">Crispy Spring Rolls</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">Golden fried vegetarian spring rolls served with sweet chili sauce. A classic!</p>
          </div>
          <div class="border-4 border-yellow-300 dark:border-yellow-500 rounded-xl p-4 bg-yellow-50 dark:bg-yellow-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=2" alt="Spicy Nacho Bites" class="rounded-lg mb-3 shadow-lg border-2 border-yellow-400 dark:border-yellow-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-yellow-200 mb-2">Spicy Nacho Bites</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">Miniature nacho bites loaded with jalapeños, cheddar, and guacamole.</p>
          </div>
        </div>

        <h2 id="main-courses" class="text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-100 mb-6 font-serif tracking-wide transform rotate-2 origin-top-right">
          Main Courses <span class="text-pink-500 text-5xl dark:text-pink-400">&#x2600;</span>
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
          <div class="border-4 border-lime-300 dark:border-lime-500 rounded-xl p-4 bg-lime-50 dark:bg-lime-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=3" alt="Mushroom & Truffle Pasta" class="rounded-lg mb-3 shadow-lg border-2 border-lime-400 dark:border-lime-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-lime-200 mb-2">Mushroom & Truffle Pasta</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">Homemade tagliatelle with wild mushrooms and a rich black truffle sauce.</p>
          </div>
          <div class="border-4 border-lime-300 dark:border-lime-500 rounded-xl p-4 bg-lime-50 dark:bg-lime-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=4" alt="Honey Glazed Salmon" class="rounded-lg mb-3 shadow-lg border-2 border-lime-400 dark:border-lime-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-lime-200 mb-2">Honey Glazed Salmon</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">Pan-seared salmon fillet with a sweet honey glaze, served with roasted vegetables.</p>
          </div>
        </div>

        <h2 id="desserts" class="text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-100 mb-6 font-serif tracking-wide transform -rotate-1 origin-bottom-left">
          Desserts <span class="text-pink-500 text-5xl dark:text-pink-400">&#x2764;</span>
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
          <div class="border-4 border-pink-300 dark:border-pink-500 rounded-xl p-4 bg-pink-50 dark:bg-pink-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=5" alt="Rainbow Swirl Cake" class="rounded-lg mb-3 shadow-lg border-2 border-pink-400 dark:border-pink-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-pink-200 mb-2">Rainbow Swirl Cake</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">Layers of vanilla cake with vibrant rainbow frosting. Pure joy!</p>
          </div>
          <div class="border-4 border-pink-300 dark:border-pink-500 rounded-xl p-4 bg-pink-50 dark:bg-pink-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=6" alt="Bubblegum Ice Cream" class="rounded-lg mb-3 shadow-lg border-2 border-pink-400 dark:border-pink-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-pink-200 mb-2">Bubblegum Ice Cream</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">Classic bubblegum flavored ice cream with real candy pieces. Nostalgia in a scoop!</p>
          </div>
        </div>

        <h2 id="drinks" class="text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-100 mb-6 font-serif tracking-wide transform rotate-2 origin-bottom-right">
          Drinks <span class="text-pink-500 text-5xl dark:text-pink-400">&#x2615;</span>
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
          <div class="border-4 border-teal-300 dark:border-teal-500 rounded-xl p-4 bg-teal-50 dark:bg-teal-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=7" alt="Retro Soda Floats" class="rounded-lg mb-3 shadow-lg border-2 border-teal-400 dark:border-teal-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-teal-200 mb-2">Retro Soda Floats</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">Your choice of classic soda topped with a generous scoop of vanilla ice cream.</p>
          </div>
          <div class="border-4 border-teal-300 dark:border-teal-500 rounded-xl p-4 bg-teal-50 dark:bg-teal-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=8" alt="Cotton Candy Milkshake" class="rounded-lg mb-3 shadow-lg border-2 border-teal-400 dark:border-teal-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-teal-200 mb-2">Cotton Candy Milkshake</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">A whimsical milkshake blend with real cotton candy swirls and sprinkles.</p>
          </div>
        </div>

        <h2 id="specials" class="text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-100 mb-6 font-serif tracking-wide transform -rotate-1 origin-top-left">
          Chef's Specials <span class="text-pink-500 text-5xl dark:text-pink-400">&#x1F36C;</span>
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="border-4 border-purple-300 dark:border-purple-500 rounded-xl p-4 bg-purple-50 dark:bg-purple-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=9" alt="Grandma's Meatloaf" class="rounded-lg mb-3 shadow-lg border-2 border-purple-400 dark:border-purple-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-purple-200 mb-2">Grandma's Meatloaf</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">A heartwarming classic, just like grandma used to make. Served with mashed potatoes.</p>
          </div>
          <div class="border-4 border-purple-300 dark:border-purple-500 rounded-xl p-4 bg-purple-50 dark:bg-purple-900 shadow-md transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/400/250?random=10" alt="Mystery Box Dessert" class="rounded-lg mb-3 shadow-lg border-2 border-purple-400 dark:border-purple-600">
            <h3 class="text-2xl font-bold text-purple-700 dark:text-purple-200 mb-2">Mystery Box Dessert</h3>
            <p class="text-lg text-gray-600 dark:text-gray-300">A surprise dessert creation from our chef, changes daily! Ask your server.</p>
          </div>
        </div>

      </div>
    </main>

  </div>

  <!-- Retro Border Bottom -->
  <div class="hidden md:block absolute bottom-0 right-0 w-full h-4 bg-gradient-to-l from-pink-400 via-purple-400 to-teal-400 dark:from-pink-600 dark:via-purple-600 dark:to-teal-600 shadow-lg z-10"></div>

</div>

Shopping Cart Component

A complex, clean, and trustworthy shopping cart component designed for fashion and beauty products, featuring rich autumn colors, full responsiveness, and dark mode support.

Open Preview

                <div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden lg:flex lg:flex-row-reverse">
    <!-- Order Summary / Cart Totals -->
    <div class="lg:w-1/3 p-6 sm:p-8 bg-orange-50 dark:bg-gray-700 border-b lg:border-b-0 lg:border-l border-orange-100 dark:border-gray-600">
      <h2 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-6 sm:mb-8">Order Summary</h2>
      <div class="space-y-4 mb-6">
        <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
          <span>Subtotal</span>
          <span>$385.00</span>
        </div>
        <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
          <span>Shipping & Handling</span>
          <span>$15.00</span>
        </div>
        <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
          <span>Taxes (5%)</span>
          <span>$19.25</span>
        </div>
      </div>
      <div class="border-t border-orange-200 dark:border-gray-600 pt-4 flex justify-between items-center text-xl font-semibold text-orange-900 dark:text-orange-100">
        <span>Order Total</span>
        <span>$419.25</span>
      </div>

      <div class="mt-8">
        <label for="promo_code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Have a promo code?</label>
        <div class="flex">
          <input type="text" id="promo_code" class="flex-grow p-3 border border-orange-300 dark:border-gray-600 rounded-l-md focus:ring-orange-500 focus:border-orange-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 outline-none" placeholder="Enter code">
          <button class="px-4 py-3 bg-orange-700 hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white rounded-r-md transition duration-200 ease-in-out">
            Apply
          </button>
        </div>
      </div>

      <button class="mt-8 w-full bg-orange-800 hover:bg-orange-900 dark:bg-orange-700 dark:hover:bg-orange-800 text-white font-bold py-3 px-6 rounded-md transition duration-200 ease-in-out shadow-md hover:shadow-lg">
        Proceed to Checkout
      </button>
      <p class="mt-4 text-sm text-center text-gray-600 dark:text-gray-400">
        Secure payment via SSL.
      </p>
    </div>

    <!-- Cart Items -->
    <div class="lg:w-2/3 p-6 sm:p-8">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6 sm:mb-8">Your Shopping Cart (<span id="item_count">2</span> items)</h2>

      <div class="space-y-6">
        <!-- Cart Item 1 -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center py-4 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <div class="flex-shrink-0 w-24 h-24 sm:w-32 sm:h-32 mr-4 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700">
            <img src="https://picsum.photos/id/60/300/300" alt="Product Image" class="w-full h-full object-cover">
          </div>
          <div class="flex-grow mt-4 sm:mt-0">
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-1">Elegant Silk Scarf</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-2">Color: Burgundy Red, Size: One Size</p>
            <div class="flex items-center gap-4">
              <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-md">
                <button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-l-md transition duration-150 ease-in-out">-</button>
                <span class="px-3 py-1 border-x border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100">1</span>
                <button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-r-md transition duration-150 ease-in-out">+</button>
              </div>
              <p class="font-semibold text-lg text-orange-700 dark:text-orange-400">$120.00</p>
            </div>
            <div class="flex items-center mt-3 text-sm">
              <button class="text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-500 transition duration-150 ease-in-out mr-4">Edit</button>
              <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-500 transition duration-150 ease-in-out">Remove</button>
            </div>
          </div>
        </div>

        <!-- Cart Item 2 -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center py-4 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <div class="flex-shrink-0 w-24 h-24 sm:w-32 sm:h-32 mr-4 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700">
            <img src="https://picsum.photos/id/166/300/300" alt="Product Image" class="w-full h-full object-cover">
          </div>
          <div class="flex-grow mt-4 sm:mt-0">
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-1">Artisan Leather Handbag</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-2">Color: Autumn Brown, Size: Medium</p>
            <div class="flex items-center gap-4">
              <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-md">
                <button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-l-md transition duration-150 ease-in-out">-</button>
                <span class="px-3 py-1 border-x border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100">1</span>
                <button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-r-md transition duration-150 ease-in-out">+</button>
              </div>
              <p class="font-semibold text-lg text-orange-700 dark:text-orange-400">$265.00</p>
            </div>
            <div class="flex items-center mt-3 text-sm">
              <button class="text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-500 transition duration-150 ease-in-out mr-4">Edit</button>
              <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-500 transition duration-150 ease-in-out">Remove</button>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 flex flex-col sm:flex-row justify-between items-center">
        <a href="#" class="text-orange-700 dark:text-orange-400 hover:underline flex items-center mb-4 sm:mb-0">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
          </svg>
          Continue Shopping
        </a>
        <button class="px-6 py-3 bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white rounded-md transition duration-200 ease-in-out shadow-md hover:shadow-lg">
          Clear Cart
        </button>
      </div>
    </div>
  </div>
</div>

Product Reviews Component

A simple, monochromatic, skeuomorphic product reviews component designed for manufacturing/industrial companies, featuring responsive layout and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-200 dark:bg-gray-800 font-sans">
  <div class="max-w-3xl mx-auto bg-gray-100 dark:bg-gray-900 shadow-xl rounded-lg border-2 border-gray-300 dark:border-gray-700
    p-6 sm:p-8 md:p-10
    transform skew-y-1 rotate-1 scale-95
    hover:scale-100 hover:rotate-0 hover:skew-y-0 hover:shadow-2xl
    transition-all duration-300 ease-in-out
    relative overflow-hidden
    before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-gray-300/50 before:to-transparent before:via-gray-100/30 dark:before:from-gray-700/50 dark:before:to-transparent dark:before:via-gray-900/30
    after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-12 after:bg-gradient-to-t after:from-gray-200/80 after:to-transparent dark:after:from-gray-800/80 dark:after:to-transparent">

    <div class="relative z-10 flex items-center justify-between mb-6">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">Customer Feedback</h2>
      <span class="px-3 py-1 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-semibold shadow-inner-lg shadow-gray-400/50 dark:shadow-gray-950/50">Total: 124 reviews</span>
    </div>

    <div class="grid grid-cols-1 gap-6 sm:gap-8 relative z-10">

      <!-- Review 1 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-5 rounded-lg shadow-inner-lg shadow-gray-400/50 dark:shadow-gray-950/50
        border border-gray-300 dark:border-gray-700
        transform translate-x-1 translate-y-1 rotate-1
        hover:translate-x-0 hover:translate-y-0 hover:rotate-0
        transition-all duration-200 ease-in-out">
        <div class="flex items-start mb-4">
          <img class="w-12 h-12 rounded-full border-2 border-gray-400 dark:border-gray-600 shadow-md mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">John D.</p>
            <div class="flex mt-1">
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
            </div>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          "The XYZ-1000 machine has significantly boosted our production efficiency. Robust and reliable, it handles extreme loads with ease. A truly industrial-grade product."
        </p>
        <p class="text-xs text-gray-500 dark:text-gray-400 mt-3">Reviewed on: Oct 24, 2023</p>
      </div>

      <!-- Review 2 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-5 rounded-lg shadow-inner-lg shadow-gray-400/50 dark:shadow-gray-950/50
        border border-gray-300 dark:border-gray-700
        transform translate-x-1 translate-y-1 rotate-1
        hover:translate-x-0 hover:translate-y-0 hover:rotate-0
        transition-all duration-200 ease-in-out">
        <div class="flex items-start mb-4">
          <img class="w-12 h-12 rounded-full border-2 border-gray-400 dark:border-gray-600 shadow-md mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Maria S.</p>
            <div class="flex mt-1">
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
            </div>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          "Exceptional quality and precision from their industrial-grade components. Their team provided excellent support throughout the integration process. Highly recommend for critical applications."
        </p>
        <p class="text-xs text-gray-500 dark:text-gray-400 mt-3">Reviewed on: Sep 10, 2023</p>
      </div>

    </div>

    <button class="relative z-10 mt-8 w-full py-3 px-6
      bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-bold rounded-lg
      shadow-lg shadow-gray-400/50 dark:shadow-gray-950/50
      border border-gray-400 dark:border-gray-600
      transform active:translate-y-0.5 active:shadow-none
      hover:bg-gray-400 hover:dark:bg-gray-600
      transition-colors duration-200 ease-in-out
      text-lg sm:text-xl
      before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-gray-300/30 before:to-transparent dark:before:from-gray-700/30 dark:before:to-transparent">
      Load More Reviews
    </button>

  </div>
</div>

Minimalist Ocean Blue Grid Layout

A minimalist, responsive grid layout component for fashion/beauty brands, featuring ocean blue tones and dark mode support.

Open Preview

                <div class="bg-sky-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl font-extrabold text-blue-900 dark:text-sky-300 text-center mb-12 sm:mb-16">
      Explore Our Latest Collection
    </h2>

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

      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1018/400/500" alt="Elegant Blue Dress">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Ocean Whisper Dress</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Effortless elegance for every occasion.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$129.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1020/400/500" alt="Luxurious Silk Scarf">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Azure Silk Scarf</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Soft and flowing, a touch of luxury.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$49.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1039/400/500" alt="Deep Blue Handbag">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Marine Mini Bag</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Compact and chic, perfect for essentials.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$89.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/97/400/500" alt="Elegant Pearl Necklace">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Seashell Pearl Necklace</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Timeless beauty for a delicate touch.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$199.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1041/400/500" alt="Minimalist Silver Earrings">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Coral Drop Earrings</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Subtle elegance for everyday wear.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$59.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1021/400/500" alt="Trendy Sunglasses Blue Frame">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Deep Sea Shades</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Stylish protection for radiant eyes.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$79.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 7 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1042/400/500" alt="Soft Blue Knitwear">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Coastal Knit Sweater</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Cozy comfort for colder days.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$95.00</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 8 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
          <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1025/400/500" alt="Minimalist Blue Sandals">
          <div class="p-6">
              <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Lagoon Sandals</h3>
              <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Lightweight and stylish for summer walks.</p>
              <div class="flex justify-between items-center">
                  <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$65.00</span>
                  <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
                      View Details
                  </button>
              </div>
          </div>
      </div>

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

Social Share Buttons Component

A clean, minimalist social share component for finance/banking interfaces, featuring black, white, and an accent color, with full responsiveness and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-900 font-sans">

  <div class="max-w-md mx-auto bg-gray-50 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8">
      <h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-4 leading-tight">Share this Investment Opportunity</h2>
      <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 mb-6">
        Help your network discover potential growth. Share this page with colleagues, friends, or family.
      </p>

      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">

        <!-- Share Button: LinkedIn -->
        <a href="#" class="group flex flex-col items-center justify-center p-3 border border-gray-200 dark:border-gray-700 rounded-lg transition-all duration-200
          hover:bg-blue-600 hover:border-blue-600 dark:hover:bg-blue-600 dark:hover:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200 mb-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M17 6H6C4.34 6 3 7.34 3 9v6c0 1.66 1.34 3 3 3h11c1.66 0 3-1.34 3-3V9c0-1.66-1.34-3-3-3zM8 15V9h2v6H8zm-3-6a2 2 0 100-4 2 2 0 000 4zm0 2c-1.33 0-2.45.65-3.1 1.6S3.07 16 4.33 16h1.34c1.26 0 2.38-.65 3.03-1.6S9.12 11 7.85 11h-1.6zm13-4v12a2 2 0 01-2 2H6a2 2 0 01-2-2V9a2 2 0 012-2h11.23A3.77 3.77 0 0021 9v6a3.77 3.77 0 00-3.77 3.77V13z"/>
          </svg>
          <span class="text-xs font-medium text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200">LinkedIn</span>
        </a>

        <!-- Share Button: Twitter -->
        <a href="#" class="group flex flex-col items-center justify-center p-3 border border-gray-200 dark:border-gray-700 rounded-lg transition-all duration-200
          hover:bg-blue-400 hover:border-blue-400 dark:hover:bg-blue-400 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200 mb-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.37-.83.49-1.75.83-2.72 1.02-1.95-2.09-5.18-2.09-7.14 0C5.16 7.4 3.66 9.8 3.5 12.28c-3.13-.16-5.9-1.66-7.76-3.8c-.33.57-.5 1.23-.5 1.95 0 1.34.68 2.52 1.7 3.22-.63-.02-1.22-.2-1.72-.47v.03c0 2.45 1.63 4.48 3.78 4.96-.4.1-.82.15-1.26.15-.3 0-.58-.03-.86-.08.6 1.87 2.34 3.24 4.4 3.28C4.5 20.89 2.7 21.5 0 21.5c-1.34 0-2.6-.08-3.8-.25 2.1 1.34 4.5 2.1 7.1 2.1 8.5 0 13.14-7.07 13.14-13.14 0-.19 0-.37-.01-.56.9-.65 1.7-1.47 2.32-2.4z"/>
          </svg>
          <span class="text-xs font-medium text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200">Twitter</span>
        </a>

        <!-- Share Button: Facebook -->
        <a href="#" class="group flex flex-col items-center justify-center p-3 border border-gray-200 dark:border-gray-700 rounded-lg transition-all duration-200
          hover:bg-blue-700 hover:border-blue-700 dark:hover:bg-blue-700 dark:hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200 mb-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.2 6 14 6c1.34 0 2.5.21 2.5.21V9h-1.34c-1.32 0-1.74.82-1.74 1.66V12h3.95l-.63 3h-3.32V21.8C18.56 20.87 22 16.84 22 12z"/>
          </svg>
          <span class="text-xs font-medium text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200">Facebook</span>
        </a>

        <!-- Share Button: WhatsApp -->
        <a href="#" class="group flex flex-col items-center justify-center p-3 border border-gray-200 dark:border-gray-700 rounded-lg transition-all duration-200
          hover:bg-green-500 hover:border-green-500 dark:hover:bg-green-500 dark:hover:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200 mb-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12.04 2C6.59 2 2.13 6.45 2.13 11.9S6.59 21.8 12.04 21.8c.01 0 .02 0 .03 0a9.8 9.8 0 005.83-1.89l1.45.5 1.5-1.5a10 10 0 001.89-5.8c0-.01 0-.02 0-.03C21.95 6.45 17.5 2 12.04 2zM17 15.6l-.3.2c-1.8 1.1-4.7.9-6.3-.5-.4-.3-.7-.6-.9-1.2-.2-.5-.3-1-.3-1.6-.2-1.3.3-2.6 1.4-3.7.8-.8 1.9-1.3 3.2-1.3.7 0 1.3.2 1.8.4.5.3 1 .7 1.3 1.2.3.5.4 1 .4 1.6-.1.6-.2 1.1-.3 1.7-.1.5-.3.9-.6 1.3-.3.4-.6.6-1 .8-.4.2-.8.3-1.2.3-.4 0-.8-.1-1.2-.2-.4-.1-.7-.3-1-.5-.3-.2-.5-.4-.7-.7-.2-.3-.3-.6-.3-1 .1-.4.2-.7.4-1 .2-.3.5-.5.8-.7.3-.2.6-.3.9-.4.3-.1.6-.1.9-.1.2 0 .4 0 .6.1.2 0 .4.1.5.2.2.1.3.2.4.4.1.2.1.4.1.6 0 .3 0 .5-.1.7-.1.2-.2.4-.4.6-.2.2-.4.4-.6.5-.2.2-.5.3-.8.4-.3.1-.6.1-.9.1-.3 0-.6-.1-.9-.2-.3-.1-.5-.3-.8-.5-.3-.2-.5-.4-.7-.7-.2-.3-.4-.6-.5-.9-.1-.3-.2-.6-.2-.9.2-.9.5-1.5 1-2 .5-.5 1-1 1.6-1.5.6-.5 1.2-1 1.7-1.5.5-.5 1-1 1.4-1.5.4-.5.7-1 1-1.6.3-.5.4-1 .4-1.6 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.2-1.3-.5-.4-1.1-.7-1.8-.8-.7-.2-1.4-.2-2.1-.2-.7 0-1.3 0-1.9.1-.6.1-1.1.3-1.6.5-.5.2-.9.5-1.3.8-.4.3-.8.7-1.1 1.1-.3.4-.5.9-.6 1.4-.1.5-.2 1-.2 1.6 0 .7.1 1.3.3 1.9.2.6.4 1.2.7 1.7.3.5.7 1 1 1.4.3.5.7.9 1.1 1.3.4.4.8.7 1.2 1.1.4.3.8.6 1.2.8.4.2.8.4 1.2.5.4.1.9.2 1.3.2.5 0 .9-.1 1.4-.2.5-.1 1-.3 1.4-.5.4-.2.8-.5 1.1-.8.4-.4.7-.7 1-1.1.3-.4.6-.9.7-1.4.1-.5.2-1 .2-1.6 0-.6-.1-1.2-.3-1.7-.2-.5-.5-.9-.8-1.3-.3-.4-.6-.7-1-1.1-.4-.4-.8-.7-1.1-1.1-.4-.3-.8-.6-1.2-.8-.4-.2-.8-.4-1.2-.5-.4-.1-.9-.2-1.3-.2-.5 0-.9.1-1.4.2-.5.1-1 .3-1.4.5-.4.2-.8.5-1.1.8-.4.4-.7.7-1 1.1-.3.4-.6.9-.7 1.4-.1.5-.2 1-.2 1.6 0 .7.1 1.3.3 1.9.2.6.4 1.2.7 1.7.3.5.7 1 1 1.4.3.5.7.9 1.1 1.3s.8.7 1.2 1c.4.3.8.6 1.2.8.4.2.8.4 1.3.5.4.1.9.2 1.3.2.5 0 .9-.1 1.4-.2.5-.1 1-.3 1.4-.5.4-.2.8-.5 1.1-.8.4-.4.7-.7 1-1.1.3-.4.6-.9.7-1.4.1-.5.2-1 .2-1.6 0-.6-.1-1.2-.3-1.7-.2-.5-.5-.9-.8-1.3-.3-.4-.6-.7-1-1.1-.4-.4-.8-.7-1.1-1.1-.4-.3-.8-.6-1.2-.8-.4-.2-.8-.4-1.2-.5-.4-.1-.9-.2-1.3-.2-.5 0-.9.1-1.4.2-.5.1-1 .3-1.4.5-.4.2-.8.5-1.1.8-.4.4-.7.7-1 1.1-.3.4-.6.9-.7 1.4-.1.5-.2 1-.2 1.6 0 .7.1 1.3.3 1.9.2.6.4 1.2.7 1.7.3.5.7 1 1 1.4.3.5.7.9 1.1 1.3S17 15.6 17 15.6z"/>
          </svg>
          <span class="text-xs font-medium text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200">WhatsApp</span>
        </a>

        <!-- Share Button: Email -->
        <a href="#" class="group flex flex-col items-center justify-center p-3 border border-gray-200 dark:border-gray-700 rounded-lg transition-all duration-200
          hover:bg-red-500 hover:border-red-500 dark:hover:bg-red-500 dark:hover:border-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200 mb-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
          </svg>
          <span class="text-xs font-medium text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200">Email</span>
        </a>

        <!-- Share Button: Copy Link -->
        <button class="group flex flex-col items-center justify-center p-3 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer transition-all duration-200
          hover:bg-purple-600 hover:border-purple-600 dark:hover:bg-purple-600 dark:hover:border-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200 mb-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M17 7h-4a1 1 0 000 2h4a1 1 0 000-2zm-3 4h4a1 1 0 000-2h-4a1 1 0 000 2zM7 7a1 1 0 00-1 1v10a1 1 0 001 1h10a1 1 0 001-1V8a1 1 0 00-1-1H7zm11 11H8V9h10v9zm-2-12v-2a2 2 0 00-2-2H8a2 2 0 00-2 2v2c-2.206 0-4 1.794-4 4v8c0 2.206 1.794 4 4 4h12c2.206 0 4-1.794 4-4V12c0-2.206-1.794-4-4-4z"/>
          </svg>
          <span class="text-xs font-medium text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200">Copy Link</span>
        </button>

        <!-- Share Button: More Options (could open a modal/dropdown with JS) -->
        <a href="#" class="group flex flex-col items-center justify-center p-3 border border-gray-200 dark:border-gray-700 rounded-lg transition-all duration-200
          hover:bg-gray-600 hover:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200 mb-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
          </svg>
          <span class="text-xs font-medium text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200">More</span>
        </a>

      </div>
    </div>

    <div class="p-6 pt-4 sm:p-8 sm:pt-4 border-t border-gray-200 dark:border-gray-700">
      <p class="text-xs text-gray-500 dark:text-gray-400 text-center">
        Your privacy is important to us. Sharing this content does not share your personal information.
      </p>
    </div>

  </div>
</div>

Watercolor_Artistic_Dating_Product_Gallery

A complex, responsive product gallery component with a 'Watercolor/Artistic' design style and 'Candy/Sweet' color scheme, suitable for dating and social platforms. Features multiple interactive elements, dark mode support, and semantic HTML.

Open Preview

                <div class="p-4 sm:p-8 md:p-12 lg:p-16 bg-gradient-to-br from-pink-100 to-purple-100 dark:from-gray-900 dark:to-teal-950 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto backdrop-blur-sm bg-white/60 dark:bg-gray-800/60 rounded-3xl shadow-xl overflow-hidden animate-fade-in-up">
    <div class="text-center py-8 px-4 sm:py-10 sm:px-6 md:py-12 lg:py-16">
      <h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-pink-600 dark:text-purple-300 drop-shadow-lg leading-tight">
        Soulmates in Art: Discover Your Perfect Match
      </h1>
      <p class="mt-3 text-lg sm:text-xl text-purple-700 dark:text-gray-300 max-w-2xl mx-auto">
        Explore unique profiles, each a masterpiece in their own right. Find beauty in connection.
      </p>
    </div>

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

      <!-- Profile Card 1 -->
      <div class="relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 group overflow-hidden border border-pink-200 dark:border-purple-600">
        <img src="https://picsum.photos/id/1025/600/400" alt="Artistic Portrait" class="w-full h-48 object-cover rounded-t-2xl transform scale-105 group-hover:scale-100 transition-transform duration-500 ease-out saturate-150 group-hover:saturate-100">
        <div class="absolute inset-0 bg-gradient-to-t from-pink-500/30 to-transparent rounded-t-2xl"></div>
        <div class="p-5 relative">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile Avatar" class="w-20 h-20 rounded-full border-4 border-white dark:border-gray-800 absolute -top-10 left-1/2 -translate-x-1/2 shadow-lg group-hover:scale-110 transition-transform duration-300 ease-out">
          <div class="pt-12 text-center">
            <h3 class="text-2xl font-bold text-pink-700 dark:text-purple-300">Aurora, 28</h3>
            <p class="mt-1 text-sm text-purple-600 dark:text-gray-400">Painter | Dreamer | Coffee Lover</p>
            <p class="mt-3 text-gray-700 dark:text-gray-300 text-sm line-clamp-3">"Seeking inspiration and genuine connections. My canvas is my soul, and I'd love to share its colors with you."</p>
            <div class="mt-4 flex flex-wrap justify-center gap-2">
              <span class="px-3 py-1 bg-pink-100 text-pink-600 text-xs rounded-full font-medium shadow-sm hover:bg-pink-200 dark:bg-purple-800 dark:text-purple-100 transition duration-200">#AbstractArt</span>
              <span class="px-3 py-1 bg-pink-100 text-pink-600 text-xs rounded-full font-medium shadow-sm hover:bg-pink-200 dark:bg-purple-800 dark:text-purple-100 transition duration-200">#NatureLover</span>
              <span class="px-3 py-1 bg-pink-100 text-pink-600 text-xs rounded-full font-medium shadow-sm hover:bg-pink-200 dark:bg-purple-800 dark:text-purple-100 transition duration-200">#QuietNights</span>
            </div>
            <div class="mt-6 flex justify-center gap-4">
              <button class="px-5 py-2 bg-pink-500 text-white rounded-full font-semibold shadow-md hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-400 focus:ring-offset-2 transition duration-300 ease-in-out dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-500 flex items-center gap-2">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                Like
              </button>
              <button class="px-5 py-2 group-hover:bg-purple-500 bg-transparent border border-purple-400 text-purple-600 rounded-full font-semibold shadow-md hover:text-white hover:border-transparent transition duration-300 ease-in-out dark:text-purple-300 dark:border-purple-500 dark:hover:bg-purple-600 dark:hover:text-white flex items-center gap-2">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 4v-4H4a2 2 0 01-2-2V5z"></path><path d="M15 7v2a4 4 0 01-4 4H9.828l-1.656 1.657A2 2 0 009.828 20H15a2 2 0 002-2v-2h1a2 2 0 002-2V9a2 2 0 00-2-2h-1z"></path></svg>
                Message
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Profile Card 2 -->
      <div class="relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 group overflow-hidden border border-mint-200 dark:border-emerald-600">
        <img src="https://picsum.photos/id/108/600/400" alt="Artistic Portrait" class="w-full h-48 object-cover rounded-t-2xl transform scale-105 group-hover:scale-100 transition-transform duration-500 ease-out saturate-150 group-hover:saturate-100">
        <div class="absolute inset-0 bg-gradient-to-t from-mint-500/30 to-transparent rounded-t-2xl"></div>
        <div class="p-5 relative">
          <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Profile Avatar" class="w-20 h-20 rounded-full border-4 border-white dark:border-gray-800 absolute -top-10 left-1/2 -translate-x-1/2 shadow-lg group-hover:scale-110 transition-transform duration-300 ease-out">
          <div class="pt-12 text-center">
            <h3 class="text-2xl font-bold text-mint-700 dark:text-emerald-300">Leo, 31</h3>
            <p class="mt-1 text-sm text-emerald-600 dark:text-gray-400">Musician | Wanderer | Storyteller</p>
            <p class="mt-3 text-gray-700 dark:text-gray-300 text-sm line-clamp-3">"My life is a melody, always eager for new harmonies. Love exploring new places and deep conversations."</p>
            <div class="mt-4 flex flex-wrap justify-center gap-2">
              <span class="px-3 py-1 bg-mint-100 text-mint-600 text-xs rounded-full font-medium shadow-sm hover:bg-mint-200 dark:bg-emerald-800 dark:text-emerald-100 transition duration-200">#IndieMusic</span>
              <span class="px-3 py-1 bg-mint-100 text-mint-600 text-xs rounded-full font-medium shadow-sm hover:bg-mint-200 dark:bg-emerald-800 dark:text-emerald-100 transition duration-200">#RoadTrips</span>
              <span class="px-3 py-1 bg-mint-100 text-mint-600 text-xs rounded-full font-medium shadow-sm hover:bg-mint-200 dark:bg-emerald-800 dark:text-emerald-100 transition duration-200">#Philosophy</span>
            </div>
            <div class="mt-6 flex justify-center gap-4">
              <button class="px-5 py-2 bg-mint-500 text-white rounded-full font-semibold shadow-md hover:bg-mint-600 focus:outline-none focus:ring-2 focus:ring-mint-400 focus:ring-offset-2 transition duration-300 ease-in-out dark:bg-emerald-600 dark:hover:bg-emerald-700 dark:focus:ring-emerald-500 flex items-center gap-2">
                Like
              </button>
              <button class="px-5 py-2 group-hover:bg-purple-500 bg-transparent border border-purple-400 text-purple-600 rounded-full font-semibold shadow-md hover:text-white hover:border-transparent transition duration-300 ease-in-out dark:text-purple-300 dark:border-purple-500 dark:hover:bg-purple-600 dark:hover:text-white flex items-center gap-2">
                Message
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Profile Card 3 -->
      <div class="relative bg-white dark:bg-gray-700 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 group overflow-hidden border border-yellow-200 dark:border-orange-600">
        <img src="https://picsum.photos/id/1050/600/400" alt="Artistic Portrait" class="w-full h-48 object-cover rounded-t-2xl transform scale-105 group-hover:scale-100 transition-transform duration-500 ease-out saturate-150 group-hover:saturate-100">
        <div class="absolute inset-0 bg-gradient-to-t from-yellow-500/30 to-transparent rounded-t-2xl"></div>
        <div class="p-5 relative">
          <img src="https://randomuser.me/api/portraits/women/24.jpg" alt="Profile Avatar" class="w-20 h-20 rounded-full border-4 border-white dark:border-gray-800 absolute -top-10 left-1/2 -translate-x-1/2 shadow-lg group-hover:scale-110 transition-transform duration-300 ease-out">
          <div class="pt-12 text-center">
            <h3 class="text-2xl font-bold text-yellow-700 dark:text-orange-300">Skye, 26</h3>
            <p class="mt-1 text-sm text-orange-600 dark:text-gray-400">Photographer | Adventurer | Optimist</p>
            <p class="mt-3 text-gray-700 dark:text-gray-300 text-sm line-clamp-3">"Capturing moments and building memories. Let's find beauty in the everyday, together."</p>
            <div class="mt-4 flex flex-wrap justify-center gap-2">
              <span class="px-3 py-1 bg-yellow-100 text-yellow-600 text-xs rounded-full font-medium shadow-sm hover:bg-yellow-200 dark:bg-orange-800 dark:text-orange-100 transition duration-200">#PhotoAddict</span>
              <span class="px-3 py-1 bg-yellow-100 text-yellow-600 text-xs rounded-full font-medium shadow-sm hover:bg-yellow-200 dark:bg-orange-800 dark:text-orange-100 transition duration-200">#Hiking</span>
              <span class="px-3 py-1 bg-yellow-100 text-yellow-600 text-xs rounded-full font-medium shadow-sm hover:bg-yellow-200 dark:bg-orange-800 dark:text-orange-100 transition duration-200">#GoodVibes</span>
            </div>
            <div class="mt-6 flex justify-center gap-4">
              <button class="px-5 py-2 bg-yellow-500 text-white rounded-full font-semibold shadow-md hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 transition duration-300 ease-in-out dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-500 flex items-center gap-2">
                Like
              </button>
              <button class="px-5 py-2 group-hover:bg-purple-500 bg-transparent border border-purple-400 text-purple-600 rounded-full font-semibold shadow-md hover:text-white hover:border-transparent transition duration-300 ease-in-out dark:text-purple-300 dark:border-purple-500 dark:hover:bg-purple-600 dark:hover:text-white flex items-center gap-2">
                Message
              </button>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="py-8 px-4 sm:py-10 sm:px-6 text-center">
      <button class="px-8 py-3 bg-gradient-to-r from-pink-500 to-purple-500 text-white font-bold rounded-full text-lg shadow-lg hover:from-pink-600 hover:to-purple-600 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:from-purple-600 dark:to-teal-600 dark:hover:from-purple-700 dark:hover:to-teal-700 dark:focus:ring-teal-400">
        Discover More Masterpieces
        <svg class="inline-block ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
      </button>
    </div>

  </div>
</div>

Bauhaus_E-commerce_Media_Component

A responsive and functional e-commerce media component with a Bauhaus-inspired monochromatic design, dark mode support, emphasizing geometric forms and clear visual hierarchy for product presentation.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 bg-white dark:bg-gray-800 shadow-lg rounded-none overflow-hidden">

    <!-- Product Image Section -->
    <div class="relative col-span-1 md:col-span-2 lg:col-span-1 border-b-2 md:border-r-2 lg:border-r-2 md:border-b-0 border-gray-200 dark:border-gray-700 p-4 sm:p-6 grid place-items-center">
      <img src="https://picsum.photos/id/1018/800/600" alt="Modern Product Image" class="w-full h-auto object-cover max-h-96 md:max-h-full aspect-square" loading="lazy">
      <div class="absolute top-0 left-0 bg-yellow-400 dark:bg-yellow-600 text-gray-900 dark:text-white px-3 py-1 text-xs font-semibold uppercase tracking-wider -rotate-45 -translate-x-6 translate-y-6 pt-4 pr-4">
        New
      </div>
    </div>

    <!-- Product Details Section -->
    <div class="p-4 sm:p-6 lg:p-8 flex flex-col justify-between col-span-1">
      <div>
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-2 sm:mb-4 leading-tight">
          Geometric Lamp
        </h2>
        <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 mb-4 sm:mb-6 leading-relaxed">
          A fusion of form and function. This lamp embodies the Bauhaus principle of design simplicity and utility.
        </p>
        <div class="flex items-baseline mb-4 sm:mb-6">
          <span class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mr-2">$199.99</span>
          <span class="text-lg sm:text-xl text-gray-500 dark:text-gray-400 line-through">$249.99</span>
        </div>
        <div class="mb-4 sm:mb-6">
          <h3 class="text-sm uppercase tracking-wide font-semibold text-gray-700 dark:text-gray-300 mb-2">Color</h3>
          <div class="flex space-x-2">
            <button aria-label="Select black color" class="w-8 h-8 rounded-full bg-gray-900 dark:bg-gray-100 ring-2 ring-transparent hover:ring-gray-400 dark:hover:ring-gray-600 focus:ring-gray-400 focus:outline-none transition-colors duration-200"></button>
            <button aria-label="Select white color" class="w-8 h-8 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 ring-2 ring-gray-900 dark:ring-white focus:ring-gray-900 focus:outline-none transition-colors duration-200"></button>
            <button aria-label="Select gray color" class="w-8 h-8 rounded-full bg-gray-500 dark:bg-gray-500 ring-2 ring-transparent hover:ring-gray-400 dark:hover:ring-gray-600 focus:ring-gray-400 focus:outline-none transition-colors duration-200"></button>
          </div>
        </div>
      </div>

      <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
        <button class="flex-1 py-3 px-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-lg font-bold uppercase tracking-wider shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-900 dark:focus:ring-gray-100 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
          Add to Cart
        </button>
        <button aria-label="Add to Wishlist" class="py-3 px-6 border-2 border-gray-900 dark:border-gray-100 text-gray-900 dark:text-gray-100 text-lg font-bold uppercase tracking-wider hover:bg-gray-900 hover:text-white dark:hover:bg-gray-100 dark:hover:text-gray-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-900 dark:focus:ring-gray-100 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.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" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Additional Information / Reviews Section -->
    <div class="p-4 sm:p-6 lg:p-8 col-span-1 lg:col-span-1 border-t-2 md:border-t-0 lg:border-t-0 md:border-l-2 border-gray-200 dark:border-gray-700 flex flex-col justify-between">
      <div>
        <h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-3">Product Features</h3>
        <ul class="list-none space-y-2 text-gray-700 dark:text-gray-300 mb-6">
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Durable Steel Structure</li>
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Adjustable Brightness</li>
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Energy Efficient LED</li>
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Minimalist Design Aesthetic</li>
        </ul>

        <h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-3">Customer Reviews</h3>
        <div class="flex items-center text-gray-800 dark:text-gray-200 mb-4">
          <div class="flex text-yellow-400 dark:text-yellow-500 mr-2">
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
          </div>
          <span class="text-sm italic">(45 Reviews)</span>
        </div>

        <article class="bg-gray-50 dark:bg-gray-700 p-4 rounded-none border border-gray-200 dark:border-gray-600 mb-4">
          <div class="flex items-center mb-2">
            <img class="h-10 w-10 rounded-full object-cover mr-3 border-2 border-gray-300 dark:border-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-900 dark:text-white">John Doe</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Verified Purchase</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">"Absolutely love the design! Fits perfectly with my minimalist interior. The light is soft but bright enough for reading."</p>
        </article>
      </div>
    </div>

  </div>
</div>

File Viewer Component

A simple, responsive file viewer component with a paper/print-inspired design suitable for business/corporate websites. Features analogous colors, semantic HTML, and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 min-h-screen font-sans antialiased">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-850 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">

    <!-- Header Section -->
    <div class="p-4 sm:px-6 md:px-8 bg-indigo-100 dark:bg-gray-800 border-b border-indigo-200 dark:border-gray-700 flex items-center justify-between">
      <h2 class="text-lg sm:text-xl md:text-2xl font-semibold text-indigo-800 dark:text-indigo-300">
        <i class="fas fa-file-alt mr-2 text-indigo-600 dark:text-indigo-400"></i>
        Project Overview Document
      </h2>
      <button aria-label="Download file" class="p-2 rounded-full text-indigo-600 dark:text-indigo-400 hover:bg-indigo-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
        </svg>
      </button>
    </div>

    <!-- File Details / Toolbar -->
    <div class="p-4 sm:px-6 md:px-8 bg-purple-50 dark:bg-gray-800 flex items-center justify-between text-sm sm:text-base text-purple-700 dark:text-purple-300 border-b border-purple-100 dark:border-gray-700">
      <div class="flex items-center space-x-4">
        <span class="font-medium">Size:</span>
        <span>2.1 MB</span>
        <span class="font-medium ml-4">Type:</span>
        <span>PDF</span>
      </div>
      <div class="flex space-x-2">
        <button aria-label="Print file" class="p-2 rounded-md hover:bg-purple-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200 ease-in-out">
          <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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6m4 0v-4a2 2 0 00-2-2H7a2 2 0 00-2 2v4a2 2 0 002 2h6m0-0V9a2 2 0 00-2-2H9a2 2 0 00-2 2v8" />
          </svg>
        </button>
        <button aria-label="Share file" class="p-2 rounded-md hover:bg-purple-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850 transition duration-200 ease-in-out">
          <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="M8.684 13.342C8.865 13.103 9.172 13 9.5 13h4s.328-.103.51-.342c.18-.242.067-.577-.253-.78L12 9l-2.757 2.22c-.32.203-.433.54-.253.78zM14 6v.01M10 6v.01M12 2v.01M5 19v.01M19 19v.01M12 16v.01M12 18a2 2 0 100-4 2 2 0 000 4zM21 12c0 2.21-3.134 4-7 4s-7-1.79-7-4 3.134-4 7-4 7 1.79 7 4z" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Content Area (Mimics Paper) -->
    <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 leading-relaxed font-serif relative overflow-hidden">
      <div class="absolute inset-0 px-4 sm:px-6 md:px-8 py-4 sm:py-6 md:py-8 pointer-events-none z-10 opacity-75 dark:opacity-60">
        <div class="bg-white dark:bg-gray-800 w-full h-full rounded-sm shadow-inner dark:shadow-none" style="filter: url(#grain);"></div>
      </div>
      <svg>
        <filter id="grain">
          <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"></feTurbulence>
          <feComposite operator="in" in2="SourceGraphic"></feComposite>
          <feColorMatrix type="saturate" values="0"></feColorMatrix>
        </filter>
      </svg>

      <div class="relative z-20 space-y-4">
        <p class="mb-2 text-xl font-bold text-indigo-700 dark:text-indigo-300">Introduction</p>
        <p class="text-justify">
          This document provides a comprehensive overview of the 'Horizon' project, outlining its objectives, scope, and key deliverables. Initiated in Q3, the Horizon project aims to revolutionize our service delivery model, enhancing efficiency and customer satisfaction through innovative technological solutions. It represents a significant strategic investment aligned with our long-term growth aspirations.
        </p>

        <p class="mt-6 mb-2 text-xl font-bold text-indigo-700 dark:text-indigo-300">Project Objectives</p>
        <ul class="list-disc list-inside space-y-2 text-justify">
          <li>Streamline internal workflows by <strong>30%</strong>, reducing operational costs.</li>
          <li>Improve customer satisfaction scores by <strong>15%</strong> through enhanced service accessibility.</li>
          <li>Deploy a new, scalable cloud-based infrastructure by end of Q4.</li>
          <li>Foster cross-departmental collaboration and knowledge sharing.</li>
        </ul>

        <p class="mt-6 mb-2 text-xl font-bold text-indigo-700 dark:text-indigo-300">Timeline & Milestones</p>
        <img src="https://picsum.photos/600/300?random=1" alt="Project Timeline Placeholder" class="w-full h-auto rounded-md shadow-sm border border-gray-200 dark:border-gray-700 object-cover my-4">
        <p class="text-sm text-gray-600 dark:text-gray-400 italic">Figure 1: High-level project timeline.</p>

        <p class="mt-6 mb-2 text-xl font-bold text-indigo-700 dark:text-indigo-300">Contributors</p>
        <div class="flex flex-wrap items-center gap-4">
          <figure class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John Doe" class="w-10 h-10 rounded-full border-2 border-indigo-300 dark:border-indigo-600 shadow-sm">
            <figcaption class="text-sm font-medium text-gray-700 dark:text-gray-300">John Doe</figcaption>
          </figure>
          <figure class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Jane Smith" class="w-10 h-10 rounded-full border-2 border-purple-300 dark:border-purple-600 shadow-sm">
            <figcaption class="text-sm font-medium text-gray-700 dark:text-gray-300">Jane Smith</figcaption>
          </figure>
        </div>
      </div>
    </div>

    <!-- Footer Section -->
    <div class="p-4 sm:px-6 md:px-8 bg-indigo-100 dark:bg-gray-800 border-t border-indigo-200 dark:border-gray-700 flex items-center justify-between text-sm text-indigo-700 dark:text-indigo-400">
      <span>Page 1 of 3</span>
      <span class="text-right">Last Updated: October 26, 2023</span>
    </div>

  </div>
</div>

Infographics Component - Gaming Legacy Stats

A simple, responsive infographics component for gaming websites, featuring player statistics with a luxury/premium, retro/vintage aesthetic. Supports dark mode.

Open Preview

                <section class="font-sans bg-gray-100 text-gray-800 py-12 px-4 dark:bg-gray-900 dark:text-gray-200">
  <div class="container mx-auto px-4 max-w-4xl">
    <h2 class="text-4xl md:text-5xl font-bold text-center mb-10 text-rose-800 dark:text-rose-400 leading-tight tracking-tight">
      <span class="block">Gaming Legacy</span>
      <span class="block text-2xl md:text-3xl font-medium text-amber-900 dark:text-amber-500 mt-2">Player Milestones</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">

      <!-- Statistic 1: Kills -->
      <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl border-2 border-rose-200 dark:border-rose-700 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="text-5xl md:text-6xl font-extrabold text-rose-600 dark:text-rose-500 mb-2">
          <span class="animate-pulse">3,456</span>
        </div>
        <p class="text-xl md:text-2xl font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">Total Kills</p>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Achieved across all campaigns</p>
      </div>

      <!-- Statistic 2: Wins -->
      <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl border-2 border-amber-200 dark:border-amber-700 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="text-5xl md:text-6xl font-extrabold text-amber-600 dark:text-amber-500 mb-2">
          <span class="animate-pulse">187</span>
        </div>
        <p class="text-xl md:text-2xl font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">Victories</p>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Tournament &amp; Ranked Matches</p>
      </div>

      <!-- Statistic 3: Playtime -->
      <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl border-2 border-green-200 dark:border-green-700 transform transition-transform duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="text-5xl md:text-6xl font-extrabold text-green-600 dark:text-green-500 mb-2">
          <span class="animate-pulse">789h</span>
        </div>
        <p class="text-xl md:text-2xl font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">Hours Played</p>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Dedicated game time logged</p>
      </div>

    </div>

    <div class="mt-12 text-center">
      <a href="#" class="inline-block bg-rose-700 hover:bg-rose-800 dark:bg-rose-500 dark:hover:bg-rose-600 text-white font-bold py-3 px-8 rounded-full text-lg uppercase tracking-wide transition-colors duration-300 shadow-lg hover:shadow-xl">
        View Full Player Profile
      </a>
    </div>
  </div>
</section>

1 ... 100 101 102 103 104 ... 335

Search Components

Categories

All Components