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
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.
Composants de rétroaction
Un composant de retour d’information complexe conçu pour les sites Web d’entreprise/d’entreprise en mode sombre, utilisant une palette de couleurs complémentaire.
Composant Composants de rétroaction
Une section complexe et réactive de commentaires et de témoignages pour les sites Web d’entreprise, conçue avec une interface utilisateur en mode sombre et une palette de couleurs pastel. Comprend plusieurs éléments interactifs tels que des témoignages, un formulaire de contact et un affichage des évaluations.