Componente de visualización de precios
Un componente de visualización de precios receptivo con estética retro / vintage y colores vibrantes, adecuado para interfaces de redes sociales, con soporte para modo oscuro.
Código HTML
<div class="max-w-xs mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="p-5">
<img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-md mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
<div class="ml-3">
<h2 class="text-lg text-violet-600 dark:text-violet-400 font-bold">John Doe</h2>
<span class="text-sm text-gray-600 dark:text-gray-300">@johndoe</span>
</div>
</div>
<h3 class="text-2xl text-red-600 dark:text-red-400 font-semibold mb-2">$49.99</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">Original Vintage T-Shirt from the 80s.</p>
<button class="w-full bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-200">Add to Cart</button>
</div>
</div>Componentes relacionados
Componente de visualización de precios
Un componente de visualización de precios complejos de estilo retro-vintage para carteras, con un esquema de color triádico, capacidad de respuesta y compatibilidad con el modo oscuro mediante Tailwind CSS. No se incluye JavaScript.
Componente de visualización de precios
Un componente de visualización de precios inspirado en 3D con un esquema de color monocromático, diseñado para interfaces de redes sociales. Es un componente complejo y receptivo con soporte para modo oscuro, construido con Tailwind CSS. No se incluye JavaScript.
Componente de visualización de precios
Un componente de visualización de precios receptivo para un tablero, con microinteracciones atractivas y un esquema de color triádico, con soporte para el modo oscuro.