CCHub Logo CCHub Tailwind Collection
Komponenten Karten Karten-Komponente

Karten-Komponente

Eine einfache, saubere und vertrauenswürdige Kartenkomponente, die für Unternehmens-/Geschäftsumgebungen geeignet ist und speziell für Kryptowährungs- und Blockchain-Anwendungen entwickelt wurde. Es verfügt über ein komplementäres Farbschema, responsives Design und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<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>

Verwandte Komponenten

Material Design Karte

Eine Kartenkomponente im Material Design-Stil mit reaktionsschnellem Verhalten und Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Verfügt über visuelle Hinweise auf Höhen- und Welleneffekte.

Offen

3D-Karten-Komponente

Eine reaktionsschnelle Kartenkomponente mit einem 3D-Designstil, lebendigen Farben und mehreren interaktiven Elementen, die sich für ein Dashboard eignet. Es unterstützt den Dunkelmodus mit dem dunklen Präfix von Tailwind.

Offen

Komponente "Skeuomorphe Karten"

Inspiriert vom Skeuomorphismus ist die folgende Kartenkomponente vollständig responsiv und unterstützt dunkle Themen. Für den Dunkelmodus ist CSS-Unterstützung ausreichend. Es wird kein JavaScript benötigt.

Offen