Cerca componenti

Categorie

Componenti Componenti di feedback

Componenti di feedback

Componenti che forniscono feedback e notifiche agli utenti

Componente Componenti di feedback

Un'interfaccia utente complessa in modalità scura triadica per la sezione di feedback di una piattaforma educativa, con vari tipi di feedback ed elementi interattivi.

Aperto Anteprima

                <section class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gray-900 text-gray-200 dark:bg-gray-950 dark:text-gray-100 font-sans">
  <div class="max-w-7xl mx-auto space-y-10">

    <!-- Header Section -->
    <header class="flex flex-col md:flex-row items-center justify-between pb-8 border-b border-purple-700/50 dark:border-purple-800/50">
      <h1 class="text-4xl sm:text-5xl font-extrabold text-blue-400 dark:text-blue-300 mb-4 md:mb-0">Student Feedback Hub</h1>
      <div class="flex items-center space-x-4">
        <input type="search" placeholder="Search feedback..." class="px-4 py-2 rounded-lg bg-gray-800 dark:bg-gray-800 border border-teal-500/50 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-teal-400 focus:border-transparent transition duration-300">
        <button class="px-5 py-2 rounded-lg bg-purple-600 hover:bg-purple-700 text-white font-semibold transition duration-300 shadow-lg hover:shadow-xl">
          Give New Feedback
        </button>
      </div>
    </header>

    <!-- Feedback Categories/Filter Section -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      <div class="p-5 rounded-xl bg-gradient-to-br from-blue-700 to-blue-900 dark:from-blue-800 dark:to-blue-950 shadow-xl border border-blue-600/50 dark:border-blue-700/50 text-center">
        <p class="text-blue-200 text-sm uppercas text-gray-200">Total Feedback</p>
        <p class="text-4xl font-bold mt-2 text-white">1,245</p>
      </div>
      <div class="p-5 rounded-xl bg-gradient-to-br from-teal-700 to-teal-900 dark:from-teal-800 dark:to-teal-950 shadow-xl border border-teal-600/50 dark:border-teal-700/50 text-center">
        <p class="text-teal-200 text-sm uppercase text-gray-200">Positive</p>
        <p class="text-4xl font-bold mt-2 text-white">890</p>
      </div>
      <div class="p-5 rounded-xl bg-gradient-to-br from-purple-700 to-purple-900 dark:from-purple-800 dark:to-purple-950 shadow-xl border border-purple-600/50 dark:border-purple-700/50 text-center">
        <p class="text-purple-200 text-sm uppercase text-gray-200">Suggestions</p>
        <p class="text-4xl font-bold mt-2 text-white">210</p>
      </div>
      <div class="p-5 rounded-xl bg-gradient-to-br from-red-700 to-red-900 dark:from-red-800 dark:to-red-950 shadow-xl border border-red-600/50 dark:border-red-700/50 text-center">
        <p class="text-red-200 text-sm uppercase text-gray-200">Concerns</p>
        <p class="text-4xl font-bold mt-2 text-white">145</p>
      </div>
    </div>

    <!-- Main Feedback Content Area -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

      <!-- Left Sidebar - Filters & Categories -->
      <aside class="md:col-span-1 space-y-6">
        <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-gray-700/50 dark:border-gray-800/50">
          <h3 class="text-xl font-bold mb-4 text-blue-400 dark:text-blue-300">Filter by Category</h3>
          <ul class="space-y-3">
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg bg-gray-700/50 hover:bg-gray-700 dark:bg-gray-800/50 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Course Content <span class="text-xs bg-purple-600 px-2 py-1 rounded-full text-white">80</span></a></li>
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Instructor Performance <span class="text-xs bg-teal-600 px-2 py-1 rounded-full text-white">65</span></a></li>
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Platform Usability <span class="text-xs bg-blue-600 px-2 py-1 rounded-full text-white">40</span></a></li>
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Technical Support <span class="text-xs bg-red-600 px-2 py-1 rounded-full text-white">15</span></a></li>
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">General <span class="text-xs bg-gray-600 px-2 py-1 rounded-full text-white">120</span></a></li>
          </ul>
        </div>

        <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-gray-700/50 dark:border-gray-800/50">
          <h3 class="text-xl font-bold mb-4 text-purple-400 dark:text-purple-300">Filter by Rating</h3>
          <div class="flex items-center space-x-3 mb-3">
            <input type="range" min="1" max="5" value="4" class="flex-grow h-2 rounded-lg appearance-none cursor-pointer bg-blue-600/50 dark:bg-blue-700/50 accent-blue-500">
            <span class="text-gray-300">4+ Stars</span>
          </div>
          <ul class="space-y-2">
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">5 Stars</span></label></li>
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500" checked> <span class="text-gray-300">4 Stars</span></label></li>
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">3 Stars</span></label></li>
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">2 Stars</span></label></li>
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">1 Star</span></label></li>
          </ul>
        </div>
      </aside>

      <!-- Right Content - Feedback Cards -->
      <div class="md:col-span-2 space-y-6">

        <!-- Feedback Card 1 (Positive) -->
        <article class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-teal-600/50 dark:border-teal-700/50">
          <div class="flex justify-between items-start mb-4">
            <div class="flex items-center space-x-4">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-teal-500 dark:ring-teal-600">
              <div>
                <h4 class="font-semibold text-white">Alex Johnson</h4>
                <p class="text-sm text-gray-400">Course: Advanced CSS & Tailwind</p>
              </div>
            </div>
            <div class="text-teal-400 flex items-center space-x-1">
              <span>5</span>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.113 1.178-5.875 5.728 1.389 8.082L12 18.06l-7.279 3.827 1.389-8.082-5.875-5.728 8.113-1.178L12 .587z"/></svg>
            </div>
          </div>
          <p class="text-gray-300 leading-relaxed mb-4">"This course was absolutely fantastic! The explanations were clear, and the hands-on projects really solidified my understanding of Tailwind CSS. Highly recommend it to anyone looking to master modern web design."</p>
          <div class="flex flex-wrap gap-2 text-sm">
            <span class="px-3 py-1 rounded-full bg-teal-700/50 text-teal-200">#CourseContent</span>
            <span class="px-3 py-1 rounded-full bg-teal-700/50 text-teal-200">#Excellent</span>
            <span class="px-3 py-1 rounded-full bg-teal-700/50 text-teal-200">#Practical</span>
          </div>
          <div class="flex items-center justify-between mt-4 text-gray-400">
            <span class="text-sm">Posted 2 days ago</span>
            <button class="text-blue-400 hover:text-blue-300 transition duration-300">View Details</button>
          </div>
        </article>

        <!-- Feedback Card 2 (Suggestion) -->
        <article class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-purple-600/50 dark:border-purple-700/50">
          <div class="flex justify-between items-start mb-4">
            <div class="flex items-center space-x-4">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-purple-500 dark:ring-purple-600">
              <div>
                <h4 class="font-semibold text-white">Sarah Chen</h4>
                <p class="text-sm text-gray-400">Course: JavaScript Fundamentals</p>
              </div>
            </div>
            <div class="text-purple-400 flex items-center space-x-1">
              <span>4</span>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.113 1.178-5.875 5.728 1.389 8.082L12 18.06l-7.279 3.827 1.389-8.082-5.875-5.728 8.113-1.178L12 .587z"/></svg>
            </div>
          </div>
          <p class="text-gray-300 leading-relaxed mb-4">"The JS course is solid, but I think adding more interactive coding challenges directly within the platform would significantly enhance the learning experience. Sometimes switching between platforms disrupts the flow."</p>
          <div class="flex flex-wrap gap-2 text-sm">
            <span class="px-3 py-1 rounded-full bg-purple-700/50 text-purple-200">#PlatformUsability</span>
            <span class="px-3 py-1 rounded-full bg-purple-700/50 text-purple-200">#Suggestion</span>
            <span class="px-3 py-1 rounded-full bg-purple-700/50 text-purple-200">#Engagement</span>
          </div>
          <div class="flex items-center justify-between mt-4 text-gray-400">
            <span class="text-sm">Posted 5 days ago</span>
            <button class="text-blue-400 hover:text-blue-300 transition duration-300">View Details</button>
          </div>
        </article>

        <!-- Feedback Card 3 (Concern/Bug Report) -->
        <article class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-red-600/50 dark:border-red-700/50">
          <div class="flex justify-between items-start mb-4">
            <div class="flex items-center space-x-4">
              <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-red-500 dark:ring-red-600">
              <div>
                <h4 class="font-semibold text-white">Marcus Hill</h4>
                <p class="text-sm text-gray-400">Course: Data Structures & Algorithms</p>
              </div>
            </div>
            <div class="text-red-400 flex items-center space-x-1">
              <span>2</span>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.113 1.178-5.875 5.728 1.389 8.082L12 18.06l-7.279 3.827 1.389-8.082-5.875-5.728 8.113-1.178L12 .587z"/></svg>
            </div>
          </div>
          <p class="text-gray-300 leading-relaxed mb-4">"I've encountered multiple broken links in the 'Further Reading' section of Module 3. It's frustrating to try and access resources only to find they're unavailable. Please update these links."</p>
          <div class="flex flex-wrap gap-2 text-sm">
            <span class="px-3 py-1 rounded-full bg-red-700/50 text-red-200">#TechnicalSupport</span>
            <span class="px-3 py-1 rounded-full bg-red-700/50 text-red-200">#BrokenLinks</span>
            <span class="px-3 py-1 rounded-full bg-red-700/50 text-red-200">#Urgent</span>
          </div>
          <div class="flex items-center justify-between mt-4 text-gray-400">
            <span class="text-sm">Posted 1 week ago</span>
            <button class="text-blue-400 hover:text-blue-300 transition duration-300">View Details</button>
          </div>
        </article>

      </div>
    </div>

    <!-- Pagination / Load More -->
    <div class="flex justify-center mt-10">
      <button class="px-6 py-3 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition duration-300 shadow-lg hover:shadow-xl">
        Load More Feedback
      </button>
    </div>

  </div>
