Composant fonctionnel du blog
Composant fonctionnel avec conception 3D, palette de couleurs complémentaire, complexité modérée pour les blogs, réactif avec prise en charge du thème sombre. Pas de JS, juste du HTML et du Tailwind.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="text-center">
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">
From the Blog
</h2>
<p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 dark:text-gray-400 sm:mt-4">
Explore our latest articles and insights.
</p>
</div>
<div class="mt-12 grid gap-5 lg:grid-cols-3 lg:max-w-none">
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
<div class="flex-shrink-0">
<img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog1/400/300" alt="">
</div>
<div class="flex-1 p-6 flex flex-col justify-between">
<div class="flex-1">
<p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
<a href="#" class="hover:underline">
Article
</a>
</p>
<a href="#" class="block mt-2">
<p class="text-xl font-semibold text-gray-900 dark:text-white">
Boost your conversion rate
</p>
<p class="mt-3 text-base text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
</p>
</a>
</div>
<div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<a href="#">
<span class="sr-only">Roel Aufderhar</span>
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
</a>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900 dark:text-white">
<a href="#" class="hover:underline">
Roel Aufderhar
</a>
</p>
<div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
<time datetime="2020-03-16">Mar 16, 2020</time>
<span aria-hidden="true">
·
</span>
<span>
6 min read
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
<div class="flex-shrink-0">
<img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog2/400/300" alt="">
</div>
<div class="flex-1 p-6 flex flex-col justify-between">
<div class="flex-1">
<p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
<a href="#" class="hover:underline">
Video
</a>
</p>
<a href="#" class="block mt-2">
<p class="text-xl font-semibold text-gray-900 dark:text-white">
How to use search engine optimization to drive traffic to your site
</p>
<p class="mt-3 text-base text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
</p>
</a>
</div>
<div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<a href="#">
<span class="sr-only">Brenna Goyette</span>
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
</a>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900 dark:text-white">
<a href="#" class="hover:underline">
Brenna Goyette
</a>
</p>
<div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
<time datetime="2020-03-16">Mar 16, 2020</time>
<span aria-hidden="true">
·
</span>
<span>
6 min read
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
<div class="flex-shrink-0">
<img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog3/400/300" alt="">
</div>
<div class="flex-1 p-6 flex flex-col justify-between">
<div class="flex-1">
<p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
<a href="#" class="hover:underline">
Case Study
</a>
</p>
<a href="#" class="block mt-2">
<p class="text-xl font-semibold text-gray-900 dark:text-white">
Improve your customer experience
</p>
<p class="mt-3 text-base text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
</p>
</a>
</div>
<div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<a href="#">
<span class="sr-only">Daniela Metz</span>
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/56.jpg" alt="">
</a>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900 dark:text-white">
<a href="#" class="hover:underline">
Daniela Metz
</a>
</p>
<div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
<time datetime="2020-03-16">Mar 16, 2020</time>
<span aria-hidden="true">
·
</span>
<span>
6 min read
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Tableau de bord des composants fonctionnels
Un composant de tableau de bord réactif conçu selon les principes de Material Design et une palette de couleurs monochromatiques. Il propose des mises en page basées sur une grille, des éléments interactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composante fonctionnelle des soins de santé
Un composant réactif et thématique pour les applications de santé, avec un design industriel, des couleurs sourdes et la prise en charge du mode sombre. Affiche les données du patient/capteur avec des actions rapides.
Skeuomorphic Earth Tones Carte du Gouvernement
Un composant de carte simple et réactif avec des éléments de design skeuomorphes et une palette de couleurs de tons de terre, adapté aux sites Web gouvernementaux ou de services publics, avec prise en charge du mode sombre.