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
Composant Commentaires pour les organisations à but non lucratif (style 3D)
Il s’agit d’un composant de rétroaction simple et réactif pour les organisations à but non lucratif, avec une esthétique de conception 3D et des tons chauds de coucher de soleil. Inclut la prise en charge du mode sombre.
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 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.