Компоненты Рейтинговая система Компонент рейтинговой системы

Компонент рейтинговой системы

Отзывчивый компонент рейтинговой системы, разработанный в стиле брутализма с использованием Tailwind CSS. Он поддерживает темную тему и отличается высокой контрастностью с грубым и смелым дизайном.

Предварительный просмотр

HTML-код

<div class="max-w-sm mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Rate Us!</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">Your feedback is valuable to us!</p>
    <div class="flex items-center justify-center mb-4">
        <img src="https://picsum.photos/100/100" alt="Random User" class="rounded-full border-2 border-gray-800 dark:border-white">
        <span class="ml-3 text-lg text-gray-800 dark:text-white">User Name</span>
    </div>
    <div class="flex justify-center">
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
        <span class="text-5xl text-yellow-400 cursor-pointer hover:text-yellow-500 transition duration-200">★</span>
    </div>
    <div class="mt-4">
        <button class="w-full bg-gray-800 dark:bg-yellow-400 text-white py-2 rounded-md font-bold hover:bg-yellow-500 transition duration-200">Submit Rating</button>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        .dark:hover\:bg-yellow-500:hover {
            background-color: #bb8d29;
        }
    }
</style>

Связанные компоненты

Bauhaus_Grayscale_Rating_System_Component

Сложный, отзывчивый компонент рейтинговой системы, выполненный в стиле Баухаус с цветовой гаммой в оттенках серого, подходит для веб-сайтов мероприятий и конференций. Имеет интерактивные элементы и поддержку темного режима.

Открытый

Компонент рейтинговой системы 24

Компонент системы рейтинга, разработанный в 3D, который поддерживает темную тему и адаптивные эффекты. В этом компоненте есть звездочки для оценок, аватары пользователей и раздел комментариев.

Открытый

Компонент рейтинговой системы

Сложный компонент рейтинговой системы для социальных сетей в стиле ретро с монохроматической цветовой схемой. Он полностью отзывчив и поддерживает темный режим. Этот компонент использует только HTML и Tailwind CSS, без JavaScript.

Открытый