CCHub Logo CCHub Tailwind Collection
Komponenten Produktbewertungen Neumorphic_Product_Reviews_Component_High_Contrast

Neumorphic_Product_Reviews_Component_High_Contrast

Eine komplexe, kontrastreiche neumorphe Produktbewertungskomponente mit Buchungs-/Reservierungsfunktionen, die für Reaktionsfähigkeit und Dunkelmodus entwickelt wurde und eine reichhaltige, interaktive Benutzeroberfläche bietet.

Vorschau

HTML-Code 

<div class="min-h-screen p-4 sm:p-6 md:p-8 flex items-center justify-center bg-gray-200 dark:bg-gray-800 font-sans">
  <div class="w-full max-w-4xl bg-gray-200 dark:bg-gray-800 p-6 rounded-3xl shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-300 ease-in-out">
    
    <!-- Header -->
    <div class="flex items-center justify-between mb-8 pb-4 border-b border-gray-300 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100">Customer Reviews</h2>
      <button class="flex items-center px-4 py-2 bg-gray-200 dark:bg-gray-800 rounded-xl text-gray-800 dark:text-gray-100 shadow-neumorphic-btn-light hover:shadow-neumorphic-btn-light-hover dark:shadow-neumorphic-btn-dark dark:hover:shadow-neumorphic-btn-dark-hover transition-all duration-200 ease-in-out">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
        <span class="hidden sm:inline">Write a Review</span>
      </button>
    </div>

    <!-- Average Rating and Summary -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
      <div class="md:col-span-1 flex flex-col items-center justify-center">
        <div class="text-6xl font-extrabold text-indigo-600 dark:text-indigo-400 mb-2">4.8</div>
        <div class="flex text-yellow-500 mb-2">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
          <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
        </div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Based on 1,234 reviews</p>
      </div>
      <div class="md:col-span-2 space-y-3">
        <!-- Star rating breakdown -->
        <div class="flex items-center">
          <span class="text-gray-800 dark:text-gray-100 w-8">5 <span class="hidden sm:inline">star</span></span>
          <div class="relative flex-grow h-3 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark mx-2 overflow-hidden">
            <div class="absolute top-0 left-0 h-full bg-green-500 rounded-full shadow-neumorphic-inset" style="width: 90%;"></div>
          </div>
          <span class="text-gray-600 dark:text-gray-300 w-10 text-right">90%</span>
        </div>
        <div class="flex items-center">
          <span class="text-gray-800 dark:text-gray-100 w-8">4 <span class="hidden sm:inline">star</span></span>
          <div class="relative flex-grow h-3 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark mx-2 overflow-hidden">
            <div class="absolute top-0 left-0 h-full bg-blue-500 rounded-full shadow-neumorphic-inset" style="width: 7%;"></div>
          </div>
          <span class="text-gray-600 dark:text-gray-300 w-10 text-right">7%</span>
        </div>
        <div class="flex items-center">
          <span class="text-gray-800 dark:text-gray-100 w-8">3 <span class="hidden sm:inline">star</span></span>
          <div class="relative flex-grow h-3 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark mx-2 overflow-hidden">
            <div class="absolute top-0 left-0 h-full bg-yellow-500 rounded-full shadow-neumorphic-inset" style="width: 2%;"></div>
          </div>
          <span class="text-gray-600 dark:text-gray-300 w-10 text-right">2%</span>
        </div>
        <div class="flex items-center">
          <span class="text-gray-800 dark:text-gray-100 w-8">2 <span class="hidden sm:inline">star</span></span>
          <div class="relative flex-grow h-3 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark mx-2 overflow-hidden">
            <div class="absolute top-0 left-0 h-full bg-orange-500 rounded-full shadow-neumorphic-inset" style="width: 0.5%;"></div>
          </div>
          <span class="text-gray-600 dark:text-gray-300 w-10 text-right">0.5%</span>
        </div>
        <div class="flex items-center">
          <span class="text-gray-800 dark:text-gray-100 w-8">1 <span class="hidden sm:inline">star</span></span>
          <div class="relative flex-grow h-3 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark mx-2 overflow-hidden">
            <div class="absolute top-0 left-0 h-full bg-red-500 rounded-full shadow-neumorphic-inset" style="width: 0.5%;"></div>
          </div>
          <span class="text-gray-600 dark:text-gray-300 w-10 text-right">0.5%</span>
        </div>
      </div>
    </div>

    <!-- Review Filters/Sort -->
    <div class="flex flex-col sm:flex-row items-center justify-between mb-8 space-y-4 sm:space-y-0">
      <div class="relative w-full sm:w-auto">
        <select class="block appearance-none w-full bg-gray-200 dark:bg-gray-800 border-none text-gray-800 dark:text-gray-100 py-3 pl-4 pr-10 rounded-xl shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-200 ease-in-out">
          <option>Most Recent</option>
          <option>Highest Rated</option>
          <option>Lowest Rated</option>
          <option>With Photos</option>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 6.757 7.586 5.343 9z"/></svg>
        </div>
      </div>
      <div class="relative w-full sm:w-auto">
        <input type="text" placeholder="Search reviews..." class="block w-full bg-gray-200 dark:bg-gray-800 border-none text-gray-800 dark:text-gray-100 py-3 pl-4 pr-10 rounded-xl shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-200 ease-in-out">
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-700 dark:text-gray-200">
          <svg class="fill-current h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.35zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
        </div>
      </div>
    </div>

    <!-- Review List -->
    <div class="space-y-8">

      <!-- Review Item 1 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark transition-all duration-300 ease-in-out">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 shadow-neumorphic-avatar-light dark:shadow-neumorphic-avatar-dark" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Jane Doe</p>
            <div class="flex text-yellow-500 text-sm">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
            </div>
          </div>
          <p class="ml-auto text-sm text-gray-500 dark:text-gray-400">2 days ago</p>
        </div>
        <p class="text-gray-700 dark:text-gray-200 mb-4">"Absolutely fantastic experience! The process was smooth, and the results exceeded my expectations. Highly recommend!"</p>
        <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-4">
          <img class="w-full h-24 object-cover rounded-xl shadow-neumorphic-image-light dark:shadow-neumorphic-image-dark" src="https://picsum.photos/300/200?random=1" alt="Review photo 1">
          <img class="w-full h-24 object-cover rounded-xl shadow-neumorphic-image-light dark:shadow-neumorphic-image-dark" src="https://picsum.photos/300/200?random=11" alt="Review photo 2">
          <img class="w-full h-24 object-cover rounded-xl shadow-neumorphic-image-light dark:shadow-neumorphic-image-dark hidden sm:block" src="https://picsum.photos/300/200?random=12" alt="Review photo 3">
        </div>
        <div class="flex items-center space-x-4">
          <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18.784 7.216A2 2 0 0017 6H9.7l2.846-5.69c.14-.28.093-.61-.122-.843a.997.997 0 00-1.22-.19l-7 4A1 1 0 003.5 5.5v9A1.5 1.5 0 005 16h8a2 2 0 002-2V9.382l3.784-2.166zM15 14H5v-7.882l5.77-3.297L15 6.07V14z"></path></svg>
            <span>Helpful (12)</span>
          </button>
          <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
            <span>Reply</span>
          </button>
        </div>
      </div>

      <!-- Review Item 2 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark transition-all duration-300 ease-in-out">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 shadow-neumorphic-avatar-light dark:shadow-neumorphic-avatar-dark" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">John Smith</p>
            <div class="flex text-yellow-500 text-sm">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
            </div>
          </div>
          <p class="ml-auto text-sm text-gray-500 dark:text-gray-400">1 week ago</p>
        </div>
        <p class="text-gray-700 dark:text-gray-200 mb-4">"Good service, but communication could be a little quicker. Overall satisfied with the appointment."</p>
        <div class="flex items-center space-x-4">
          <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18.784 7.216A2 2 0 0017 6H9.7l2.846-5.69c.14-.28.093-.61-.122-.843a.997.997 0 00-1.22-.19l-7 4A1 1 0 003.5 5.5v9A1.5 1.5 0 005 16h8a2 2 0 002-2V9.382l3.784-2.166zM15 14H5v-7.882l5.77-3.297L15 6.07V14z"></path></svg>
            <span>Helpful (5)</span>
          </button>
          <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
            <span>Reply</span>
          </button>
        </div>
      </div>

      <!-- Review Item 3 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-2xl shadow-neumorphic-card-light dark:shadow-neumorphic-card-dark transition-all duration-300 ease-in-out">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 shadow-neumorphic-avatar-light dark:shadow-neumorphic-avatar-dark" src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Emily White</p>
            <div class="flex text-yellow-500 text-sm">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.638-.921 1.938 0l1.88 5.792h6.096c.969 0 1.371 1.24.588 1.81L14.417 14.8l-1.88 5.792c-.3.921-1.637.921-1.938 0l-1.88-5.792L.645 10.52c-.783-.57-.38-1.81.588-1.81h6.096l1.812-5.783z"></path></svg>
            </div>
          </div>
          <p class="ml-auto text-sm text-gray-500 dark:text-gray-400">3 weeks ago</p>
        </div>
        <p class="text-gray-700 dark:text-gray-200 mb-4">"Flawless! From start to finish, everything was perfect. Made a reservation for next month already."</p>
        <div class="flex items-center space-x-4">
          <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18.784 7.216A2 2 0 0017 6H9.7l2.846-5.69c.14-.28.093-.61-.122-.843a.997.997 0 00-1.22-.19l-7 4A1 1 0 003.5 5.5v9A1.5 1.5 0 005 16h8a2 2 0 002-2V9.382l3.784-2.166zM15 14H5v-7.882l5.77-3.297L15 6.07V14z"></path></svg>
            <span>Helpful (19)</span>
          </button>
          <button class="flex items-center text-gray-600 dark:text-gray-300 px-3 py-1 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
            <span>Reply</span>
          </button>
        </div>
      </div>

    </div>

    <!-- Pagination -->
    <div class="flex justify-center mt-8 space-x-2">
      <button class="w-10 h-10 flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out"><<</button>
      <button class="w-10 h-10 flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out"><</button>
      <button class="w-10 h-10 flex items-center justify-center bg-indigo-600 dark:bg-indigo-700 text-white font-bold rounded-lg shadow-neumorphic-btn-active-light dark:shadow-neumorphic-btn-active-dark transition-all duration-200 ease-in-out">1</button>
      <button class="w-10 h-10 flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">2</button>
      <button class="w-10 h-10 flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">3</button>
      <button class="w-10 h-10 flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">></button>
      <button class="w-10 h-10 flex items-center justify-center bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-lg shadow-neumorphic-btn-small-light hover:shadow-neumorphic-btn-small-light-hover dark:shadow-neumorphic-btn-small-dark dark:hover:shadow-neumorphic-btn-small-dark-hover transition-all duration-200 ease-in-out">>></button>
    </div>

  </div>
