Rechercher des composants

Catégories

Composants Composantes sociales

Composantes sociales

Composantes liées à l’interaction sociale et au partage

Volet Composantes sociales

Une carte de réseau social simple et réactive avec des éléments de conception 3D, des tons de terre et une prise en charge du mode sombre.

Ouvrir Aperçu

                
<div class="p-4 bg-gray-100 dark:bg-gray-800 min-h-screen flex items-center justify-center">
  <div class="relative w-full max-w-sm rounded-lg shadow-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-700 dark:to-stone-900 overflow-hidden transform transition-all duration-300 hover:scale-105">
    <!-- Subtle 3D effect layers -->
    <div class="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent dark:from-black/20 dark:to-transparent opacity-50"></div>
    <div class="absolute inset-0 border-t border-l border-white/30 dark:border-black/30 transform skew-y-2 translate-x-2 translate-y-2 opacity-20"></div>

    <div class="relative p-6">
      <div class="flex items-center space-x-4 mb-4">
        <img class="w-12 h-12 rounded-full ring-2 ring-stone-400 dark:ring-stone-600 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <p class="text-lg font-semibold text-stone-800 dark:text-stone-200">John Doe</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">@johndoe</p>
        </div>
      </div>

      <p class="text-stone-700 dark:text-stone-300 mb-4">
        Exploring the beauty of nature. Every moment is an adventure! #nature #travel #earthtones
      </p>

      <img class="w-full h-48 object-cover rounded-md mb-4 shadow-md transform translate-y-1 tranlsate-x-1" src="https://picsum.photos/600/400?random=1" alt="Post Image">

      <div class="flex justify-between items-center text-stone-600 dark:text-stone-400 text-sm">
        <div class="flex items-center space-x-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <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" />
          </svg>
          <span>1.2K Likes</span>
        </div>
        <div class="flex items-center space-x-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M18 13.5V0H2v13.5A2.5 2.5 0 004.5 16h11A2.5 2.5 0 0018 13.5zM12 4H8v4h4V4z" clip-rule="evenodd" />
             <path d="M5 16h10c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5H5c-.828 0-1.5-.672-1.5-1.5S4.172 16 5 16z" />
             </svg>
          <span>245 Comments</span>
        </div>
      </div>
    </div>
  </div>
</div>

