Composante de rétroaction
Un composant de retour d’information réactif conçu pour les interfaces de réseaux sociaux, incorporant des éléments de conception 3D dans une palette de couleurs en niveaux de gris avec prise en charge du mode sombre, adapté à la complexité moyenne et à l’interactivité.
HTML Code
<div class="max-w-md mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform hover:shadow-2xl transition-shadow duration-300">
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
<div class="ml-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Name</h2>
<p class="text-gray-600 dark:text-gray-300">April 10, 2023</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">
This is an example feedback message where users can share their thoughts about the platform and engage with the community.
</p>
<div class="flex justify-between items-center">
<button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Like</button>
<button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Reply</button>
</div>
</div>
<div class="max-w-md mx-auto mt-4 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform hover:shadow-2xl transition-shadow duration-300">
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
<div class="ml-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another User</h2>
<p class="text-gray-600 dark:text-gray-300">April 11, 2023</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">
Feedback is important to shape the experience in a positive direction and enhance user engagement within the social platform.
</p>
<div class="flex justify-between items-center">
<button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Like</button>
<button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Reply</button>
</div>
</div>Composants associés
Volet de rétroaction 23
Un composant de retour d’information conçu dans le style Material Design, avec des animations réactives et la prise en charge des thèmes sombres, construit avec Tailwind CSS.
Composante de rétroaction
Composant de rétroaction inspiré du skeuomorphisme avec une palette de couleurs analogue pour un tableau de bord. Conçu pour être simple, réactif et prend en charge le mode sombre à l’aide de Tailwind CSS. Utilise shadcn/ui pour améliorer le style et les composants.
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.