Composant Cartes

Composant de cartes réactives avec micro-interactions et prise en charge du thème sombre.

Aperçu

HTML Code

<div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum1/600/400" alt="Card image cap">
      <div class="p-4">
        <h5 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Card title</h5>
        <p class="text-gray-700 dark:text-gray-300 text-base mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
        </p>
        <a href="#" class="inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors duration-300">Read more</a>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum2/600/400" alt="Card image cap">
      <div class="p-4">
        <h5 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Card title</h5>
        <p class="text-gray-700 dark:text-gray-300 text-base mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
        </p>
        <a href="#" class="inline-block bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition-colors duration-300">Read more</a>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum3/600/400" alt="Card image cap">
      <div class="p-4">
        <h5 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Card title</h5>
        <p class="text-gray-700 dark:text-gray-300 text-base mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
        </p>
        <a href="#" class="inline-block bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition-colors duration-300">Read more</a>
      </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.

Ouvrir

Skeuomorphic_Crypto_Cards

Un ensemble de cartes réactives et skeuomorphes conçues pour les applications de crypto-monnaie ou de blockchain. Dispose de couleurs pastel, d’ombres et de reflets subtils, et d’une prise en charge du mode sombre.

Ouvrir

Composant de la carte Skeuomorphism

Un composant de carte réactif de style Skeuomorphism avec prise en charge du mode sombre à l’aide de Tailwind CSS. Il comprend des images et des avatars de substitution.

Ouvrir