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.
Código HTML
<div class="flex flex-col items-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-4 border-indigo-500 dark:border-teal-400 transition-all duration-300 ease-in-out hover:shadow-lg"/>
<div class="flex flex-col">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Price Display</h2>
<p class="text-sm text-gray-500 dark:text-gray-400">An example of a price display component.</p>
</div>
</div>
<div class="mt-4 p-4 bg-white dark:bg-gray-700 rounded-lg shadow-lg transition-all duration-300 ease-in-out hover:bg-indigo-200 dark:hover:bg-teal-500">
<h3 class="text-xl font-bold text-indigo-600 dark:text-teal-300">$99.99</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">Special Sale Price</p>
<div class="mt-2 flex justify-between items-center">
<button class="px-4 py-2 bg-indigo-500 text-white rounded-md shadow-md transform transition-transform hover:scale-105 hover:bg-indigo-600 dark:bg-teal-500 dark:hover:bg-teal-600">Buy Now</button>
<button class="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md transition-all duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-500">Details</button>
</div>
</div>
</div>Componentes relacionados
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 mínimo con soporte de modo responsivo y oscuro
Componente de visualización de precios
Un componente de visualización de precios complejo diseñado en estilo skeuomórfico que imita elementos del mundo real, adecuado para blogs y consumo de contenido con un esquema de color triádico y un diseño receptivo con soporte para modo oscuro.