Une composante sociale brutaliste, complexe et axée sur le commerce électronique avec une palette de couleurs analogue, mise en œuvre avec Tailwind CSS. Il est réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
  <!-- Social Components Component -->
  <div class="max-w-4xl w-full bg-red-400 dark:bg-red-800 border-4 border-black dark:border-white shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_rgba(255,255,255,1)] p-8 space-y-8">
    
    <!-- Header Section -->
    <div class="flex flex-col sm:flex-row justify-between items-center border-b-4 border-black dark:border-white pb-4">
      <h1 class="text-5xl font-extrabold text-black dark:text-white uppercase tracking-tighter mb-4 sm:mb-0">Social Feed</h1>
      <div class="flex space-x-4">
        <button class="bg-yellow-400 dark:bg-yellow-600 text-black dark:text-white px-6 py-3 border-4 border-black dark:border-white text-xl font-bold uppercase shadow-[4px_4px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_rgba(255,255,255,1)] hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">New Post</button>
        <button class="bg-blue-400 dark:bg-blue-600 text-black dark:text-white px-6 py-3 border-4 border-black dark:border-white text-xl font-bold uppercase shadow-[4px_4px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_rgba(255,255,255,1)] hover:bg-blue-500 dark:hover:bg-blue-700 transition duration-300">Profile</button>
      </div>
    </div>

    <!-- Main Content Area - Grid Layout for Posts -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- Social Post Card 1 -->
      <div class="bg-green-400 dark:bg-green-700 border-4 border-black dark:border-white p-6 shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
          <div class="ml-4">
            <h2 class="text-2xl font-bold text-black dark:text-white uppercase">Jane Doe</h2>
            <p class="text-black dark:text-white text-sm">2 hours ago</p>
          </div>
        </div>
        <img src="https://picsum.photos/id/237/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Absolutely loving this new collection! The colors are so vibrant and the quality is superb. Perfect for my e-commerce store."</p>
        <div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
          <div class="flex space-x-4">
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 124 Likes</button>
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 36 Comments</button>
          </div>
          <button class="bg-purple-400 dark:bg-purple-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-purple-500 dark:hover:bg-purple-700 transition duration-300">Share</button>
        </div>
      </div>

      <!-- Social Post Card 2 -->
      <div class="bg-yellow-400 dark:bg-yellow-700 border-4 border-black dark:border-white p-6 shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
          <div class="ml-4">
            <h2 class="text-2xl font-bold text-black dark:text-white uppercase">John Smith</h2>
            <p class="text-black dark:text-white text-sm">5 hours ago</p>
          </div>
        </div>
        <img src="https://picsum.photos/id/1018/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Just received my order and I'm blown away! The design is so unique and the product feels incredibly durable. Highly recommend for any e-commerce business."</p>
        <div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
          <div class="flex space-x-4">
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 289 Likes</button>
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 78 Comments</button>
          </div>
          <button class="bg-blue-400 dark:bg-blue-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-blue-500 dark:hover:bg-blue-700 transition duration-300">Share</button>
        </div>
      </div>

      <!-- Social Post Card 3 -->
      <div class="bg-blue-400 dark:bg-blue-700 border-4 border-black dark:border-white p-6 shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/21.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
          <div class="ml-4">
            <h2 class="text-2xl font-bold text-black dark:text-white uppercase">Emily White</h2>
            <p class="text-black dark:text-white text-sm">1 day ago</p>
          </div>
        </div>
        <img src="https://picsum.photos/id/1025/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Selling like hotcakes! My customers can't get enough of these amazing products. The brutalist design elements really make my e-commerce site stand out."</p>
        <div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
          <div class="flex space-x-4">
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 512 Likes</button>
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 112 Comments</button>
          </div>
          <button class="bg-green-400 dark:bg-green-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-green-500 dark:hover:bg-green-700 transition duration-300">Share</button>
        </div>
      </div>

      <!-- Social Post Card 4 -->
      <div class="bg-purple-400 dark:bg-purple-700 border-4 border-black dark:border-white p-6 shadow-[6px_6_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
          <div class="ml-4">
            <h2 class="text-2xl font-bold text-black dark:text-white uppercase">David Lee</h2>
            <p class="text-black dark:text-white text-sm">3 days ago</p>
          </div>
        </div>
        <img src="https://picsum.photos/id/1040/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
        <p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Fantastic addition to my product lineup. The aesthetic is so unique and powerful, perfect for attracting attention on my e-commerce platform."</p>
        <div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
          <div class="flex space-x-4">
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 345 Likes</button>
            <button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 98 Comments</button>
          </div>
          <button class="bg-red-400 dark:bg-red-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-red-500 dark:hover:bg-red-700 transition duration-300">Share</button>
        </div>
      </div>

    </div>

    <!-- Call to Action / Footer Section -->
    <div class="flex flex-col sm:flex-row justify-between items-center border-t-4 border-black dark:border-white pt-8">
      <p class="text-2xl text-black dark:text-white font-bold mb-4 sm:mb-0">Explore more products on our store!</p>
      <button class="bg-yellow-400 dark:bg-yellow-600 text-black dark:text-white px-8 py-4 border-4 border-black dark:border-white text-2xl font-bold uppercase shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)] hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">Shop Now</button>
    </div>

  </div>
</div>

Volet Composantes sociales

Un composant de médias sociaux réactif avec prise en charge du mode sombre pour les sites Web d’entreprise, avec une palette de couleurs triadique.

Ouvrir Aperçu

                <div class="dark:bg-gray-900 bg-teal-100 p-6 flex flex-col md:flex-row items-center justify-around">
  <div class="dark:bg-gray-800 bg-teal-200 rounded-lg shadow-lg p-6 m-4 w-full md:w-1/3">
    <h3 class="dark:text-white text-teal-900 text-xl font-semibold mb-4">Our Latest Post</h3>
    <img src="https://picsum.photos/400/200" alt="Blog Post Image" class="rounded-md mb-4">
    <p class="dark:text-gray-300 text-teal-800 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a href="#" class="dark:text-purple-400 text-blue-700 hover:underline">Read More</a>
  </div>

  <div class="dark:bg-gray-800 bg-red-200 rounded-lg shadow-lg p-6 m-4 w-full md:w-1/3">
    <h3 class="dark:text-white text-red-900 text-xl font-semibold mb-4">Connect With Us</h3>
    <div class="flex items-center mb-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="dark:text-gray-300 text-red-800">Follow us on Twitter!</p>
    </div>
    <button class="dark:bg-purple-600 bg-blue-600 text-white px-4 py-2 rounded-md hover:dark:bg-purple-700 hover:bg-blue-700">Follow</button>
  </div>

  <div class="dark:bg-gray-800 bg-orange-200 rounded-lg shadow-lg p-6 m-4 w-full md:w-1/3">
    <h3 class="dark:text-white text-orange-900 text-xl font-semibold mb-4">Our Community</h3>
    <ul class="list-disc list-inside dark:text-gray-300 text-orange-800">
      <li>10K+ Members</li>
      <li>Active Discussions</li>
      <li>Exclusive Content</li>
    </ul>
    <a href="#" class="dark:text-purple-400 text-blue-700 hover:underline mt-4 block">Join Our Community</a>
  </div>
