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 de pasteles de la Bauhaus
Un componente del sistema de calificación receptivo y funcional con formas geométricas y colores pastel, adecuado para la integración en el tablero. Incluye soporte para modo oscuro.
Componente del sistema de clasificación brutalista
Un componente del sistema de calificación responsivo diseñado en un estilo brutalista usando Tailwind CSS, con soporte para temas oscuros.
Componente del sistema de clasificación
Un componente del sistema de clasificación de estilo retro/vintage diseñado con Tailwind CSS, con un diseño responsivo y compatibilidad con temas oscuros.