Componente Componenti interattivi
Un componente interattivo per i social media con una combinazione di colori pastello, complessità moderata, design reattivo e supporto per la modalità oscura, costruito con Tailwind CSS e seguendo i principi del Material Design. Utilizza immagini fittizie da picsum.photos e avatar da randomuser.me.
Codice HTML
<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>Componenti correlati
Componenti interattivi
Un componente web progettato con elementi scheumorfici per le interfacce dei social media con una combinazione di colori complementari e il supporto del tema scuro.
Componente Componenti Interattivi Neumorfismo
Componenti interattivi per neumorfismo Componente per siti web aziendali/aziendali
Componente Componenti interattivi
Un componente interattivo in stile neumorfismo con effetti reattivi e supporto per temi scuri.