</div>

Volet Composantes sociales

Composant social Composant avec un design skeuomorphe, une palette de couleurs complémentaire et une complexité modérée. Il est conçu pour les sites Web d’entreprise, est réactif et prend en charge les thèmes sombres.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center font-sans"><div class="bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 max-w-md w-full transform transition duration-500 hover:scale-105 group" style="box-shadow: 0 15px 30px rgba(0,0,0,0.2), inset 0 -5px 10px rgba(0,0,0,0.1), inset 0 5px 10px rgba(255,255,255,0.7);"> <div class="flex justify-center mb-6"><img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 group-hover:border-purple-500 transition duration-500" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" style="box-shadow: 0 0 15px rgba(0,0,0,0.2);"></div><h2 class="text-3xl font-extrabold text-gray-800 dark:text-white text-center mb-4 group-hover:text-purple-600 transition duration-500" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">John Doe</h2><p class="text-gray-600 dark:text-gray-300 text-center mb-8" style="text-shadow: 0.5px 0.5px 1px rgba(255,255,255,0.4);">Software Engineer at Acme Corp</p><div class="flex justify-around items-center mb-8"><div class="text-center"><p class="text-2xl font-bold text-blue-600 dark:text-blue-400" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">5.2K</p><p class="text-gray-500 dark:text-gray-400 text-sm">Followers</p></div><div class="border-l border-gray-300 dark:border-gray-600 h-10"></div><div class="text-center"><p class="text-2xl font-bold text-green-600 dark:text-green-400" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">1.8K</p><p class="text-gray-500 dark:text-gray-400 text-sm">Following</p></div><div class="border-l border-gray-300 dark:border-gray-600 h-10"></div><div class="text-center"><p class="text-2xl font-bold text-red-600 dark:text-red-400" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">250</p><p class="text-gray-500 dark:text-gray-400 text-sm">Posts</p></div></div><div class="flex flex-col space-y-4"><button class="bg-gradient-to-br from-purple-600 to-indigo-700 text-white py-3 px-6 rounded-xl text-lg font-semibold hover:from-purple-700 hover:to-indigo-800 transition duration-300 transform hover:-translate-y-1 shadow-lg dark:shadow-xl" style="box-shadow: inset 0 2px 5px rgba(255,255,255,0.3), inset 0 -2px 5px rgba(0,0,0,0.3), 0 5px 15px rgba(0,0,0,0.2);">Follow</button><button class="bg-gradient-to-br from-yellow-500 to-orange-600 text-white py-3 px-6 rounded-xl text-lg font-semibold hover:from-yellow-600 hover:to-orange-700 transition duration-300 transform hover:-translate-y-1 shadow-lg dark:shadow-xl" style="box-shadow: inset 0 2px 5px rgba(255,255,255,0.3), inset 0 -2px 5px rgba(0,0,0,0.3), 0 5px 15px rgba(0,0,0,0.2);">Message</button></div></div></div>

Volet Composantes sociales

Un composant de médias sociaux de style rétro/vintage doté d’une interface riche avec de multiples éléments interactifs, conçu avec des couleurs complémentaires et prenant en charge le mode sombre.

Ouvrir Aperçu

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h1 class="text-3xl font-bold text-center text-blue-800 dark:text-blue-300 mb-4">Retro Social Media</h1>
    <div class="bg-white dark:bg-gray-700 rounded-lg p-4">
        <div class="flex mb-4">
            <img class="w-16 h-16 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
            <div>
                <h2 class="text-lg font-semibold text-blue-700 dark:text-blue-200">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
            </div>
        </div>
        <p class="text-gray-800 dark:text-gray-200 mb-4">Feeling nostalgic about the good old days of the 80s and 90s. What’s your favorite memory?</p>
        <img class="w-full h-auto rounded-lg mb-4" src="https://picsum.photos/400/200?random=1" alt="Retro Image">
        <div class="flex justify-between">
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-200">Like</button>
            <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition duration-200">Comment</button>
            <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-200">Share</button>
        </div>
    </div>
    <div class="margin-top: 8px flex justify-between items-center text-gray-600 dark:text-gray-300 text-sm">
        <span class="cursor-pointer hover:underline">12 Likes</span>
        <span class="cursor-pointer hover:underline">3 Comments</span>
    </div>
