Componente de tarjetas
Un componente de tarjeta simple, limpio y confiable adecuado para entornos comerciales corporativos/profesionales, diseñado específicamente para aplicaciones de criptomonedas y blockchain. Cuenta con una combinación de colores complementaria, un diseño receptivo y compatibilidad con el modo oscuro.
Código HTML
<div class="bg-neutral-100 dark:bg-neutral-900 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl font-extrabold text-neutral-900 dark:text-neutral-100 sm:text-4xl">
Explore Our Blockchain Solutions
</h2>
<p class="mt-4 text-lg text-neutral-600 dark:text-neutral-400">
Industry-leading technology and secure platforms for your digital assets.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Card 1: Secure Wallets -->
<div class="bg-white dark:bg-neutral-800 rounded-lg shadow-xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl md:hover:shadow-3xl">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/250?random=1" alt="Secure Wallets">
<div class="p-6">
<h3 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-2">Secure Wallets</h3>
<p class="text-neutral-600 dark:text-neutral-400 text-sm mb-4">
Protect your cryptocurrencies with our high-security, multi-signature wallets.
</p>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-400">
Learn More
<svg class="ml-2 -mr-1 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
</div>
<!-- Card 2: Decentralized Exchange -->
<div class="bg-white dark:bg-neutral-800 rounded-lg shadow-xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl md:hover:shadow-3xl">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/250?random=2" alt="Decentralized Exchange">
<div class="p-6">
<h3 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-2">Decentralized Exchange</h3>
<p class="text-neutral-600 dark:text-neutral-400 text-sm mb-4">
Trade digital assets directly with other users, ensuring transparency and control.
</p>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-400">
Explore DEX
<svg class="ml-2 -mr-1 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
</div>
<!-- Card 3: Blockchain Analytics -->
<div class="bg-white dark:bg-neutral-800 rounded-lg shadow-xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl md:hover:shadow-3xl">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/250?random=3" alt="Blockchain Analytics">
<div class="p-6">
<h3 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-2">Blockchain Analytics</h3>
<p class="text-neutral-600 dark:text-neutral-400 text-sm mb-4">
Gain insights into market trends and transaction data with our advanced analytics tools.
</p>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-400">
View Data
<svg class="ml-2 -mr-1 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de tarjeta de esqueuomorfismo
Un componente de tarjeta de estilo Skeuomorphism con capacidad de respuesta para el modo oscuro mediante Tailwind CSS. Incluye imágenes de marcador de posición y avatares.
Componente de tarjetas
Un componente de tarjetas complejo diseñado para el modo oscuro, adecuado para el consumo de blogs y contenido con un esquema de color triádico.
Componente de tarjetas de modo oscuro
Un componente de tarjetas responsivas diseñado para sitios web comerciales/corporativos con una interfaz de usuario de modo oscuro y un esquema de color en escala de grises, con una complejidad e interactividad moderadas.