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.
HTML Code
<div class="dark:bg-gray-900 dark:text-white bg-gray-200 text-gray-800 p-6 rounded-lg shadow-xl dark:shadow-2xl max-w-sm mx-auto my-8">
<div class="relative">
<img class="w-full h-48 object-cover rounded-md shadow-md transform transition duration-500 hover:scale-105" src="https://picsum.photos/400/300" alt="Placeholder image">
<div class="absolute bottom-0 right-0 -mb-4 mr-4">
<img class="w-10 h-10 rounded-full border-2 border-white shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
</div>
</div>
<div class="mt-6">
<h2 class="text-xl font-bold mb-2 dark:text-white text-gray-800">Skeuomorphic Card</h2>
<p class="text-gray-700 dark:text-gray-300">
This is a Skeuomorphism-inspired card with responsive effects and dark theme support utilizing Tailwind CSS.
</p>
</div>
<div class="mt-4 flex justify-between items-center">
<span class="text-sm text-gray-600 dark:text-gray-400">Posted on October 26, 2023</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-600">
Read More
</button>
</div>
</div>Composants associés
Crypto_Blockchain_Cards_Component
Un ensemble de cartes réactives conçues pour les applications de crypto-monnaie et de blockchain, avec une palette de couleurs neutres chaudes, des ombres inspirées des matériaux et la prise en charge du mode sombre.
Retro_E_commerce_Cards_Component
Un composant de carte produit e-commerce réactif avec une esthétique rétro/vintage, des tons de terre et une prise en charge du mode sombre, adapté aux expériences d’achat en ligne. Les fonctionnalités incluent l’image du produit, le nom, le prix et un bouton d’appel à l’action.
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.