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.
Código HTML
<div class="bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center p-8">
<div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 rounded-lg shadow-lg p-8 max-w-sm w-full transform transition-all duration-500 hover:scale-105">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold font-mono mb-2 text-teal-600 dark:text-teal-400">Pro Plan</h2>
<p class="text-gray-600 dark:text-gray-400">Level up your portfolio</p>
</div>
<div class="text-center mb-8">
<p class="text-5xl font-extrabold mb-2 text-purple-600 dark:text-purple-400">$29<span class="text-xl font-medium text-gray-500 dark:text-gray-300">/month</span></p>
<p class="text-sm text-gray-500 dark:text-gray-300">Billed Annually</p>
</div>
<ul class="mb-8 space-y-4">
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Unlimited Projects
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
10GB Storage
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Custom Domain
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
24/7 Support
</li>
</ul>
<button class="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-300 transform hover:scale-105">
Get Started
</button>
</div>
</div>Componentes relacionados
Componente de visualización de precios
Un componente de visualización de precios de estilo Neumorphism con un esquema de color complementario (naranja suave y azul claro), complejidad moderada para el comercio electrónico. Cuenta con un diseño responsivo con soporte para temas oscuros. El componente muestra una imagen, un título y un precio del producto con un botón "Agregar al carrito". El modo oscuro utiliza colores complementarios desaturados.
Componente de visualización de precios
Componente de visualización de precios con diseño receptivo, compatibilidad con modo oscuro y combinación de colores vibrantes.
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.