Composante des composantes interactives
Un composant interactif pour les médias sociaux avec une palette de couleurs pastel, une complexité modérée, un design réactif et une prise en charge du mode sombre, construit avec Tailwind CSS et suivant les principes de conception matérielle. Il utilise des images factices de picsum.photos et des avatars de randomuser.me.
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>Composants associés
Composante des composantes interactives
Un composant interactif 3D présentant des cartes avec des effets de profondeur, un design réactif et une prise en charge du thème sombre.
Composante des composantes interactives
Composant de composants interactifs avec conception matérielle, schéma de couleurs triadique, complexité complexe, pour le commerce électronique, avec conception réactive et prise en charge du thème sombre.
Composante des composantes interactives
Composant de composants interactifs avec conception 3D, palette de couleurs monochromatique et complexité modérée pour le commerce électronique, avec conception réactive et prise en charge du thème sombre.