Composant Cartes
Un composant de cartes complexe conçu pour le mode sombre, adapté à la consommation de blogs et de contenu avec une palette de couleurs triadique.
HTML Code
<div class="bg-gray-900 p-8 rounded-lg shadow-lg space-y-6 dark:bg-gray-800">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<div class="text-white">
<h2 class="text-xl font-bold">Author Name</h2>
<p class="text-gray-400">March 1, 2023</p>
</div>
</div>
<img src="https://picsum.photos/600/400" alt="Blog Post" class="w-full rounded-lg">
<h3 class="text-white text-2xl font-semibold">Blog Post Title</h3>
<p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
<div class="flex justify-between items-center">
<span class="bg-green-600 text-white py-1 px-3 rounded-full">Category</span>
<button class="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700">Read More</button>
</div>
</div>
<div class="bg-gray-900 p-8 rounded-lg shadow-lg space-y-6 dark:bg-gray-800">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<div class="text-white">
<h2 class="text-xl font-bold">Author Name</h2>
<p class="text-gray-400">March 2, 2023</p>
</div>
</div>
<img src="https://picsum.photos/600/401" alt="Blog Post" class="w-full rounded-lg">
<h3 class="text-white text-2xl font-semibold">Another Blog Post Title</h3>
<p class="text-gray-300">Suspense is best enjoyed with plenty of space as you travel up the textual ladders of creativeness.</p>
<div class="flex justify-between items-center">
<span class="bg-pink-600 text-white py-1 px-3 rounded-full">Category</span>
<button class="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700">Read More</button>
</div>
</div>Composants associés
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.
Neon_Glow_Farming_Cards
Un ensemble complexe de cartes réactives pour les sites Web agricoles, avec des effets de néon/lueur avec une palette de couleurs coucher de soleil/chaudes, y compris la prise en charge du mode sombre.
Composant Cartes de médias sociaux
Un composant de carte minimaliste et dynamique adapté aux interfaces de médias sociaux, affichant les messages des utilisateurs avec des images, des likes, des commentaires et des options de partage. Il est entièrement réactif et prend en charge le mode sombre.