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.
Código HTML
<div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Rate This Item</h2>
<div class="flex justify-center mb-4">
<img src="https://picsum.photos/200/100" alt="Item Image" class="rounded-md">
</div>
<div class="flex justify-center mb-4">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="rounded-full w-12 h-12 border-2 border-gray-300 dark:border-gray-600 mr-2">
<span class="text-gray-800 dark:text-white self-center">John Doe</span>
</div>
<div class="flex justify-center mb-4">
<span class="text-yellow-500 text-3xl">★ ★ ★ ★ ☆</span>
</div>
<div class="flex justify-between mt-4">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Submit</button>
<button class="bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-800 dark:text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Cancel</button>
</div>
</div>Componentes relacionados
Componente del sistema de clasificación
Un componente complejo del sistema de clasificación para el comercio electrónico con un diseño minimalista/plano, una combinación de colores en escala de grises, un diseño responsivo y compatibilidad con temas oscuros mediante Tailwind CSS. Sin JavaScript. Utiliza picsum.photos y randomuser.me para imágenes y avatares.
Componente del sistema de clasificación
Un componente del sistema de clasificación diseñado en un estilo retro / vintage, utilizando un esquema de color complementario y una interfaz compleja para el contenido del blog. Este componente es compatible con el modo oscuro y responde mediante Tailwind CSS.