Carte de conception matérielle
Composant de carte de style Material Design avec un comportement réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Caractéristiques repères visuels d’élévation et d’ondulation.
HTML Code
<div class="flex items-center justify-center min-h-screen px-4 py-8 bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-sm overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
<img class="object-cover object-center w-full h-56" src="https://picsum.photos/seed/material/400/300" alt="Card image">
<div class="px-6 py-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at ante non diam consequat consectetur at et metus.</p>
</div>
<div class="px-6 py-4">
<button class="px-4 py-2 text-sm font-medium text-blue-600 transition-colors duration-200 transform rounded-md hover:bg-blue-500 hover:text-white focus:outline-none focus:bg-blue-500 focus:text-white dark:text-blue-400 dark:hover:bg-blue-400 dark:hover:text-gray-900 dark:focus:bg-blue-400 dark:focus:text-gray-900">Action 1</button>
<button class="px-4 py-2 ml-4 text-sm font-medium text-blue-600 transition-colors duration-200 transform rounded-md hover:bg-blue-500 hover:text-white focus:outline-none focus:bg-blue-500 focus:text-white dark:text-blue-400 dark:hover:bg-blue-400 dark:hover:text-gray-900 dark:focus:bg-blue-400 dark:focus:text-gray-900">Action 2</button>
</div>
</div>
</div>Composants associés
Composant Cartes
Un composant de carte de portefeuille réactif avec un style de conception brutaliste, utilisant une palette de couleurs pastel et une complexité modérée avec des fonctionnalités interactives. Cette carte présente des travaux ou des produits et prend en charge le mode sombre.
Cartes sociales en mode sombre
Un composant de carte réactif conçu pour le mode sombre avec des tons de terre, conçu pour les interfaces de médias sociaux.
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.