Componenti Componenti di feedback Componente Componenti di feedback
Componente Componenti di feedback

Un complesso componente di feedback ispirato al Material Design per piattaforme di forum/community, con più elementi interattivi, combinazione di colori complementari e reattività completa con supporto per la modalità oscura.
Anteprima

Codice HTML

<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans antialiased">

  <!-- Feedback Card Container -->
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden mb-8">

    <!-- Header Section -->
    <div class="bg-indigo-600 dark:bg-indigo-900 p-4 sm:p-6 text-white flex items-center justify-between">
      <div>
        <h2 class="text-2xl sm:text-3xl font-bold mb-1">Community Feedback</h2>
        <p class="text-indigo-100 text-sm sm:text-base">Help us improve by sharing your thoughts.</p>
      </div>
      <span class="material-icons-outlined text-white text-3xl sm:text-4xl">feedback</span>
    </div>

    <!-- Feedback Type/Category Selection -->
    <div class="border-b border-gray-200 dark:border-gray-700 px-4 sm:px-6 py-4">
      <div class="flex flex-wrap gap-2 text-sm sm:text-base">
        <button class="px-4 py-2 rounded-full font-medium text-indigo-700 bg-indigo-100 dark:bg-indigo-700 dark:text-indigo-100 shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
          Suggestion
        </button>
        <button class="px-4 py-2 rounded-full font-medium text-gray-700 bg-gray-200 dark:bg-gray-600 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
          Bug Report
        </button>
        <button class="px-4 py-2 rounded-full font-medium text-gray-700 bg-gray-200 dark:bg-gray-600 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
          Question
        </button>
        <button class="px-4 py-2 rounded-full font-medium text-gray-700 bg-gray-200 dark:bg-gray-600 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
          Other
        </button>
      </div>
    </div>

    <!-- Main Feedback Form -->
    <div class="p-4 sm:p-6">
      <form>
        <div class="mb-4">
          <label for="feedback-title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Title <span class="text-red-500">*</span></label>
          <input type="text" id="feedback-title" placeholder="e.g., Improve search functionality" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-gray-50 transition duration-300 ease-in-out placeholder-gray-400 dark:placeholder-gray-500" required>
        </div>

        <div class="mb-4">
          <label for="feedback-description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description <span class="text-red-500">*</span></label>
          <textarea id="feedback-description" rows="6" placeholder="Provide a detailed description of your feedback, including steps to reproduce bugs if applicable." class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-gray-50 resize-y transition duration-300 ease-in-out placeholder-gray-400 dark:placeholder-gray-500" required></textarea>
        </div>

        <div class="mb-4">
          <label for="attachment" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Attachments (Optional)</label>
          <div class="flex items-center space-x-4">
            <label class="cursor-pointer bg-indigo-500 hover:bg-indigo-600 text-white font-semibold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
              Upload File
              <input type="file" id="attachment" class="hidden">
            </label>
            <span class="text-sm text-gray-500 dark:text-gray-400" id="file-name">No file chosen</span>
          </div>
        </div>

        <div class="mb-6 flex items-center justify-between">
          <label for="email-notification" class="inline-flex items-center cursor-pointer">
            <input type="checkbox" id="email-notification" class="form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500 transition duration-150 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:checked:bg-indigo-600">
            <span class="ml-2 text-sm text-gray-900 dark:text-gray-300">Notify me of updates</span>
          </label>
          <div class="group relative inline-block">
            <spa class="material-icons-outlined text-gray-400 dark:text-gray-500 text-lg sm:text-xl cursor-help">info</span>
            <div class="absolute hidden group-hover:block bg-gray-700 dark:bg-gray-600 text-white text-xs rounded py-1 px-2 right-0 bottom-full mb-2 w-48 shadow-lg z-10 transition duration-300 ease-in-out opacity-0 group-hover:opacity-100 pointer-events-none">
              We'll send you email updates on the status of your feedback.
              <div class="absolute left-1/2 -ml-1 bottom-0 transform translate-y-full border-solid border-8 border-transparent border-t-gray-700 dark:border-t-gray-600"></div>
            </div>
          </div>
        </div>

        <div class="flex justify-end space-x-3">
          <button type="button" class="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg">
            Cancel
          </button>
          <button type="submit" class="px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg">
            Submit Feedback
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- Recently Submitted Feedback Section (Example) -->
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="bg-emerald-600 dark:bg-emerald-900 p-4 sm:p-6 text-white flex items-center justify-between">
      <div>
        <h3 class="text-xl sm:text-2xl font-bold mb-1">Recent Submissions</h3>
        <p class="text-emerald-100 text-sm sm:text-base">See what others are suggesting.</p>
      </div>
      <span class="material-icons-outlined text-white text-3xl sm:text-4xl">forum</span>
    </div>
    <div class="p-4 sm:p-6 space-y-4">

      <!-- Feedback Item 1 -->
      <div class="flex items-start space-x-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">John Doe <span class="text-indigo-600 dark:text-indigo-400 ml-2">• Suggestion</span></p>
          <p class="text-base font-medium text-gray-900 dark:text-gray-100">Add dark mode to the forum</p>
          <p class="text-sm text-gray-600 dark:text-gray-300 mt-1 line-clamp-2">It would be great to have a dark mode option to reduce eye strain, especially during late-night browsing. The current light theme is a bit too bright.</p>
          <div class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4">
            <span>2 days ago</span>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">thumb_up</span>
              <span>15</span>
            </div>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">comment</span>
              <span>3</span>
            </div>
          </div>
          <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Status: <span class="font-semibold text-green-600 dark:text-green-400">In Progress</span></p>
          </div>
        </div>
      </div>

      <!-- Feedback Item 2 -->
      <div class="flex items-start space-x-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Jane Smith <span class="text-emerald-600 dark:text-emerald-400 ml-2">• Bug Report</span></p>
          <p class="text-base font-medium text-gray-900 dark:text-gray-100">Profile picture not updating</p>
          <p class="text-sm text-gray-600 dark:text-gray-300 mt-1 line-clamp-2">When I try to upload a new profile picture, it appears to upload successfully but the old picture remains visible after refreshing the page. Tried multiple browsers.</p>
          <div class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4">
            <span>5 hours ago</span>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">thumb_up</span>
              <span>7</span>
            </div>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">comment</span>
              <span>1</span>
            </div>
          </div>
          <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Status: <span class="font-semibold text-orange-600 dark:text-orange-400">Investigating</span></p>
          </div>
        </div>
      </div>

      <!-- Feedback Item 3 -->
      <div class="flex items-start space-x-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Peter Jones <span class="text-purple-600 dark:text-purple-400 ml-2">• Question</span></p>
          <p class="text-base font-medium text-gray-900 dark:text-gray-100">How to embed videos in posts?</p>
          <p class="text-sm text-gray-600 dark:text-gray-300 mt-1 line-clamp-2">I'm trying to share a YouTube video in my post but the embed code doesn't seem to work. Is there a specific way to do this or is it not supported?</p>
          <div class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4">
            <span>1 day ago</span>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">thumb_up</span>
              <span>8</span>
            </div>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">comment</span>
              <span>5</span>
            </div>
          </div>
          <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Status: <span class="font-semibold text-blue-600 dark:text-blue-400">Answered</span></p>
          </div>
        </div>
      </div>

    </div>
    <div class="p-4 sm:p-6 text-center border-t border-gray-200 dark:border-gray-700">
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm font-medium">View All Feedback</a>
    </div>
  </div>

  <!-- Required for Material Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

  <!-- Dummy JS for file input label and tooltip (not part of the JSON output requirements, but for live demo functionality) -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const fileInput = document.getElementById('attachment');
      const fileNameSpan = document.getElementById('file-name');
      if (fileInput) {
        fileInput.addEventListener('change', (event) => {
          const fileName = event.target.files[0] ? event.target.files[0].name : 'No file chosen';
          fileNameSpan.textContent = fileName;
        });
      }
    });
  </script>

</div>
Componenti correlati

Componente Componenti di feedback

Un componente di feedback minimalista progettato per l'e-commerce, con colori pastello tenui, design reattivo e supporto per temi scuri. Il componente include un modulo di feedback con campi di input, un sistema di valutazione e un pulsante di invio, il tutto con Tailwind CSS.
Aperto
Componente di feedback

Un componente di feedback progettato per le interfacce dei social media, che incorpora microinterazioni e una combinazione di colori in scala di grigi, con supporto per temi scuri.
Aperto
Componente di feedback

Componente di feedback ispirato allo scheumorfismo con una combinazione di colori analoga per un cruscotto. Progettato per essere semplice, reattivo e supporta la modalità oscura utilizzando Tailwind CSS. Utilizza shadcn/ui per migliorare lo stile e i componenti.
Aperto