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

Einfache Dashboard-Komponente

Einfache, reaktionsschnelle Dashboard-Komponente mit Material Design-Prinzipien und lebendigem Farbschema.

Offen

Interaktive Komponente für soziale Medien

Eine komplexe Social-Media-Komponente mit einer Wald-/Grün-Farbpalette mit Neon-/Leuchteffekten, die sich für interaktive Feeds mit mehreren Elementen eignet. Beinhaltet responsives Design und Unterstützung für den Dunkelmodus.

Offen

Komponente "Interaktive Komponenten"

Eine komplexe E-Commerce-Produktkarte mit 3D-Designelementen in einem triadischen Farbschema, das für interaktive Online-Shopping-Erlebnisse mit Responsive- und Dark-Mode-Unterstützung entwickelt wurde.

Offen