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 receptivo para un tablero, con microinteracciones atractivas y un esquema de color triádico, con soporte para el modo oscuro.
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.
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.