Componenti Menzioni degli utenti Componente Menzioni utente

Componente Menzioni utente

Un utente menziona il componente che utilizza Tailwind CSS con design Glassmorphism, reattività e supporto per temi scuri.

Anteprima

Codice HTML

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg p-6">
    <h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Mentions</h2>
    <div class="space-y-4">
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">John Doe</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a comment.</p>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Jane Smith</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a post.</p>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Peter Jones</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a message.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Componenti correlati

Componente Menzioni utente

Componente menzionato dall'utente con supporto per la modalità oscura, con effetti reattivi e supporto per temi scuri. Utilizza immagini segnaposto casuali da picsum.photos per le immagini e randomuser.me per gli avatar.

Aperto

Componente Menzioni utente

L'utente menziona il componente con stile Glassmorphism, combinazione di colori pastello e livello di complessità complesso per l'e-commerce, con design reattivo e supporto per temi scuri, utilizzando Tailwind CSS.

Aperto

Componente Menzioni utente

Un utente reattivo menziona un componente progettato per la modalità oscura con supporto CSS Tailwind.

Aperto