</div>

Carte d’auteur 3D Social

Un composant de carte d’auteur réactif avec des effets 3D et des liens vers les réseaux sociaux, conçu pour les sections de blog/contenu. Il dispose d’un schéma de couleurs complémentaires (bleu pour l’identité/les infos, orange pour les accents/CTA), prend en charge le mode sombre et utilise Tailwind CSS pour le style. Le design est d’une complexité « simple » avec une mise en page de base et des éléments minimaux, mais le « design 3D » est incorporé pour la profondeur et l’engagement en utilisant des ombres et des effets de survol. Le composant comprend un avatar, le nom de l’auteur, une courte biographie, des icônes de médias sociaux et un bouton d’appel à l’action « Suivez-moi ». Il utilise un avatar randomuser.me comme espace réservé.

Ouvrir Aperçu

                <!-- Ensure Tailwind CSS is included in your project -->
<!-- This is a wrapper for demonstration purposes, the actual component starts with the card -->
<div class="min-h-screen bg-gray-100 dark:bg-slate-900 flex items-center justify-center p-4 antialiased">

  <!-- Start of Social Author Card Component -->
  <div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl p-6 sm:p-8 w-full max-w-md transform hover:scale-[1.01] transition-transform duration-300">
    
    <!-- Avatar -->
    <div class="flex justify-center mb-5">
      <img class="w-24 h-24 md:w-28 md:h-28 rounded-full shadow-xl border-4 border-orange-500 dark:border-orange-600 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
    </div>

    <!-- Author Info -->
    <div class="text-center">
      <h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-1">Sarah Meyers</h2>
      <p class="text-sm text-gray-500 dark:text-slate-400 mb-4">Lead Content Creator</p>
      <p class="text-gray-700 dark:text-slate-300 text-sm sm:text-base leading-relaxed mb-6 px-2 sm:px-4">
        Crafting stories and sharing insights on modern web development and digital trends. Join me on my journey!
      </p>
    </div>

    <!-- Social Links -->
    <div class="flex justify-center space-x-3 sm:space-x-4 mb-8">
      <!-- Twitter/X Icon -->
      <a href="#" title="Twitter" class="group w-10 h-10 sm:w-11 sm:h-11 flex items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:bg-blue-500 hover:text-white dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-blue-500 dark:hover:text-white shadow-md hover:shadow-lg transform hover:-translate-y-0.5 active:translate-y-px transition-all duration-150">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 sm:w-6 sm:h-6">
          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
        </svg>
      </a>
      <!-- LinkedIn Icon -->
      <a href="#" title="LinkedIn" class="group w-10 h-10 sm:w-11 sm:h-11 flex items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:bg-blue-500 hover:text-white dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-blue-500 dark:hover:text-white shadow-md hover:shadow-lg transform hover:-translate-y-0.5 active:translate-y-px transition-all duration-150">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 sm:w-6 sm:h-6">
          <path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3v9zM6.5 8.25A1.75 1.75 0 118.25 6.5 1.75 1.75 0 016.5 8.25zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66V19z"></path>
        </svg>
      </a>
      <!-- GitHub Icon -->
      <a href="#" title="GitHub" class="group w-10 h-10 sm:w-11 sm:h-11 flex items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:bg-blue-500 hover:text-white dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-blue-500 dark:hover:text-white shadow-md hover:shadow-lg transform hover:-translate-y-0.5 active:translate-y-px transition-all duration-150">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 sm:w-6 sm:h-6">
          <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.036 1.531 1.036.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.853 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.001 10.001 0 0022 12.017C22 6.484 17.522 2 12 2z"></path>
        </svg>
      </a>
    </div>

    <!-- Follow Button -->
    <div class="flex justify-center">
      <button class="w-full sm:w-auto px-8 py-3 bg-orange-500 hover:bg-orange-600 active:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 dark:active:bg-orange-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 active:translate-y-px active:shadow-md transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-500 focus:ring-opacity-75">
        Follow Me
      </button>
    </div>

  </div>
  <!-- End of Social Author Card Component -->

</div>

Composantes sociales

