Componenti Menzioni degli utenti Componente Menzioni utente

Componente Menzioni utente

Un componente di menzione utente semplice e reattivo con uno stile di vetromorfismo vibrante, adatto per applicazioni di social media. Include il supporto per la modalità oscura.

Anteprima

Codice HTML

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

  <div class="relative w-full max-w-md mx-auto group perspective-1000px">
    <div class="relative preserve-3d transition-transform duration-700 ease-in-out group-hover:rotate-x-3 rotate-y-3">

      <div class="relative z-10 w-full p-4 sm:p-5 md:p-6 rounded-3xl backdrop-blur-md bg-white/30 dark:bg-gray-700/30 shadow-2xl overflow-hidden
                  border border-white/50 dark:border-gray-600/50
                  transform transition-all duration-300 ease-in-out
                  hover:scale-[1.02] hover:shadow-cyan-500/50 dark:hover:shadow-purple-500/50">

        <!-- Glassmorphism Overlay Effect -->
        <div class="absolute inset-0 z-0 pointer-events-none
                    bg-gradient-to-br from-white/40 to-white/10 dark:from-gray-800/40 dark:to-gray-900/10
                    rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

        <h2 class="relative z-10 text-xl sm:text-2xl font-extrabold text-purple-800 dark:text-pink-400 mb-4 tracking-tight">
          Recent Mentions
        </h2>

        <div class="relative z-10 space-y-3">

          <!-- Mention Item 1 -->
          <div class="relative p-3 rounded-xl bg-white/40 dark:bg-gray-800/40 backdrop-blur-sm
                      flex items-center space-x-3 transition-transform transform hover:scale-[1.01] duration-200
                      group/item border border-white/60 dark:border-gray-700/60
                      hover:shadow-lg hover:shadow-purple-300/40 dark:hover:shadow-pink-700/30">
            <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-purple-500 dark:ring-pink-400 object-cover transform transition-transform duration-300 group-hover/item:scale-105"
                 src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
            <div class="flex-1">
              <p class="font-semibold text-purple-900 dark:text-white text-sm sm:text-base leading-tight">
                @<span class="text-blue-700 dark:text-cyan-400">user_galore</span> mentioned you in a post
              </p>
              <p class="text-gray-700 dark:text-gray-300 text-xs sm:text-sm mt-1 line-clamp-1">
                "Great insights on the new #webdev framework! Thanks for sharing..."
              </p>
              <span class="text-xs text-gray-500 dark:text-gray-400 block mt-1">2 hours ago</span>
            </div>
          </div>

          <!-- Mention Item 2 -->
          <div class="relative p-3 rounded-xl bg-white/40 dark:bg-gray-800/40 backdrop-blur-sm
                      flex items-center space-x-3 transition-transform transform hover:scale-[1.01] duration-200
                      group/item border border-white/60 dark:border-gray-700/60
                      hover:shadow-lg hover:shadow-cyan-300/40 dark:hover:shadow-indigo-700/30">
            <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-pink-500 dark:ring-cyan-400 object-cover transform transition-transform duration-300 group-hover/item:scale-105"
                 src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div class="flex-1">
              <p class="font-semibold text-purple-900 dark:text-white text-sm sm:text-base leading-tight">
                @<span class="text-blue-700 dark:text-cyan-400">dev_wizard</span> replied to your comment
              </p>
              <p class="text-gray-700 dark:text-gray-300 text-xs sm:text-sm mt-1 line-clamp-1">
                "That's a valid point, I agree with your assessment. Looking forward to..."
              </p>
              <span class="text-xs text-gray-500 dark:text-gray-400 block mt-1">5 hours ago</span>
            </div>
          </div>

          <!-- Mention Item 3 -->
          <div class="relative p-3 rounded-xl bg-white/40 dark:bg-gray-800/40 backdrop-blur-sm
                      flex items-center space-x-3 transition-transform transform hover:scale-[1.01] duration-200
                      group/item border border-white/60 dark:border-gray-700/60
                      hover:shadow-lg hover:shadow-green-300/40 dark:hover:shadow-teal-700/30">
            <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-lime-500 dark:ring-green-400 object-cover transform transition-transform duration-300 group-hover/item:scale-105"
                 src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
            <div class="flex-1">
              <p class="font-semibold text-purple-900 dark:text-white text-sm sm:text-base leading-tight">
                @<span class="text-blue-700 dark:text-cyan-400">code_ninja</span> included you in a photo
              </p>
              <p class="text-gray-700 dark:text-gray-300 text-xs sm:text-sm mt-1 line-clamp-1">
                "Team selfie from the hackathon! Good job everyone, especially..."
              </p>
              <span class="text-xs text-gray-500 dark:text-gray-400 block mt-1">1 day ago</span>
            </div>
          </div>

        </div>

        <button class="relative z-10 w-full mt-6 py-3 px-4 rounded-xl
                       bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-700
                       text-white font-bold text-base sm:text-lg
                       transition-all duration-300 ease-in-out
                       shadow-lg hover:shadow-xl hover:shadow-purple-400/50 dark:hover:shadow-pink-800/50
                       transform hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-300 dark:focus:ring-pink-600">
          View All Mentions
        </button>

      </div>

      <!-- Background Glow/Aura (for Glassmorphism depth) -->
      <div class="absolute -inset-1 sm:-inset-2 md:-inset-3 rounded-3xl bg-gradient-to-br from-pink-400 to-cyan-400 dark:from-purple-600 dark:to-red-600
                  filter blur-3xl opacity-70 dark:opacity-60 mix-blend-multiply
                  transform translate-z-[-20px] scale-95 transition-all duration-500 ease-in-out
                  group-hover:opacity-100 group-hover:scale-100 group-hover:blur-4xl"></div>

    </div>
  </div>

</div>

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

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

  .rotate-y-3 {
    transform: rotateY(3deg);
  }

  .group-hover\:rotate-x-3:hover {
    transform: rotateX(3deg) scaleZ(1.02);
  }

  .group-hover\:rotate-y-3:hover {
    transform: rotateY(3deg);
  }

  .translate-z-\[-20px\] {
    transform: translateZ(-20px);
  }

  .backdrop-blur-md {
    backdrop-filter: blur(12px);
  }

  @media (min-width: 640px) {
    .backdrop-blur-md {
      backdrop-filter: blur(16px);
    }
  }

  @media (min-width: 768px) {
    .backdrop-blur-md {
      backdrop-filter: blur(20px);
    }
  }

  .blur-4xl {
    filter: blur(64px);
  }
</style>

Componenti correlati

Componente Menzioni utente

Un componente reattivo per le menzioni dell'utente con design Glassmorphism, combinazione di colori complementari e supporto per la modalità oscura, adatto per siti Web aziendali.

Aperto

Componente Menzioni utente

Un utente scheumorfico menziona un componente progettato per imitare gli elementi del mondo reale, con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.

Aperto

Componente Menzioni dell'utente - Skeuomorphism

L'utente menziona il componente con design scheumorfismo, effetti reattivi e supporto per temi scuri utilizzando solo html con css tailwind. Non è necessario alcun javascript.

Aperto