Neumorphic_Product_Reviews_Component_High_Contrast
Сложный, высококонтрастный компонент неморфных отзывов о товарах с функциями бронирования/бронирования, разработанный для быстрого реагирования и темного режима, предлагает богатый интерактивный пользовательский интерфейс.
HTML-код
<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>Связанные компоненты
Компонент «Отзывы о товаре»
Минималистичный компонент обзоров товаров, разработанный для интерфейсов социальных сетей, интегрирующий триадическую цветовую схему и интерактивные элементы.
Компонент Neumorphic Product Reviews
Простой, отзывчивый компонент обзоров товаров с нейроморфным дизайном, аналогичной цветовой гаммой и поддержкой темного режима, подходящий для деловых или корпоративных сайтов.
Компонент «Отзывы о товаре»
Простой, отзывчивый компонент обзоров товаров с эстетикой 3D-дизайна, черно-белой цветовой гаммой с ярким акцентом, разработанный для CRM/Business Tools, включая поддержку темного режима.