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.
Código HTML
<div class="flex flex-col min-h-screen bg-gray-100 dark:bg-gray-900 justify-center items-center py-10">
<div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<div class="px-6 py-8">
<h2 class="text-center text-4xl font-extrabold text-gray-900 dark:text-white mb-4">Pro Plan</h2>
<p class="text-center text-gray-600 dark:text-gray-300 text-lg mb-8">Elevate your experience with advanced features.</p>
<div class="flex justify-center items-baseline mb-8">
<span class="text-6xl font-extrabold text-indigo-600 dark:text-indigo-400">$29</span>
<span class="text-2xl font-medium text-gray-500 dark:text-gray-400">/month</span>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-center">
<svg class="h-6 w-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-gray-700 dark:text-gray-200 text-lg">Unlimited Projects</span>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-gray-700 dark:text-gray-200 text-lg">Advanced Analytics</span>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-gray-700 dark:text-gray-200 text-lg">24/7 Priority Support</span>
</li>
<li class="flex items-center">
<svg class="h-6 w-6 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span class="text-gray-700 dark:text-gray-200 text-lg">Custom Integrations</span>
</li>
</ul>
<button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
Get Started
</button>
</div>
</div>
</div>Componentes relacionados
Componente de visualización de precios
Un componente de visualización de precios complejo y receptivo para un tablero, con soporte para temas oscuros, que utiliza Tailwind CSS en un diseño plano minimalista y en escala de grises.
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 neumórfico
Un componente de visualización de precios complejo, receptivo y compatible con el modo oscuro con un estilo de diseño Neumorphism y un esquema de color análogo, adecuado para el consumo de blog/contenido. Cuenta con múltiples elementos interactivos como conmutadores y niveles detallados.