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
Industrial_Farming_Cards_Component
Un ensemble de cartes réactives avec une esthétique industrielle et de matières premières, des couleurs neutres chaudes et un support en mode sombre, adapté à l’agriculture et aux sites Web agricoles. Comprend des éléments apparents et un design utilitaire.
Music_Cards_Component
Un composant de carte audio/musicale réactif avec des dégradés de tons riches et des transitions fluides, avec prise en charge du mode sombre. Mise en page simple pour l’affichage d’un album ou d’une piste.
Composant Cartes de médias sociaux
Un composant de carte minimaliste et dynamique adapté aux interfaces de médias sociaux, affichant les messages des utilisateurs avec des images, des likes, des commentaires et des options de partage. Il est entièrement réactif et prend en charge le mode sombre.