Componente de visualización de precios
Un componente de visualización de precios de estilo 3D que admite el modo oscuro y efectos responsivos, mostrando detalles de precios de productos.
Código HTML
<div class="max-w-sm mx-auto p-5 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition-transform transform hover:scale-105">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/200" alt="Product Image" class="w-full h-48 object-cover rounded-md shadow-md mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Name</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 mb-4">A brief description of the product goes here, highlighting features and benefits.</p>
<div class="flex flex-row items-baseline mb-4">
<span class="text-2xl font-bold text-gray-800 dark:text-white">$49.99</span>
<span class="text-sm text-gray-500 dark:text-gray-400 ml-2">/ month</span>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-sm text-gray-600 dark:text-gray-400">5 reviews</span>
</div>
<button class="mt-4 py-2 px-4 bg-blue-500 text-white rounded-md shadow-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-200">Buy Now</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 lúdico y alegre con elementos redondeados y una combinación de colores análoga, adecuado para que un portafolio muestre trabajos o productos. Es totalmente sensible y es compatible con el modo oscuro.
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.