</div>

<style>
  /* Base Neumorphic Shadow Styles */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #2e2e2e, -8px -8px 16px #444444;
  }

  /* Button Shadow Styles */
  .shadow-neumorphic-btn-light {
    box-shadow: 4px 4px 8px #a3b1c6, -4px -4px 8px #ffffff;
  }
  .shadow-neumorphic-btn-light:hover {
    box-shadow: inset 2px 2px 5px #a3b1c6, inset -2px -2px 5px #ffffff;
  }
  .dark .shadow-neumorphic-btn-dark {
    box-shadow: 4px 4px 8px #2e2e2e, -4px -4px 8px #444444;
  }
  .dark .shadow-neumorphic-btn-dark:hover {
    box-shadow: inset 2px 2px 5px #2e2e2e, inset -2px -2px 5px #444444;
  }

  /* Small Button Shadow Styles */
  .shadow-neumorphic-btn-small-light {
    box-shadow: 2px 2px 4px #a3b1c6, -2px -2px 4px #ffffff;
  }
  .shadow-neumorphic-btn-small-light:hover {
    box-shadow: inset 1px 1px 3px #a3b1c6, inset -1px -1px 3px #ffffff;
  }
  .dark .shadow-neumorphic-btn-small-dark {
    box-shadow: 2px 2px 4px #2e2e2e, -2px -2px 4px #444444;
  }
  .dark .shadow-neumorphic-btn-small-dark:hover {
    box-shadow: inset 1px 1px 3px #2e2e2e, inset -1px -1px 3px #444444;
  }

  /* Active Button Shadow Styles */
  .shadow-neumorphic-btn-active-light {
    box-shadow: inset 4px 4px 8px #8850c1, inset -4px -4px 8px #6c329b;
  }
  .dark .shadow-neumorphic-btn-active-dark {
    box-shadow: inset 4px 4px 8px #4a276b, inset -4px -4px 8px #7a469f;
  }

  /* Card Shadow Styles */
  .shadow-neumorphic-card-light {
    box-shadow: 6px 6px 12px #a3b1c6, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-card-dark {
    box-shadow: 6px 6px 12px #2e2e2e, -6px -6px 12px #444444;
  }

  /* Avatar Shadow Styles */
  .shadow-neumorphic-avatar-light {
    box-shadow: 3px 3px 6px #a3b1c6, -3px -3px 6px #ffffff;
  }
  .dark .shadow-neumorphic-avatar-dark {
    box-shadow: 3px 3px 6px #2e2e2e, -3px -3px 6px #444444;
  }

  /* Image Shadow Styles */
  .shadow-neumorphic-image-light {
    box-shadow: 4px 4px 8px #a3b1c6, -4px -4px 8px #ffffff;
  }
  .dark .shadow-neumorphic-image-dark {
    box-shadow: 4px 4px 8px #2e2e2e, -4px -4px 8px #444444;
  }

  /* Inner Shadow for Progress Bars/Inputs */
  .shadow-inner-neumorphic-light {
    box-shadow: inset 2px 2px 5px #a3b1c6, inset -2px -2px 5px #ffffff;
  }
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 2px 2px 5px #2e2e2e, inset -2px -2px 5px #444444;
  }

  /* Inset shadow for active progress bar fill */
  .shadow-neumorphic-inset {
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2), inset -1px -1px 3px rgba(255,255,255,0.4);
  }
</style>

Verwandte Komponenten

Produktbewertungen Komponente - Bauhaus Rainbow Gradient

Eine einfache, funktionale Produktbewertungskomponente mit einem vom Bauhaus inspirierten Design und einem Regenbogen-Farbverlauf, der sich für Beratung/Dienstleistungen eignet. Vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.

Offen

Komponente "Produktbewertungen"

Eine einfache, monochromatische, skeuomorphe Produktbewertungskomponente, die für Fertigungs-/Industrieunternehmen entwickelt wurde und ein responsives Layout und Unterstützung für den Dunkelmodus bietet.

Offen

Retro-Produktbewertungskarte

Eine Produktbewertungskomponente, die in einer Retro-/Vintage-Ästhetik gestaltet ist und ein triadisches Farbschema (Blaugrün, Fuchsia, Bernstein) verwendet. Es ist einfach, reaktionsschnell, unterstützt den Dunkelmodus und eignet sich für ein Portfolio zur Präsentation von Produktfeedback. Verwendet Tailwind CSS.

Offen