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.
HTML Code
<div class="flex flex-wrap justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900 p-10">
<!-- Card 1 -->
<div class="m-4 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/card1/300/200" alt="Random image">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Skeuomorphic Card</h3>
<p class="text-gray-700 dark:text-gray-300 text-base">This is a skeuomorphic-inspired card with a subtle shadow and rounded corners, designed to look like a physical object.</p>
<div class="mt-4 flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of random user">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Developer</p>
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="m-4 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/card2/300/200" alt="Random image">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Interactive Design</h3>
<p class="text-gray-700 dark:text-gray-300 text-base">Combining modern web practices with classic design principles, this card offers a visually engaging experience.</p>
<div class="mt-4 flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of random user">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Designer</p>
</div>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="m-4 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/card3/300/200" alt="Random image">
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Responsive Layout</h3>
<p class="text-gray-700 dark:text-gray-300 text-base">This card is built with responsiveness in mind, ensuring it looks great on all devices, from desktops to mobile phones.</p>
<div class="mt-4 flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/47.jpg" alt="Avatar of random user">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">Peter Jones</p>
<p class="text-gray-600 dark:text-gray-400">Project Manager</p>
</div>
</div>
</div>
</div>
</div>
<style>
/* Custom dark shadow for dark mode skeuomorphism */
.dark\:shadow-xl-dark {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}
</style>
Composants associés
Luxury_Portfolio_Cards_Ocean_Blue
Un composant complexe, luxueux/haut de gamme, conçu avec des tons océan/bleu pour présenter des œuvres ou des produits. Dispose d’un design réactif, d’une typographie sophistiquée, de visuels élégants et d’une prise en charge complète du mode sombre.
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.
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.