Carte de blog sur le design matériel
Un composant de carte d’article de blog réactif avec une image, un titre, un extrait et des informations sur l’auteur, conçu dans un style de conception matérielle avec des tons chauds de coucher de soleil. Inclut la prise en charge du mode sombre.
HTML Code
<div class="p-4 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
<div class="max-w-sm mx-auto md:max-w-xl lg:max-w-4xl shadow-lg dark:shadow-xl rounded-xl overflow-hidden bg-white dark:bg-gray-800 transition-all duration-300 transform hover:scale-[1.01]">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:h-full md:w-56 lg:w-64" src="https://picsum.photos/id/1083/800/600" alt="Blog post cover image">
</div>
<div class="p-6 md:p-8 flex flex-col justify-between">
<div>
<div class="uppercase tracking-wide text-sm text-red-600 dark:text-red-400 font-semibold mb-2">Technology & Trends</div>
<a href="#" class="block mt-1 text-2xl leading-tight font-extrabold text-orange-800 dark:text-orange-300 hover:underline transition-colors duration-200">
The Future of AI: Beyond Automation
</a>
<p class="mt-3 text-gray-600 dark:text-gray-300 leading-relaxed text-base">
Explore the transformative power of artificial intelligence as it moves beyond simple automation to reshape industries, society, and daily life. Discover emerging applications and ethical considerations.
</p>
</div>
<div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full object-cover border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Author avatar">
</div>
<div class="ml-4">
<div class="text-sm font-semibold text-gray-900 dark:text-gray-100">Sarah Jenkins</div>
<p class="text-xs text-gray-500 dark:text-gray-400">Senior AI Researcher • Aug 15, 2023</p>
</div>
</div>
<div class="mt-6 flex justify-end">
<button class="px-4 py-2 text-sm font-medium rounded-full text-white bg-orange-600 hover:bg-orange-700 dark:bg-orange-700 dark:hover:bg-orange-800 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-50 transition-colors duration-200 shadow-md">
Read More
</button>
<button class="ml-3 px-4 py-2 text-sm font-medium rounded-full text-gray-700 dark:text-gray-200 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50 transition-colors duration-200 shadow-md">
Share
</button>
</div>
</div>
</div>
</div>
<div class="mt-8 max-w-sm mx-auto md:max-w-xl lg:max-w-4xl shadow-lg dark:shadow-xl rounded-xl overflow-hidden bg-white dark:bg-gray-800 transition-all duration-300 transform hover:scale-[1.01]">
<div class="relative pb-[56.25%] overflow-hidden">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1020/800/450" alt="Another blog post cover image">
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-60"></div>
<div class="absolute bottom-0 left-0 p-6 md:p-8 text-white">
<div class="uppercase tracking-wide text-sm font-semibold mb-2 text-yellow-300">Creativity & Design</div>
<a href="#" class="block mt-1 text-2xl leading-tight font-extrabold hover:underline transition-colors duration-200">
Unlocking Your Inner Artist: A Guide to Creative Thinking
</a>
</div>
</div>
<div class="p-6 md:p-8">
<p class="mt-3 text-gray-600 dark:text-gray-300 leading-relaxed text-base">
Dive into the world of creative exploration and learn techniques to stimulate your imagination, break through mental blocks, and unleash your artistic potential, regardless of your background.
</p>
<div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full object-cover border-2 border-yellow-300 dark:border-yellow-600" src="https://randomuser.me/api/portraits/men/24.jpg" alt="Author avatar">
</div>
<div class="ml-4">
<div class="text-sm font-semibold text-gray-900 dark:text-gray-100">Michael Davis</div>
<p class="text-xs text-gray-500 dark:text-gray-400">Art & Design Blogger • Sep 01, 2023</p>
</div>
</div>
<div class="mt-6 flex justify-end">
<button class="px-4 py-2 text-sm font-medium rounded-full text-white bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-200 shadow-md">
Explore Article
</button>
</div>
</div>
</div>
</div>Composants associés
Composants multimédias Composante 2
Un composant multimédia de style rétro/vintage avec un design nostalgique inspiré de l’esthétique des années 80/90, avec des effets réactifs et une prise en charge du thème sombre, en utilisant Tailwind CSS.
Composant Composants multimédias
Un composant multimédia complexe et réactif conçu pour les interfaces finance/banque, avec une palette de couleurs Ocean/Blue et une prise en charge native du mode sombre.
Composant Composants multimédias
Un composant multimédia d’interface utilisateur complexe en mode sombre pour la documentation/les sites wiki, avec un schéma de couleurs arc-en-ciel dégradé. Il comprend différents types de médias tels que la vidéo, l’audio et les images avec des informations détaillées et des éléments interactifs, tous réactifs et utilisant le HTML sémantique.