Skeuomorphic_Crypto_Cards
Un conjunto de tarjetas esqueuomórficas y receptivas diseñadas para aplicaciones de criptomonedas o blockchain. Cuenta con colores pastel, sombras y reflejos sutiles, y compatibilidad con el modo oscuro.
Código HTML
<div class="p-4 sm:p-8 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 min-h-screen dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 flex flex-col items-center justify-center font-sans">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-gray-800 mb-10 text-center tracking-tight drop-shadow-lg dark:text-gray-100">
<span class="block">Crypto Portfolio</span>
<span class="block text-2xl sm:text-3xl text-gray-600 dark:text-gray-300 font-medium mt-2">Your Digital Assets</span>
</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full max-w-6xl">
<!-- Card 1: Bitcoin -->
<div class="relative flex flex-col justify-between p-6 rounded-3xl backdrop-filter backdrop-blur-sm bg-gradient-to-br from-white/80 to-gray-50/80 shadow-[inset_0_1px_0px_rgba(255,255,255,0.7),_0_4px_16px_rgba(0,0,0,0.1),_0_12px_48px_rgba(0,0,0,0.05)] dark:from-gray-700/80 dark:to-gray-800/80 dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.05),_0_4px_16px_rgba(0,0,0,0.4),_0_12px_48px_rgba(0,0,0,0.2)] transform transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]">
<div class="absolute inset-0 rounded-3xl border-2 border-white/50 dark:border-gray-600/50 pointer-events-none"></div>
<div class="flex items-center mb-4">
<img src="https://www.picsum.photos/id/60/60" alt="Bitcoin Icon" class="w-16 h-16 rounded-full shadow-lg border-2 border-white dark:border-gray-600 drop-shadow-md">
<h2 class="ml-4 text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">Bitcoin</h2>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">The first and most well-known cryptocurrency.</p>
<div class="grid grid-cols-2 gap-2 text-sm mb-4">
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Price:</span>
<span class="block text-pink-600 dark:text-pink-400 font-bold text-lg">$65,432.10</span>
</div>
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Change (24h):</span>
<span class="block text-green-600 dark:text-green-400 font-bold text-lg">+3.15%</span>
</div>
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Holdings:</span>
<span class="block text-purple-600 dark:text-purple-400 font-bold text-lg">0.5 BTC</span>
</div>
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Value:</span>
<span class="block text-yellow-600 dark:text-yellow-400 font-bold text-lg">$32,716.05</span>
</div>
</div>
<button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold text-white bg-gradient-to-br from-pink-400 to-purple-500 shadow-lg shadow-purple-300/50 dark:shadow-purple-800/50 active:shadow-inner-sm border border-white/50 active:border-white/80 active:from-pink-500 active:to-purple-600 transition-all duration-150 transform active:scale-98 relative overflow-hidden group">
<span class="relative z-10 group-hover:scale-105 transition-transform duration-200">Trade Bitcoin</span>
<span class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 group-active:opacity-0 transition-opacity duration-200"></span>
</button>
</div>
<!-- Card 2: Ethereum -->
<div class="relative flex flex-col justify-between p-6 rounded-3xl backdrop-filter backdrop-blur-sm bg-gradient-to-br from-white/80 to-gray-50/80 shadow-[inset_0_1px_0px_rgba(255,255,255,0.7),_0_4px_16px_rgba(0,0,0,0.1),_0_12px_48px_rgba(0,0,0,0.05)] dark:from-gray-700/80 dark:to-gray-800/80 dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.05),_0_4px_16px_rgba(0,0,0,0.4),_0_12px_48px_rgba(0,0,0,0.2)] transform transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]">
<div class="absolute inset-0 rounded-3xl border-2 border-white/50 dark:border-gray-600/50 pointer-events-none"></div>
<div class="flex items-center mb-4">
<img src="https://www.picsum.photos/id/65/60" alt="Ethereum Icon" class="w-16 h-16 rounded-full shadow-lg border-2 border-white dark:border-gray-600 drop-shadow-md">
<h2 class="ml-4 text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">Ethereum</h2>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">The decentralized platform for smart contracts.</p>
<div class="grid grid-cols-2 gap-2 text-sm mb-4">
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Price:</span>
<span class="block text-teal-600 dark:text-teal-400 font-bold text-lg">$3,456.78</span>
</div>
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Change (24h):</span>
<span class="block text-red-600 dark:text-red-400 font-bold text-lg">-1.50%</span>
</div>
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Holdings:</span>
<span class="block text-purple-600 dark:text-purple-400 font-bold text-lg">3.0 ETH</span>
</div>
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Value:</span>
<span class="block text-yellow-600 dark:text-yellow-400 font-bold text-lg">$10,370.34</span>
</div>
</div>
<button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold text-white bg-gradient-to-br from-green-400 to-teal-500 shadow-lg shadow-teal-300/50 dark:shadow-teal-800/50 active:shadow-inner-sm border border-white/50 active:border-white/80 active:from-green-500 active:to-teal-600 transition-all duration-150 transform active:scale-98 relative overflow-hidden group">
<span class="relative z-10 group-hover:scale-105 transition-transform duration-200">Trade Ethereum</span>
<span class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 group-active:opacity-0 transition-opacity duration-200"></span>
</button>
</div>
<!-- Card 3: BNB -->
<div class="relative flex flex-col justify-between p-6 rounded-3xl backdrop-filter backdrop-blur-sm bg-gradient-to-br from-white/80 to-gray-50/80 shadow-[inset_0_1px_0px_rgba(255,255,255,0.7),_0_4px_16px_rgba(0,0,0,0.1),_0_12px_48px_rgba(0,0,0,0.05)] dark:from-gray-700/80 dark:to-gray-800/80 dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.05),_0_4px_16px_rgba(0,0,0,0.4),_0_12px_48px_rgba(0,0,0,0.2)] transform transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]">
<div class="absolute inset-0 rounded-3xl border-2 border-white/50 dark:border-gray-600/50 pointer-events-none"></div>
<div class="flex items-center mb-4">
<img src="https://www.picsum.photos/id/70/60" alt="BNB Icon" class="w-16 h-16 rounded-full shadow-lg border-2 border-white dark:border-gray-600 drop-shadow-md">
<h2 class="ml-4 text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">BNB</h2>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">The native cryptocurrency of the Binance Smart Chain.</p>
<div class="grid grid-cols-2 gap-2 text-sm mb-4">
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Price:</span>
<span class="block text-red-600 dark:text-red-400 font-bold text-lg">$589.99</span>
</div>
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Change (24h):</span>
<span class="block text-green-600 dark:text-green-400 font-bold text-lg">+0.80%</span>
</div>
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Holdings:</span>
<span class="block text-purple-600 dark:text-purple-400 font-bold text-lg">10.0 BNB</span>
</div>
<div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
<span class="block font-medium">Value:</span>
<span class="block text-yellow-600 dark:text-yellow-400 font-bold text-lg">$5,899.90</span>
</div>
</div>
<button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold text-white bg-gradient-to-br from-blue-400 to-indigo-500 shadow-lg shadow-indigo-300/50 dark:shadow-indigo-800/50 active:shadow-inner-sm border border-white/50 active:border-white/80 active:from-blue-500 active:to-indigo-600 transition-all duration-150 transform active:scale-98 relative overflow-hidden group">
<span class="relative z-10 group-hover:scale-105 transition-transform duration-200">Trade BNB</span>
<span class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 group-active:opacity-0 transition-opacity duration-200"></span>
</button>
</div>
</div>
<footer class="mt-12 text-center text-gray-600 dark:text-gray-400 text-sm">
<p>© 2023 Crypto Portfolio. All rights reserved.</p>
</footer>
</div>Componentes relacionados
Tarjeta de comercio electrónico
Componente de tarjeta de comercio electrónico receptivo con soporte de modo oscuro utilizando los principios de Tailwind CSS y Material Design. Cuenta con un esquema de colores vibrantes con complejidad moderada que incluye elementos interactivos como botones y efectos de desplazamiento. Utiliza un diseño basado en cuadrículas e incorpora sombras para darle profundidad.
Componente de cartas esqueuomórficas
Inspirado en el skeuomorfismo, el siguiente componente de la tarjeta es totalmente responsivo con soporte para temas oscuros. Para el modo oscuro, la compatibilidad con CSS es suficiente. No se necesita JavaScript.
Componente de tarjetas de redes sociales
Un componente de tarjeta minimalista y vibrante adecuado para interfaces de redes sociales, que muestra publicaciones de usuarios con imágenes, me gusta, comentarios y opciones para compartir. Es totalmente sensible y es compatible con el modo oscuro.