</section>

Componente di feedback senza scopo di lucro (stile 3D)

Un componente di feedback semplice e reattivo per le organizzazioni non profit, caratterizzato da un'estetica di design 3D e dai toni caldi del tramonto. Include il supporto per la modalità oscura.

Aperto Anteprima

                <div class="flex justify-center items-center px-4 py-8 bg-gradient-to-br from-orange-50 to-amber-100 dark:from-gray-950 dark:to-gray-800 min-h-screen font-sans">
  <div class="relative w-full max-w-md p-6 sm:p-8 bg-white rounded-xl shadow-xl transform transition-all duration-300 ease-in-out dark:bg-gray-800 dark:shadow-2xl dark:shadow-amber-900/20 card-3d">
    <!-- 3D effect layers -->
    <div class="absolute inset-0 bg-gradient-to-br from-orange-100 to-amber-200 rounded-xl opacity-0 transform translate-z-10 dark:from-gray-700 dark:to-gray-900 blur-sm card-3d-inner"></div>
    <div class="absolute inset-0 bg-orange-50 rounded-xl opacity-0 transform translate-z-20 dark:bg-gray-600 blur-xs card-3d-inner"></div>

    <div class="relative z-10 text-center">
      <div class="mb-6">
        <svg class="mx-auto h-12 w-12 text-orange-500 dark:text-amber-400 transform -rotate-12 translate-y-1 block" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
        </svg>
        <h3 class="mt-3 text-2xl font-extrabold text-orange-700 dark:text-amber-300 tracking-tight leading-tight origin-left scale-105">
          Share Your Thoughts
        </h3>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
          Help us improve our cause with your valuable feedback.
        </p>
      </div>

      <form class="space-y-4">
        <div>
          <label for="email" class="sr-only">Email address</label>
          <input id="email" name="email" type="email" autocomplete="email" required class="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-150 ease-in-out text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400 3d-input" placeholder="Your Email Address">
        </div>
        <div>
          <label for="feedback" class="sr-only">Your Feedback</label>
          <textarea id="feedback" name="feedback" rows="4" required class="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 resize-y transition duration-150 ease-in-out text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400 3d-input" placeholder="What do you think?"></textarea>
        </div>
        <div>
          <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-gradient-to-r from-orange-400 to-amber-500 hover:from-orange-500 hover:to-amber-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-800 transform active:scale-95 transition-all duration-200 ease-in-out origin-center button-3d">
            Submit Feedback
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<style>
/* Basic 3D Card effect */
.card-3d {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.card-3d:hover .card-3d-inner:nth-child(1) {
  opacity: 1;
  transform: translateZ(-20px);
}

.card-3d:hover .card-3d-inner:nth-child(2) {
  opacity: 1;
  transform: translateZ(-40px);
}

/* Subtle 3D for inputs */
.3d-input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease-in-out;
}
.dark .3d-input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);
}

