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.
Código HTML
<div class="max-w-md mx-auto bg-gray-50 dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
<h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Rate Our Content</h2>
<div class="flex items-center justify-center mb-6">
<img src="https://picsum.photos/60/60" alt="Blog Post" class="rounded-full border-2 border-blue-500 mr-3">
<div>
<p class="text-lg text-gray-700 dark:text-gray-300">Fantastic Blog Post Title</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Published on January 1, 2023</p>
</div>
</div>
<div class="flex justify-center mb-6">
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-yellow-400">★</span>
<span class="text-gray-300">★</span>
</div>
<textarea class="w-full h-24 p-3 border border-blue-400 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" placeholder="Leave your feedback here..."></textarea>
<button class="w-full mt-3 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition duration-300">Submit Rating</button>
<div class="flex items-center justify-between mt-4 text-gray-700 dark:text-gray-300">
<span>👍 120 Likes</span>
<span>💔 5 Dislikes</span>
</div>
</div>Componentes relacionados
Componente del sistema de clasificación
Un componente del sistema de clasificación responsivo diseñado en un estilo Brutalism usando Tailwind CSS. Es compatible con el tema oscuro y tiene un alto contraste con un diseño crudo y atrevido.
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 brutalista
Un componente del sistema de calificación responsivo diseñado en un estilo brutalista usando Tailwind CSS, con soporte para temas oscuros.