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
ArtDeco_JobCard
Un composant de carte de travail simple et réactif avec une esthétique Art déco, des couleurs rétro sourdes et une prise en charge du mode sombre, adapté aux sites d’emploi ou aux plateformes de carrière.
Composant de portefeuille interactif
Un composant de portefeuille réactif avec des micro-interactions et une palette de couleurs pastel, prenant en charge le mode sombre avec Tailwind CSS.
Social_Dating_Interactive_Component
Un composant complexe et interactif de plate-forme sociale/de rencontre conçu avec un style d’entreprise propre et digne de confiance utilisant une palette de couleurs violet/violet. Comprend une mise en page réactive et la prise en charge du mode sombre.