.3d-input:focus {
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.08);
  border-color: #f97316; /* Tailwind orange-500 */
}

.dark .3d-input:focus {
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.5);
  border-color: #fcd34d; /* Tailwind amber-300 */
}

/* 3D Button effect */
.button-3d {
  transform: translateZ(0);
  transition: all 0.2s ease-out;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.button-3d:hover {
  transform: translateY(-2px) translateZ(5px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.button-3d:active {
  transform: translateY(1px) translateZ(-5px);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.dark .button-3d {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}
.dark .button-3d:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
}
.dark .button-3d:active {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
}

</style>

Componente Componenti di feedback

Una sezione di feedback e testimonianze complessa e reattiva per siti Web aziendali/aziendali, progettata con un'interfaccia utente in modalità scura e una combinazione di colori pastello. Include più elementi interattivi come testimonianze, un modulo di contatto e una visualizzazione delle valutazioni.

Aperto Anteprima

                <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-900 dark:bg-gray-950 text-gray-200 dark:text-gray-100 font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-12 text-blue-200 dark:text-blue-300">
      What Our Clients Say
    </h2>

    <!-- Testimonials Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
      <div class="bg-purple-800 dark:bg-purple-900 bg-opacity-30 dark:bg-opacity-40 rounded-xl shadow-lg p-8 flex flex-col items-center text-center transform transition-transform duration-300 hover:scale-105 hover:shadow-xl">
        <img class="w-20 h-20 rounded-full mb-4 border-4 border-purple-400 dark:border-purple-300" src="https://randomuser.me/api/portraits/men/84.jpg" alt="Client Avatar">
        <p class="italic text-lg mb-4 text-purple-100 dark:text-purple-200">"Their dedication to quality and innovative solutions is unparalleled. We saw significant growth after implementing their strategies."</p>
        <p class="font-semibold text-purple-300 dark:text-purple-400">John Doe, CEO of InnovateCorp</p>
        <div class="flex mt-2">
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
        </div>
      </div>

      <div class="bg-blue-800 dark:bg-blue-900 bg-opacity-30 dark:bg-opacity-40 rounded-xl shadow-lg p-8 flex flex-col items-center text-center transform transition-transform duration-300 hover:scale-105 hover:shadow-xl">
        <img class="w-20 h-20 rounded-full mb-4 border-4 border-blue-400 dark:border-blue-300" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Client Avatar">
        <p class="italic text-lg mb-4 text-blue-100 dark:text-blue-200">"The partnership has been incredibly smooth. Their team is highly responsive and delivered beyond our expectations."</p>
        <p class="font-semibold text-blue-300 dark:text-blue-400">Jane Smith, Marketing Director at GrowthCo</p>
        <div class="flex mt-2">
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-gray-600 dark:text-gray-500 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
        </div>
      </div>

      <div class="bg-teal-800 dark:bg-teal-900 bg-opacity-30 dark:bg-opacity-40 rounded-xl shadow-lg p-8 flex flex-col items-center text-center transform transition-transform duration-300 hover:scale-105 hover:shadow-xl">
        <img class="w-20 h-20 rounded-full mb-4 border-4 border-teal-400 dark:border-teal-300" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Client Avatar">
        <p class="italic text-lg mb-4 text-teal-100 dark:text-teal-200">"An absolute pleasure to work with. They transformed our digital presence and boosted our ROI significantly."</p>
        <p class="font-semibold text-teal-300 dark:text-teal-400">David Lee, Founder of DigitalEdge</p>
        <div class="flex mt-2">
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
        </div>
      </div>
    </div>

    <!-- Overall Rating Section -->
    <div class="bg-gray-800 dark:bg-gray-900 rounded-xl shadow-lg p-8 mb-16 text-center transform transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl">
      <h3 class="text-3xl sm:text-4xl font-bold mb-4 text-pink-200 dark:text-pink-300">Overall Customer Satisfaction</h3>
      <div class="flex items-center justify-center mb-4">
        <span class="text-6xl font-extrabold text-pink-300 dark:text-pink-400 mr-4">4.9</span>
        <div class="flex text-yellow-300 dark:text-yellow-400">
          <svg class="w-10 h-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-10 h-10 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-10 h-10 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-10 h-10 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
          <svg class="w-10 h-10 text-gray-600 dark:text-gray-500 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
        </div>
      </div>
      <p class="text-lg text-gray-300 dark:text-gray-400">Based on 1500+ reviews across various platforms</p>
    </div>

    <!-- Feedback Form -->
    <div class="bg-gray-800 dark:bg-gray-900 rounded-xl shadow-lg p-8 lg:p-12 transform transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl">
      <h3 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-center mb-8 text-green-200 dark:text-green-300">Share Your Experience</h3>
      <form class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="md:col-span-1">
          <label for="name" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Your Name</label>
          <input type="text" id="name" name="name" placeholder="Enter your name" class="w-full p-3 rounded-lg bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200">
        </div>
        <div class="md:col-span-1">
          <label for="email" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Your Email</label>
          <input type="email" id="email" name="email" placeholder="Enter your email" class="w-full p-3 rounded-lg bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200">
        </div>
        <div class="md:col-span-2">
          <label for="subject" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Subject</label>
          <input type="text" id="subject" name="subject" placeholder="Subject of your feedback" class="w-full p-3 rounded-lg bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200">
        </div>
        <div class="md:col-span-2">
          <label for="message" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Your Message</label>
          <textarea id="message" name="message" rows="6" placeholder="Tell us about your experience..." class="w-full p-3 rounded-lg bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 resize-y"></textarea>
        </div>

        <div class="md:col-span-2">
          <label for="rating" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Rate Us</label>
          <div class="flex justify-center text-yellow-300 dark:text-yellow-400 mb-6">
            <button type="button" class="rating-star outline-none focus:outline-none p-1 sm:p-2">
              <svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
            </button>
            <button type="button" class="rating-star outline-none focus:outline-none p-1 sm:p-2">
              <svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
            </button>
            <button type="button" class="rating-star outline-none focus:outline-none p-1 sm:p-2">
              <svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
            </button>
            <button type="button" class="rating-star outline-none focus:outline-none p-1 sm:p-2">
              <svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
            </button>
            <button type="button" class="rating-star current-rating outline-none focus:outline-none p-1 sm:p-2">
              <svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current text-gray-600 dark:text-gray-500 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
            </button>
          </div>
        </div>

        <div class="md:col-span-2 text-center">
          <button type="submit" class="px-8 py-4 bg-green-500 dark:bg-green-600 text-white font-bold rounded-lg shadow-md hover:bg-green-600 dark:hover:bg-green-700 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 focus:ring-offset-gray-800 dark:focus:ring-offset-gray-900">
            Submit Feedback
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- JavaScript for Rating functionality (optional, for interactivity demonstration) -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const starsContainer = document.querySelector('.rating-star').parentNode;
      const stars = starsContainer.querySelectorAll('.rating-star');

      stars.forEach((star, index) => {
        star.addEventListener('click', () => {
          // Fill stars up to the clicked one
          stars.forEach((s, sIndex) => {
            if (sIndex <= index) {
              s.querySelector('svg').classList.remove('text-gray-600', 'dark:text-gray-500');
              s.querySelector('svg').classList.add('text-yellow-300', 'dark:text-yellow-400');
            } else {
              s.querySelector('svg').classList.add('text-gray-600', 'dark:text-gray-500');
              s.querySelector('svg').classList.remove('text-yellow-300', 'dark:text-yellow-400');
            }
          });
        });

        star.addEventListener('mouseover', () => {
          stars.forEach((s, sIndex) => {
            if (sIndex <= index) {
              s.querySelector('svg').classList.remove('text-gray-600', 'dark:text-gray-500');
              s.querySelector('svg').classList.add('text-yellow-300', 'dark:text-yellow-400');
            }
          });
        });

        star.addEventListener('mouseout', () => {
          // Reset to default (or last clicked state) if no star is clicked
          const currentRating = Array.from(stars).filter(s => s.querySelector('svg').classList.contains('text-yellow-300')).length || 0;
          stars.forEach((s, sIndex) => {
            if (sIndex < currentRating) {
              s.querySelector('svg').classList.remove('text-gray-600', 'dark:text-gray-500');
              s.querySelector('svg').classList.add('text-yellow-300', 'dark:text-yellow-400');
            } else {
              s.querySelector('svg').classList.add('text-gray-600', 'dark:text-gray-500');
              s.querySelector('svg').classList.remove('text-yellow-300', 'dark:text-yellow-400');
            }
          });
        });
      });
    });
  </script>
</section>

Componente di feedback scheumorfico (semplice, toni della terra)

Un semplice componente di feedback scheumorfico per un cruscotto, che utilizza i toni della terra e progettato per imitare gli elementi del mondo reale. Completamente reattivo con supporto per la modalità oscura.

Aperto Anteprima

                <div class="p-4 md:p-6 lg:p-8 bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm mx-auto p-6 rounded-3xl shadow-xl bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-700 dark:to-stone-800
              border border-stone-300 dark:border-stone-900
              transform transition-all duration-300">
    <div class="flex items-center space-x-4 mb-6">
      <div class="relative w-16 h-16 rounded-full bg-stone-300 dark:bg-stone-600 shadow-md
                  flex items-center justify-center p-0.5 border border-stone-400 dark:border-stone-500">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-full h-full rounded-full object-cover
                    shadow-inner border border-stone-200 dark:border-stone-700">
        <span class="absolute bottom-0 right-0 w-4 h-4 bg-lime-500 rounded-full border-2 border-white dark:border-stone-800 shadow-sm"></span>
      </div>
      <div class="flex-1">
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-200">John Doe</h3>
        <p class="text-sm text-stone-600 dark:text-stone-400">Product Manager</p>
      </div>
    </div>

    <div class="mb-6">
      <label for="feedback-text" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Your Feedback</label>
      <textarea id="feedback-text" rows="4" class="w-full px-4 py-3 rounded-xl
                 bg-stone-50 dark:bg-stone-900 text-stone-800 dark:text-stone-200
                 shadow-inner border border-stone-200 dark:border-stone-700
                 focus:ring-2 focus:ring-amber-500 focus:border-amber-500
                 placeholder-stone-400 dark:placeholder-stone-500
                 transition-all duration-200 resize-none
                 transform focus:scale-[1.01]
                 focus:shadow-md"
                 placeholder="Share your thoughts..."></textarea>
    </div>

    <div class="mb-6">
      <label class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Rating</label>
      <div class="flex items-center justify-center space-x-2">
        <!-- Star 1 -->
        <button class="p-2 rounded-full cursor-pointer group
                       bg-stone-200 dark:bg-stone-700 shadow-md
                       border border-stone-300 dark:border-stone-600
                       hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
                       active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
                       transition-all duration-150">
          <svg class="w-6 h-6 text-amber-400 dark:text-amber-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
        </button>
        <!-- Star 2 -->
        <button class="p-2 rounded-full cursor-pointer group
                       bg-stone-200 dark:bg-stone-700 shadow-md
                       border border-stone-300 dark:border-stone-600
                       hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
                       active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
                       transition-all duration-150">
          <svg class="w-6 h-6 text-amber-400 dark:text-amber-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
        </button>
        <!-- Star 3 -->
        <button class="p-2 rounded-full cursor-pointer group
                       bg-stone-200 dark:bg-stone-700 shadow-md
                       border border-stone-300 dark:border-stone-600
                       hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
                       active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
                       transition-all duration-150">
          <svg class="w-6 h-6 text-amber-400 dark:text-amber-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
        </button>
        <!-- Star 4 -->
        <button class="p-2 rounded-full cursor-pointer group
                       bg-stone-200 dark:bg-stone-700 shadow-md
                       border border-stone-300 dark:border-stone-600
                       hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
                       active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
                       transition-all duration-150">
          <svg class="w-6 h-6 text-amber-400 dark:text-amber-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
        </button>
        <!-- Star 5 -->
        <button class="p-2 rounded-full cursor-pointer group
                       bg-stone-200 dark:bg-stone-700 shadow-md
                       border border-stone-300 dark:border-stone-600
                       hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
                       active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
                       transition-all duration-150">
          <svg class="w-6 h-6 text-stone-400 dark:text-stone-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
        </button>
      </div>
    </div>

    <div class="flex justify-end space-x-3">
      <button class="px-6 py-3 rounded-xl font-medium
                     bg-stone-200 dark:bg-stone-700 text-stone-700 dark:text-stone-300
                     shadow-md border border-stone-300 dark:border-stone-600
                     hover:bg-stone-300 hover:dark:bg-stone-600 hover:shadow-lg
                     active:bg-stone-400 active:dark:bg-stone-800 active:shadow-inner active:scale-95
                     transition-all duration-150">
        Cancel
      </button>
      <button class="px-6 py-3 rounded-xl font-medium
                     bg-amber-600 dark:bg-amber-700 text-white
                     shadow-md border border-amber-700 dark:border-amber-800
                     hover:bg-amber-700 hover:dark:bg-amber-600 hover:shadow-lg
                     active:bg-amber-800 active:dark:bg-amber-900 active:shadow-inner active:scale-95
                     transition-all duration-150">
        Submit
      </button>
    </div>
  </div>
</div>

Componente Componenti di feedback

Un semplice componente di feedback brutalista con colori in scala di grigi, supporto per la modalità oscura e design reattivo.

Aperto Anteprima

                <div class="max-w-md mx-auto my-8 bg-white dark:bg-gray-900 shadow-lg border-2 border-black dark:border-gray-700 p-6">
  <h2 class="text-2xl font-bold text-black dark:text-white mb-4 border-b-2 border-black dark:border-gray-700 pb-2">Feedback</h2>
  <div class="mb-4">
    <div class="flex items-center mb-2">
      <img src="https://www.randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-gray-700 mr-4">
      <p class="font-bold text-black dark:text-white">John Doe</p>
    </div>
    <div class="bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-gray-700 p-4">
      <p class="text-black dark:text-gray-300">"This article was incredibly insightful and well-written. I appreciate the clear explanations."</p>
    </div>
  </div>
  <div class="mb-4">
    <div class="flex items-center mb-2">
      <img src="https://www.randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-gray-700 mr-4">
      <p class="font-bold text-black dark:text-white">Jane Smith</p>
    </div>
    <div class="bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-gray-700 p-4">
      <p class="text-black dark:text-gray-300">"I found a minor typo on page 3, but overall, a fantastic read!"</p>
    </div>
  </div>
  <div class="text-right">
    <button class="bg-black dark:bg-gray-700 text-white dark:text-gray-300 px-6 py-2 border-2 border-black dark:border-gray-700 font-bold hover:bg-gray-800 dark:hover:bg-gray-600">
      Give Feedback
    </button>
  </div>
</div>

Componente Componenti di feedback

Un componente Feedback Components complesso, reattivo e supportato da temi scuri per una dashboard, progettato con un'estetica minimalista/piatta e una combinazione di colori pastello. Visualizza vari elementi di feedback come una barra di avanzamento, indicatori di stato e attività recenti, utilizzando solo HTML con le classi CSS di Tailwind.

Aperto Anteprima

                <div class="p-6 bg-white dark:bg-gray-800 shadow-lg rounded-lg">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Feedback Overview</h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
    <!-- Positive Feedback -->
    <div class="bg-gradient-to-r from-green-200 to-green-100 dark:from-green-700 dark:to-green-600 p-4 rounded-md flex items-center justify-between">
      <div class="flex items-center">
        <div class="p-3 bg-green-400 dark:bg-green-500 rounded-full mr-3">
          <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg>
        </div>
        <p class="text-green-800 dark:text-green-100 font-medium">Positive Feedback</p>
      </div>
      <span class="text-green-800 dark:text-green-100 text-xl font-bold">85%</span>
    </div>

    <!-- Negative Feedback -->
    <div class="bg-gradient-to-r from-red-200 to-red-100 dark:from-red-700 dark:to-red-600 p-4 rounded-md flex items-center justify-between">
      <div class="flex items-center">
        <div class="p-3 bg-red-400 dark:bg-red-500 rounded-full mr-3">
          <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </div>
        <p class="text-red-800 dark:text-red-100 font-medium">Negative Feedback</p>
      </div>
      <span class="text-red-800 dark:text-red-100 text-xl font-bold">15%</span>
    </div>
  </div>

  <!-- Feedback Progress Bar -->
  <div class="mb-8">
    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-3">Overall Satisfaction</h3>
    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
      <div class="bg-teal-400 h-4 rounded-full" style="width: 75%;"></div>
    </div>
    <p class="text-sm text-gray-500 dark:text-gray-400 mt-2 text-right">75% Satisfied</p>
  </div>

  <!-- Recent Feedback Activity -->
  <div>
    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Recent Activity</h3>
    <ul class="space-y-4">
      <li class="flex items-center">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 font-medium">"Great service, very helpful!"</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">- Jane Doe <span class="ml-2 px-2 py-0.5 bg-green-100 dark:bg-green-700 text-green-700 dark:text-green-100 text-xs font-semibold rounded-full">Positive</span></p>
        </div>
        <span class="text-sm text-gray-400 dark:text-gray-500">2 hours ago</span>
      </li>
      <li class="flex items-center">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 font-medium">"Room for improvement on delivery."</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">- John Smith <span class="ml-2 px-2 py-0.5 bg-yellow-100 dark:bg-yellow-700 text-yellow-700 dark:text-yellow-100 text-xs font-semibold rounded-full">Neutral</span></p>
        </div>
        <span class="text-sm text-gray-400 dark:text-gray-500">1 day ago</span>
      </li>
      <li class="flex items-center">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar">
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 font-medium">"Not satisfied with the product quality."</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">- Emily White <span class="ml-2 px-2 py-0.5 bg-red-100 dark:bg-red-700 text-red-700 dark:text-red-100 text-xs font-semibold rounded-full">Negative</span></p>
        </div>
        <span class="text-sm text-gray-400 dark:text-gray-500">3 days ago</span>
      </li>
    </ul>
  </div>
</div>

Componente Componenti di feedback

Un componente di feedback in stile brutalista con una combinazione di colori pastello, complessità moderata e design reattivo con supporto per temi scuri. Progettato per un portfolio per mostrare feedback o testimonianze.

Aperto Anteprima

                <div class="min-h-screen bg-pink-100 dark:bg-stone-900 p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-stone-800 shadow-brutalist border-4 border-stone-900 dark:border-pink-500 p-8 md:p-12 relative">
    <h2 class="text-3xl md:text-5xl font-extrabold text-stone-900 dark:text-pink-100 mb-8 border-b-4 border-stone-900 dark:border-pink-500 pb-4 inline-block">
      Client Testimonials
    </h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Testimonial 1 -->
      <div class="bg-pink-200 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-pink-500 relative group">
        <p class="text-stone-800 dark:text-pink-200 text-lg mb-4 italic leading-relaxed">
          "Working with [Your Name] was an absolute game-changer for my project. Their unique vision and relentless dedication brought my ideas to life in ways I hadn

Componente Componenti di feedback

Componente di feedback dal design minimalista/piatto per dashboard con combinazione di colori complementari e complessità moderata, supporto per temi reattivi e scuri. Utilizza HTML e Tailwind CSS. Niente JavaScript. Dispone di elementi interattivi. Immagini da picsum.photos e avatar da randomuser.me.

Aperto Anteprima

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

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 Anteprima

                <div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Your Feedback Matters!</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-6">We value your opinion. Please leave your feedback below!</p>
    <form class="space-y-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="name">Name</label>
            <input id="name" type="text" placeholder="Your Name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required />
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
            <input id="email" type="email" placeholder="Your Email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required />
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="rating">Rating</label>
            <select id="rating" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required>
                <option value="5">⭐⭐⭐⭐⭐</option>
                <option value="4">⭐⭐⭐⭐</option>
                <option value="3">⭐⭐⭐</option>
                <option value="2">⭐⭐</option>
                <option value="1">⭐</option>
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="message">Message</label>
            <textarea id="message" rows="4" placeholder="Your Feedback" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required></textarea>
        </div>
        <div>
            <button type="submit" class="w-full py-2 px-4 bg-pink-500 text-white font-semibold rounded-md shadow-md hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-pink-600 dark:hover:bg-pink-700">Submit Feedback</button>
        </div>
    </form>
    <div class="mt-6 flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
        <span class="text-gray-600 dark:text-gray-400">John Doe</span>
    </div>

    <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
        <p>Feedback received on: <span class="text-gray-800 dark:text-gray-200">10/23/2023</span></p>
    </div>
</div>

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 Anteprima

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-xl">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    <div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400">Financial Analyst</p>
    </div>
  </div>
  <p class="text-gray-700 dark:text-gray-300 mb-4">
    The new dashboard features are excellent! The data visualization is clear and concisely presented, making it much easier to track key metrics. The performance has also improved significantly.
  </p>
  <div class="flex items-center text-yellow-500">
    <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20">
      <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.309l6.572-.955L10 0l2.939 5.354 6.572.955-4.756 4.936 1.123 6.545z"/>
    </svg>
    <span>4.5</span>
  </div>
</div>