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 minimalistischem/flachem Design, Farbschema in Erdtönen und komplexer Komplexität für einen Dashboard-Zweck, implementiert mit Tailwind CSS. Responsives Design mit Unterstützung für dunkle Themen. Verwendet picsum.photos für Bilder und randomuser.me für Avatare.

Offen

Komponente "Interaktive Komponenten"

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

Offen

Komponente "Interaktive Komponenten"

Eine verspielte und helle interaktive Komponente, die für Fertigungs-/Industrieunternehmen entwickelt wurde, mit einer schwarz-weißen Basis mit einer lebendigen Akzentfarbe, abgerundeten Elementen und einer freundlichen Ästhetik.

Offen