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.
HTML Code
<div class="flex flex-wrap justify-center gap-4 p-6 bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
<img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/200/100" alt="Card Image">
<div class="p-4">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a short description of the card content.</p>
</div>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="ml-2">
<h3 class="text-md text-gray-800 dark:text-white">User Name</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
<img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/201/100" alt="Card Image">
<div class="p-4">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Another Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">More details about the content of this card.</p>
</div>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
<div class="ml-2">
<h3 class="text-md text-gray-800 dark:text-white">Another User</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
<img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/202/100" alt="Card Image">
<div class="p-4">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Third Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Description of the card content goes here.</p>
</div>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
<div class="ml-2">
<h3 class="text-md text-gray-800 dark:text-white">User Three</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
</div>
</div>
</div>
</div>Composants associés
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.
Composant de carte brutaliste
Un composant de carte brutaliste avec un design réactif et une prise en charge du mode sombre.
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.