Componente Schede
Un componente della carta semplice, pulito e affidabile adatto per ambienti aziendali / professionali, progettato specificamente per applicazioni di criptovaluta e blockchain. È dotato di una combinazione di colori complementari, un design reattivo e il supporto per la modalità oscura.
Codice 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>Componenti correlati
Forum_Community_Cards_Component
Un componente di carte reattivo e interattivo per un forum o una piattaforma di community, con una combinazione di colori retrò/vintage e sottili effetti al passaggio del mouse per le microinterazioni. Include il supporto per la modalità oscura e l'HTML semantico.
Componente Carte Skeuomorfe
Un semplice componente di schede progettato in uno stile scheumorfico, utilizzando una combinazione di colori analoga per la lettura e il consumo di contenuti. Questo componente è reattivo e supporta il tema scuro.
Componente della scheda Skeuomorphism
Un componente di carta reattivo in stile Skeuomorphism con supporto per la modalità oscura utilizzando Tailwind CSS. Include immagini segnaposto e avatar.