Composants Composants de rétroaction Memphis_Social_Media_Feedback_Component

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.

Aperçu

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.

Ouvrir

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.

Ouvrir

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.

Ouvrir