Memphis_Social_Media_Feedback_Component
Un composant de retour d’information simple et réactif sur les réseaux sociaux avec l’influence du design de Memphis en utilisant des neutres chauds, avec un bouton J’aime et un indicateur de commentaire. Prend en charge le mode sombre.
HTML Code
<div class="p-4 md:p-6 lg:p-8 bg-amber-50 dark:bg-gray-800 rounded-lg shadow-md max-w-sm mx-auto font-sans relative overflow-hidden">
<!-- Memphis-style geometric elements -->
<div class="absolute top-0 left-0 w-24 h-24 bg-amber-200 dark:bg-gray-700 transform -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-lg opacity-70"></div>
<div class="absolute bottom-0 right-0 w-16 h-16 bg-red-200 dark:bg-gray-600 transform translate-x-1/3 translate-y-1/3 rounded-full opacity-70"></div>
<div class="absolute top-1/4 right-0 w-12 h-12 bg-emerald-200 dark:bg-gray-700 transform translate-x-1/2 rounded-md opacity-70"></div>
<div class="relative z-10 flex items-center justify-between text-gray-800 dark:text-gray-200">
<!-- Like Button -->
<button class="flex items-center space-x-2 p-2 rounded-full transition-all duration-300 transform active:scale-95
bg-red-300 dark:bg-red-700 hover:bg-red-400 dark:hover:bg-red-600
text-white dark:text-gray-100 shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
</svg>
<span class="font-medium text-sm">Like</span>
</button>
<!-- Comment Count -->
<div class="flex items-center space-x-2 text-gray-600 dark:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7l-7-7V3a1 1 0 011-1h10a1 1 0 011 1v7zm-5-.05A3.001 3.001 0 0010 7a3.001 3.001 0 00-3 3c0 .828.324 1.572.85 2.12L7 14h6l.15-1.15A3.001 3.001 0 0013 9.95z" clip-rule="evenodd" />
</svg>
<span class="font-medium text-sm">12 Comments</span>
</div>
</div>
</div>Composants associés
OrganicNatureInspiredFeedbackComponent
Il s’agit d’un composant de rétroaction de complexité modérée pour les sites Web d’actualités et de journalisme, avec un design inspiré de l’agriculture et de la nature. Il utilise une palette de couleurs noir et blanc avec un accent vif, est entièrement réactif et prend en charge le mode sombre.
Composant Composants de rétroaction
Composant de retour d’information Glassmorphism simple pour les médias sociaux, doté d’une palette de couleurs triadique, d’un design réactif et d’une prise en charge du thème sombre. Aucun JavaScript n’est requis.
Composant Composants de rétroaction
Composant de retour d’information sur le design minimaliste / plat pour le tableau de bord avec une palette de couleurs complémentaires et une complexité modérée, une prise en charge réactive et sombre. Utilise HTML et Tailwind CSS. Pas de JavaScript. Comprend des éléments interactifs. Images de picsum.photos et avatars de randomuser.me.