Rechercher des composants

Catégories

Composants Composantes sociales

Composantes sociales

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

Volet Composantes sociales

Un composant de médias sociaux conçu pour un portfolio, avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS. Il comprend des espaces réservés pour les avatars et les noms des utilisateurs.

Ouvrir Aperçu

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md w-full max-w-sm mx-auto">
  <div class="flex items-center">
    <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/81.jpg" alt="Avatar">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Jane Doe</h2>
  </div>
  <p class="mt-4 text-gray-600 dark:text-gray-300">Sharing my latest design project! Check out the details and let me know what you think.</p>
  <div class="flex justify-between items-center mt-6">
    <div class="flex space-x-4">
      <svg class="w-6 h-6 text-gray-500 dark:text-gray-400" 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="M14 10h4.764a2 2 0 011.803 2.855l-1.782 5.583a2 2 0 01-1.803 1.112H9.118c-.748 0-1.504-.316-1.88-.922l-.443-.665A2 2 0 015 15.999v-3l2-2h2.586a1 1 0 01.707.293l2.586 2.586z"></path></svg>
      <svg class="w-6 h-6 text-gray-500 dark:text-gray-400" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.913 9.913 0 01-3.981-.815Thead6C.851 17.542.001 14.824.001 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
      <svg class="w-6 h-6 text-gray-500 dark:text-gray-400" 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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
    </div>
    <span class="text-gray-500 dark:text-gray-400 text-sm">2h ago</span>
  </div>
</div>

Volet Composantes sociales

Composants sociaux Composant avec un design brutal, des effets réactifs et une prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-900 text-black dark:text-white border-4 border-black dark:border-white p-6">
  <div class="flex justify-between items-center mb-4">
    <h2 class="text-2xl font-bold font-mono">Social Feed</h2>
    <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 border-2 border-black dark:border-white font-mono">Follow</button>
  </div>
  <div class="space-y-6">
    <div class="border-2 border-black dark:border-white p-4">
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
        <div class="ml-4">
          <p class="font-bold font-mono">John Doe</p>
          <p class="text-sm font-mono">@johndoe</p>
        </div>
      </div>
      <p class="mb-4 font-mono">This is an example social media post. Exciting content and brutalist design!</p>
      <img src="https://picsum.photos/600/400" alt="Post Image" class="w-full h-48 object-cover border-2 border-black dark:border-white">
      <div class="flex justify-between mt-4 font-mono">
        <span>Likes: 100</span>
        <span>Comments: 20</span>
      </div>
    </div>

    <div class="border-2 border-black dark:border-white p-4">
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
        <div class="ml-4">
          <p class="font-bold font-mono">Jane Smith</p>
          <p class="text-sm font-mono">@janesmith</p>
        </div>
      </div>
      <p class="mb-4 font-mono">Another brutalist-inspired post. Raw and captivating!</p>
      <div class="flex justify-between mt-4 font-mono">
        <span>Likes: 50</span>
        <span>Comments: 15</span>
      </div>
    </div>
  </div>
</div>

Volet Composantes sociales

Un composant social brutaliste présentant un design audacieux avec un contraste élevé, des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS. Comprend des avatars d’utilisateurs, des liens vers les réseaux sociaux et des images de remplacement.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Connect With Us</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=1" alt="Profile 1" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">John Doe</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@john_doe</a>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=2" alt="Profile 2" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">Jane Smith</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@jane_smith</a>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=3" alt="Profile 3" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">Alice Johnson</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@alice_j</a>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=4" alt="Profile 4" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">Bob Brown</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@bob_brown</a>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white">Follow Us</h3>
        <div class="flex space-x-4 mt-2">
            <a href="#" class="text-gray-600 dark:text-gray-400">Facebook</a>
            <a href="#" class="text-gray-600 dark:text-gray-400">Twitter</a>
            <a href="#" class="text-gray-600 dark:text-gray-400">Instagram</a>
            <a href="#" class="text-gray-600 dark:text-gray-400">LinkedIn</a>
        </div>
    </div>
</div>

Composante sociale du skeuomorphisme

Composant de médias sociaux avec conception Skeuomorphism, effets réactifs et prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="skeuosocial-component bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl p-6 max-w-sm mx-auto">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-700 shadow-md" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    <div class="ml-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>
    </div>
  </div>
  <p class="text-gray-700 dark:text-gray-300 mb-4">
    This is a skeuomophic social media component design using Tailwind CSS.
  </p>
  <img class="rounded-lg shadow-md mb-4" src="https://picsum.photos/400/250" alt="Post Image">
  <div class="flex justify-between items-center text-gray-600 dark:text-gray-400">
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.95-4.95a1 1 0 111.414 1.414L10 15.414l-6.364-6.364a1 1 0 111.414-1.414L10 12.586z"></path></svg>
      <span>120 Likes</span>
    </div>
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3 1h10v8H5V6zm1 1v6h8V7H6z"></path></svg>
      <span>Opens</span>
    </div>
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 3a1 1 0 011 1v5a1 1 0 01-2 0V6a1 1 0 011-1zm0 10a1 1 0 100-2 1 1 0 000 2z"></path></svg>
      <span>Share</span>
    </div>
  </div>
</div>