CCHub Logo CCHub Tailwind Collection
Composants Composants de rétroaction Composant Composants de rétroaction

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.

Aperçu

HTML Code 

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
  <div class="flex items-center justify-between mb-4">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white">User Feedback</h2>
    <span class="text-sm text-gray-500 dark:text-gray-400">Last 30 days</span>
  </div>
  <div class="space-y-4">
    <div class="flex items-start space-x-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="flex items-center justify-between">
          <h4 class="text-sm font-medium text-gray-900 dark:text-white">John Doe</h4>
          <span class="text-xs text-gray-500 dark:text-gray-400">2 days ago</span>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-300">This dashboard is very helpful. The data is presented clearly.</p>
      </div>
    </div>
    <div class="flex items-start space-x-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="flex items-center justify-between">
          <h4 class="text-sm font-medium text-gray-900 dark:text-white">Jane Smith</h4>
          <span class="text-xs text-gray-500 dark:text-gray-400">5 days ago</span>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-300">I love the new features! Especially the real-time updates.</p>
      </div>
    </div>
    <div class="flex items-start space-x-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="flex items-center justify-between">
          <h4 class="text-sm font-medium text-gray-900 dark:text-white">Peter Jones</h4>
          <span class="text-xs text-gray-500 dark:text-gray-400">1 week ago</span>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-300">Could you add an option to export data as a CSV file?</p>
      </div>
    </div>
  </div>
  <div class="mt-6 flex justify-center">
    <button class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-indigo-700 dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800">View All Feedback</button>
  </div>
</div>

Composants associés

Composante de rétroaction

Un composant de retour d’information conçu pour les interfaces de médias sociaux, intégrant des micro-interactions et une palette de couleurs en niveaux de gris, avec prise en charge du thème sombre.

Ouvrir

Composant Composants de rétroaction

Il s’agit d’un composant de commentaires minimaliste conçu pour le commerce électronique, avec des couleurs pastel douces, un design réactif et la prise en charge des thèmes sombres. Le composant comprend un formulaire de commentaires avec des champs de saisie, un système d’évaluation et un bouton d’envoi, le tout stylisé avec Tailwind CSS.

Ouvrir

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é.

Ouvrir