Un composant social skeuomorphe conçu à des fins de blogs/contenu avec des couleurs vives et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="max-w-4xl mx-auto p-4 bg-white dark:bg-gray-900 rounded-lg shadow-lg">
  <h1 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-6">Recent Posts</h1>
  <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 mb-4 shadow-md flex items-center space-x-4">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-14 h-14 rounded-full shadow-lg">
    <div class="flex-1">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-400">Posted a new article about technology trends in 2023.</p>
      <span class="text-sm text-blue-500 dark:text-blue-300">2 hours ago</span>
    </div>
    <a href="#" class="text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-500 dark:hover:bg-blue-600 px-4 py-2 rounded-lg">Read More</a>
  </div>

  <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 mb-4 shadow-md flex items-center space-x-4">
    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-14 h-14 rounded-full shadow-lg">
    <div class="flex-1">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h2>
      <p class="text-gray-600 dark:text-gray-400">Exploring the wonders of the universe and beyond.</p>
      <span class="text-sm text-blue-500 dark:text-blue-300">4 hours ago</span>
    </div>
    <a href="#" class="text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-500 dark:hover:bg-blue-600 px-4 py-2 rounded-lg">Read More</a>
  </div>

  <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 mb-4 shadow-md flex items-center space-x-4">
    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-14 h-14 rounded-full shadow-lg">
    <div class="flex-1">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Mark Lee</h2>
      <p class="text-gray-600 dark:text-gray-400">Designing modern interfaces with UX principles.</p>
      <span class="text-sm text-blue-500 dark:text-blue-300">1 day ago</span>
    </div>
    <a href="#" class="text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-500 dark:hover:bg-blue-600 px-4 py-2 rounded-lg">Read More</a>
  </div>

  <div class="text-right">
    <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">See all posts &rarr;</a>
  </div>
</div>

Volet Composantes sociales

Un composant simple de médias sociaux conçu avec le Skeuomorphisme et une palette de couleurs monochromatiques pour le contenu du blog. Il dispose d’une mise en page réactive et d’un support de thème sombre utilisant Tailwind CSS.

Ouvrir Aperçu

                <div class="max-w-sm mx-auto bg-gray-100 dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden md:max-w-2xl m-5">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/social/400/300" alt="Social image">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-gray-500 dark:text-gray-400 font-semibold">Social Update</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Engaging Title Here</a>
      <p class="mt-2 text-gray-500 dark:text-gray-400">This is a short description of the social update. It's designed to be concise and engaging for blog readers.</p>
      <div class="mt-4 flex items-center">
        <img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div class="text-sm">
          <p class="text-gray-900 dark:text-white leading-none">John Doe</p>
          <p class="text-gray-600 dark:text-gray-500">Posted on Oct 26, 2023</p>
        </div>
      </div>
    </div>
  </div>
</div>

Volet Composantes sociales

Un composant simple de médias sociaux utilisant Tailwind CSS et conçu selon les principes du Material Design. Il présente des couleurs vives et une prise en charge du mode sombre, ce qui le rend adapté aux interfaces de réseaux sociaux.

Ouvrir Aperçu

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Social Media Image">
    <div class="p-4">
        <div class="flex items-center space-x-3">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div>
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-300">@johndoe</p>
            </div>
        </div>
        <p class="mt-2 text-gray-600 dark:text-gray-300">This is a sample post demonstrating the vibrant and energetic design suitable for social media engagement.</p>
        <div class="mt-4 flex justify-between">
            <button class="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">Like</button>
            <button class="px-4 py-2 text-white bg-green-500 rounded hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700">Comment</button>
        </div>
    </div>
</div>

Volet Composantes sociales

Une composante sociale pour un tableau de bord au design brutaliste et pastel. Il affiche un profil utilisateur avec un nom, un titre et un avatar, et comprend des boutons pour les actions sociales telles que le suivi, la messagerie et le partage. Le composant est réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="bg-pink-200 dark:bg-purple-900 p-6 rounded-lg shadow-xl border-2 border-black">
  <div class="flex items-center">
    <img class="w-16 h-16 rounded-full border-2 border-black" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
    <div class="ml-4">
      <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100">John Doe</h2>
      <p class="text-gray-700 dark:text-gray-300">Lead brutalist designer</p>
    </div>
  </div>
  <div class="mt-6 grid grid-cols-3 gap-4">
    <button class="bg-blue-400 hover:bg-blue-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white">Follow</button>
    <button class="bg-green-400 hover:bg-green-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-green-600 dark:hover:bg-green-700 dark:text-white">Message</button>
    <button class="bg-yellow-400 hover:bg-yellow-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:text-white">Share</button>
  </div>
</div>