Composant Cartes Skeuomorphic
Un composant de cartes simple conçu dans un style skeuomorphe, utilisant un schéma de couleurs analogue pour la lecture et la consommation de contenu. Ce composant est réactif et prend en charge le thème sombre.
HTML Code
<div class="flex flex-col items-center justify-center p-6 space-y-4 md:flex-row md:flex-wrap md:space-x-4 md:space-y-0">
<div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
<img class="rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Card Image" />
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
<p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
<p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
<img class="rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Card Image" />
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
<p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" />
<p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
</div>
</div>
</div>
</div>Composants associés
Composant de cartes neumorphes
Un composant de cartes réactives conçu dans le style Neumorphism avec prise en charge du thème sombre, avec des ombres subtiles et une mise en page flexible.
Composant des cartes météo Bauhaus
Un composant simple et réactif des cartes météo/climat inspiré des principes de conception du Bauhaus, avec des formes géométriques et une palette de couleurs triadique. Inclut la prise en charge du mode sombre.
Composant Cartes 3D
Un composant de carte réactif avec un style de conception 3D, des couleurs vives et plusieurs éléments interactifs, adapté à un tableau de bord. Il prend en charge le mode sombre en utilisant le préfixe sombre de Tailwind.