Composant Cartes
Un composant de carte simple, propre et digne de confiance adapté aux environnements d’affaires d’entreprise/professionnels, spécialement conçu pour les applications de crypto-monnaie et de blockchain. Il dispose d’une palette de couleurs complémentaire, d’un design réactif et d’une prise en charge du mode sombre.
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>Composants associés
Composant Cartes
Un composant de cartes complexe conçu pour le mode sombre, adapté à la consommation de blogs et de contenu avec une palette de couleurs triadique.
Composant Cartes Skeuomorphic
Inspiré par le skeuomorphisme, le composant de carte suivant est entièrement réactif avec la prise en charge du thème sombre. Pour le mode sombre, la prise en charge CSS est suffisante. Aucun JavaScript n’est nécessaire.
Forum_Community_Cards_Component
Un composant de cartes réactives et interactives pour un forum ou une plate-forme communautaire, avec une palette de couleurs rétro/vintage et des effets de survol subtils pour les micro-interactions. Inclut la prise en charge du mode sombre et du HTML sémantique.