Componente del sistema de clasificación
Un complejo componente del sistema de clasificación de temática retro para las redes sociales, con un esquema de color monocromático. Es totalmente responsivo y admite un modo oscuro. Este componente utiliza solo HTML y Tailwind CSS, sin JavaScript.
Código HTML
<div class="p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-mono">
<!-- Retro Rating System Component -->
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<div class="mb-6 text-center">
<h2 class="text-3xl font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wider">Rate This Post</h2>
<p class="text-gray-500 dark:text-gray-400 text-sm">Share your thoughts with the community!</p>
</div>
<!-- User Avatar and Post Info -->
<div class="flex items-center mb-6">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-4" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
<div>
<p class="text-lg font-semibold text-gray-800 dark:text-gray-100">Galactic Traveler</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Posted 2 hours ago</p>
</div>
</div>
<!-- Rating Stars -->
<div class="flex justify-center items-center mb-6">
<input type="radio" id="star5" name="rating" value="5" class="hidden" />
<label for="star5" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">★</label>
<input type="radio" id="star4" name="rating" value="4" class="hidden" />
<label for="star4" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">★</label>
<input type="radio" id="star3" name="rating" value="3" class="hidden" />
<label for="star3" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">★</label>
<input type="radio" id="star2" name="rating" value="2" class="hidden" />
<label for="star2" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">★</label>
<input type="radio" id="star1" name="rating" value="1" class="hidden" />
<label for="star1" class="text-gray-400 dark:text-gray-600 text-5xl cursor-pointer hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors duration-200 leading-none">★</label>
</div>
<!-- Textarea for comments -->
<div class="mb-6">
<textarea class="w-full p-4 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-all duration-200 resize-y" rows="4" placeholder="Leave your comment here..."></textarea>
</div>
<!-- Buttons -->
<div class="flex justify-between space-x-4">
<button class="flex-1 py-3 px-6 rounded-md bg-gray-700 hover:bg-gray-800 text-white dark:bg-gray-600 dark:hover:bg-gray-700 transition-colors duration-200 uppercase font-semibold tracking-wide shadow-md">
Submit Rating
</button>
<button class="flex-1 py-3 px-6 rounded-md bg-gray-300 hover:bg-gray-400 text-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200 transition-colors duration-200 uppercase font-semibold tracking-wide shadow-md">
Cancel
</button>
</div>
<!-- Popular Reviews Section (Responsive) -->
<div class="mt-8 pt-6 border-t border-gray-300 dark:border-gray-700">
<h3 class="text-2xl font-bold text-gray-700 dark:text-gray-200 mb-4 text-center">Popular Reviews</h3>
<div class="grid gap-4 md:grid-cols-2">
<!-- Review Card 1 -->
<div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
<div class="flex items-center mb-2">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<p class="font-semibold text-gray-800 dark:text-gray-100">Pixel Pioneer</p>
</div>
<p class="text-yellow-500 dark:text-yellow-400 text-lg mb-2">★★★★★</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">"Absolutely loved this! Brings back so many memories of old forums."</p>
</div>
<!-- Review Card 2 -->
<div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
<div class="flex items-center mb-2">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
<p class="font-semibold text-gray-800 dark:text-gray-100">Data Diver</p>
</div>
<p class="text-yellow-500 dark:text-yellow-400 text-lg mb-2">★★★★☆</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">"Great design, very nostalgic. A bit slow on my old phone though."</p>
</div>
</div>
<div class="mt-4 text-center">
<a href="#" class="text-gray-600 dark:text-gray-400 hover:underline text-sm">View all reviews</a>
</div>
</div>
</div>
</div>Componentes relacionados
Componente del sistema de clasificación
Un componente del sistema de clasificación de diseño minimalista / plano con un esquema de color complementario, complejidad moderada, adecuado para el consumo de blog / contenido. Cuenta con un diseño responsivo con soporte para temas oscuros que utilizan clases CSS de Tailwind y sin JavaScript.
Componente del sistema de clasificación retro
Un componente de sistema de calificación simple y de estilo retro para comercio electrónico, con colores vibrantes y soporte para temas oscuros usando Tailwind CSS.
Componente del sistema de clasificación
Un componente del sistema de clasificación receptivo con soporte para temas oscuros, diseñado en un estilo minimalista / plano con un esquema de color pastel para interfaces de redes sociales. Es un componente complejo con múltiples elementos interactivos.