Composants Cartes Composant Cartes

Composant Cartes

Un composant de carte de blog/contenu réactif conçu avec un style skeuomorphe et des tons de terre. Comprend un titre, une image, une brève description et un avatar pour les informations sur l’auteur. Prend en charge le mode sombre.

Aperçu

HTML Code

<div class="max-w-3xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg space-y-4">
    <div class="bg-green-200 dark:bg-green-700 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/200" alt="Blog Post Image" class="w-full h-48 object-cover">
    </div>
    <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the blog post. It provides a summary of the content and encourages users to read more.</p>
    </div>
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
        <div class="text-gray-800 dark:text-gray-200">
            <p class="font-semibold">Author Name</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Date Published</p>
        </div>
    </div>
</div>

Composants associés

Composant Cartes en mode sombre

Un composant de cartes réactives conçu pour les sites Web d’entreprise/d’entreprise avec une interface utilisateur en mode sombre et une palette de couleurs en niveaux de gris, avec une complexité et une interactivité modérées.

Ouvrir

Composant Cartes

Composant de cartes réactives avec micro-interactions et prise en charge du thème sombre.

Ouvrir

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.

Ouvrir