CCHub Logo CCHub Tailwind Collection
Komponenten Interaktive Komponenten Komponente "Interaktive Komponenten"

Komponente "Interaktive Komponenten"

Eine interaktive Social-Media-Komponente mit pastellfarbenem Farbschema, moderater Komplexität, responsivem Design und Unterstützung für den Dunkelmodus, die mit Tailwind CSS erstellt wurde und den Prinzipien von Material Design folgt. Es verwendet Dummy-Bilder von picsum.photos und Avatare von randomuser.me.

Vorschau

HTML-Code 

<div class="container mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
  <div class="flex items-center mb-4">
    <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <div class="text-gray-900 dark:text-white font-bold text-lg">John Doe</div>
  </div>
  <img class="w-full h-64 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum/800/400" alt="Post Image">
  <p class="text-gray-700 dark:text-gray-300 mb-4">This is a sample social media post with a pastel color scheme and Material Design styling.</p>
  <div class="flex justify-between items-center text-gray-600 dark:text-gray-400 text-sm">
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" 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.789 2.894l-3.5 7A2 2 0 0115.263 21c-.644 0-1.25-.302-1.63-0.8L10 14V10m4 0H5a2 2 0 00-2 2v6a2 2 0 002 2h10l2.293 2.293c.032.032.07.05.107.05h.1l.1-.147l.145-.194-.013-.014L17 21.5l.354-.354.353.354z"></path></svg>
      <span>120 Likes</span>
    </div>
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" 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-.815F7.001 16.88C18.745 10.65 7.544 10.5 21 12z"></path></svg>
      <span>35 Comments</span>
    </div>
  </div>
  <div class="mt-4 flex items-center">
    <input type="text" class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500" placeholder="Add a comment...">
    <button class="ml-2 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Post</button>
  </div>
</div>

Verwandte Komponenten

Komponente "Interaktive Komponenten"

Interaktive Komponentenkomponente mit Materialdesign, triadischem Farbschema, komplexer Komplexität, für E-Commerce, mit responsivem Design und Unterstützung für dunkle Themen.

Offen

Komponente "Interaktive Komponenten"

Eine komplexe interaktive Komponente für soziale Medien mit skeuomorphem Design und monochromatischem Farbschema.

Offen

Komponente "Interaktive Komponenten"

Eine interaktive Komponente mit Glassmorphism-Design, Pastell-Farbschema und einfachem Layout für Blog-Inhalte. Es ist reaktionsschnell und unterstützt den Dunkelmodus.

Offen