CCHub Logo CCHub Tailwind Collection
Komponenten Karten Skeuomorphic_Crypto_Cards

Skeuomorphic_Crypto_Cards

Ein Satz reaktionsschneller, skeuomorpher Karten, die für Kryptowährungs- oder Blockchain-Anwendungen entwickelt wurden. Mit Pastellfarben, dezenten Schatten und Lichtern sowie Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<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>&copy; 2023 Crypto Portfolio. All rights reserved.</p>
  </footer>

</div>

Verwandte Komponenten

Komponente "Skeuomorphe Karten"

Eine einfache Kartenkomponente, die in einem skeuomorphen Stil gestaltet ist und ein analoges Farbschema für das Lesen und den Konsum von Inhalten verwendet. Diese Komponente ist reaktionsschnell und unterstützt dunkles Design.

Offen

Karten-Komponente

Responsive Kartenkomponente mit Mikrointeraktionen und Unterstützung für dunkle Themen.

Offen

Industrial_Farming_Cards_Component

Ein Satz reaktionsschneller Karten mit industrieller Rohstoffästhetik, warmen, neutralen Farben und Unterstützung für den Dunkelmodus, geeignet für Landwirtschafts- und Landwirtschafts-Websites. Mit freiliegenden Elementen und utilitaristischem Design.

Offen