Composants Mentions des utilisateurs Composant Mentions de l’utilisateur

Composant Mentions de l’utilisateur

Un utilisateur rétro-vintage mentionne un composant pour le commerce électronique avec des couleurs triadiques, une complexité modérée, une réactivité et une prise en charge du mode sombre. Pas de JavaScript.

Aperçu

HTML Code

<div class="container mx-auto px-4 py-8 theme-changer and dark:bg-gray-800">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

    <!-- User Mention Card -->
    <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6 transform transition-transform duration-300 hover:scale-105 border-4 border-purple-500 dark:border-purple-600">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <h3 class="text-xl font-bold text-blue-600 dark:text-blue-400">Rad RetroDude86</h3>
          <p class="text-gray-600 dark:text-gray-300">Active Shopper</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 mb-4">
        Just bought the awesome ' totally tubular ' t-shirt! This store is maximum cool! #retrofashion #ecommercewin
      </p>
      <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
        <span>Mentioned Product &hearts;</span>
        <img class="w-16 h-16 object-cover rounded" src="https://picsum.photos/seed/retroshirt/150/150" alt="Product Image">
      </div>
    </div>

    <!-- User Mention Card eo --> 
    
        <!-- User Mention Card -->
    <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6 transform transition-transform duration-300 hover:scale-105 border-4 border-yellow-500 dark:border-yellow-600">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
        <div>
          <h3 class="text-xl font-bold text-blue-600 dark:text-blue-400">NeonLightsQueen</h3>
          <p class="text-gray-600 dark:text-gray-300">New Arrival Enthusiast</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 mb-4">
        OMG, the new accessories are so fetch!  Totally loving the vibe.  Can't wait for more! #80sstyle #shopaholic
      </p>
      <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
        <span>Mentioned Product &hearts;</span>
        <img class="w-16 h-16 object-cover rounded" src="https://picsum.photos/seed/retrobag/150/150" alt="Product Image">
      </div>
    </div>

    <!-- User Mention Card eo --> 
    
        <!-- User Mention Card -->
    <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6 transform transition-transform duration-300 hover:scale-105 border-4 border-green-500 dark:border-green-600">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <div>
          <h3 class="text-xl font-bold text-blue-600 dark:text-blue-400">SynthwaveSam</h3>
          <p class="text-gray-600 dark:text-gray-300">Vinyl Collector</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 mb-4">
        Scored some classic vinyls from here.  Sounding totally rad on my setup!  Highly recommend! #vinylcollection #musiconline
      </p>
      <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
        <span>Mentioned Product &hearts;</span>
        <img class="w-16 h-16 object-cover rounded" src="https://picsum.photos/seed/retroviny/150/150" alt="Product Image">
      </div>
    </div>

    <!-- User Mention Card eo --> 

  </div>
</div>

Composants associés

Composant Mentions d’utilisateur - Skeuomorphisme

L’utilisateur mentionne le composant avec la conception skeuomorphism, les effets réactifs et la prise en charge du thème sombre en utilisant uniquement html avec tailwind css. Pas besoin de javascript.

Ouvrir

Composant Mentions de l’utilisateur

Composant avec prise en charge du mode sombre, avec des effets réactifs et la prise en charge du thème sombre. Utilise des images d’espace réservé aléatoires de picsum.photos pour les images et randomuser.me pour les avatars.

Ouvrir

Composant Mentions de l’utilisateur

Un composant simple de mentions d’utilisateur conçu dans un style brutaliste avec une palette de couleurs en niveaux de gris, adapté aux sites Web d’entreprise et d’entreprise. Il inclut des mentions d’utilisateurs avec des avatars et est réactif avec la prise en charge du thème sombre.

Ouvrir