Компонент рейтинговой системы
Минималистичный компонент системы рейтинга плоского дизайна, подходящий для бизнес-сайтов, с адаптивной версткой и поддержкой темных тем.
HTML-код
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Rate Our Service</h2>
<div class="flex items-center space-x-2 mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">John Doe</span>
</div>
<div class="flex">
<span class="text-gray-600 dark:text-gray-400 mr-2">Rating:</span>
<div class="flex items-center space-x-1">
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
<svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
</div>
</div>
<textarea class="w-full p-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-md focus:outline-none focus:ring focus:ring-yellow-300 dark:focus:ring-yellow-400" placeholder="Leave your feedback here..."></textarea>
<button class="mt-4 px-4 py-2 bg-yellow-500 dark:bg-yellow-400 text-white rounded-md hover:bg-yellow-600 dark:hover:bg-yellow-500">Submit</button>
</div>Связанные компоненты
Monospace_Developer_Rating_System_Component
Чистый, вдохновленный кодом компонент рейтинговой системы для интерфейсов социальных сетей, с моноширинными шрифтами, эстетикой терминала и дополнительными цветами. Он полностью адаптивный с поддержкой темного режима.
Компонент системы ретро-рейтинга
Простой компонент рейтинговой системы в стиле ретро для электронной коммерции с яркими цветами и поддержкой темных тем с использованием Tailwind CSS.
Компонент рейтинговой системы
Сложный компонент рейтинговой системы для социальных сетей в стиле ретро с монохроматической цветовой схемой. Он полностью отзывчив и поддерживает темный режим. Этот компонент использует только HTML и Tailwind CSS, без JavaScript.