Composant Composants d’affichage de contenu
Un composant d’affichage de contenu réactif avec prise en charge du mode sombre pour les sites Web d’entreprise.
HTML Code
<div class="dark:bg-gray-900 dark:text-gray-200 py-12">
<div class="container mx-auto px-4">
<div class="md:flex md:items-center md:justify-between">
<div class="md:w-1/2">
<h2 class="text-3xl font-bold mb-4">Our Mission</h2>
<p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Learn More</button>
</div>
<div class="md:w-1/2 mt-8 md:mt-0">
<img src="https://images.unsplash.com/photo-1588702547930-db7c329119ba?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Mission Image" class="rounded-lg shadow-lg">
</div>
</div>
<div class="md:flex md:items-center md:justify-between mt-12">
<div class="md:w-1/2 mb-8 md:mb-0">
<img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34ac?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Values Image" class="rounded-lg shadow-lg">
</div>
<div class="md:w-1/2 md:pl-8">
<h2 class="text-3xl font-bold mb-4">Our Values</h2>
<ul class="list-disc list-inside">
<li class="mb-2">Integrity and Honesty</li>
<li class="mb-2">Customer Focus</li>
<li class="mb-2">Innovation and Excellence</li>
<li class="mb-2">Teamwork and Collaboration</li>
</ul>
</div>
</div>
<div class="mt-12 text-center">
<h2 class="text-3xl font-bold mb-6">What Our Clients Say</h2>
<div class="md:flex md:-mx-4">
<div class="md:w-1/3 px-4 mb-8 md:mb-0">
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<p class="italic mb-4">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
<div class="flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full mr-4">
<div>
<p class="font-bold">John Smith</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">CEO, Company A</p>
</div>
</div>
</div>
</div>
<div class="md:w-1/3 px-4 mb-8 md:mb-0">
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<p class="italic mb-4">"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
<div class="flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full mr-4">
<div>
<p class="font-bold">Jane Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Marketing Director, Company B</p>
</div>
</div>
</div>
</div>
<div class="md:w-1/3 px-4">
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<p class="italic mb-4">"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."</p>
<div class="flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Client Avatar" class="w-12 h-12 rounded-full mr-4">
<div>
<p class="font-bold">Peter Jones</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">CTO, Company C</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composants d’affichage du contenu
Un composant d’affichage de contenu réactif pour les médias sociaux conçu dans un style skeuomorphe avec des couleurs pastel, avec plusieurs éléments interactifs et la prise en charge du mode sombre.
Pastel3DBlogContentCard
Un composant d’affichage de contenu réactif pour les blogs ou les sections de contenu, conçu avec Tailwind CSS. Il présente une mise en page simple avec une esthétique inspirée de la 3D utilisant des ombres et des effets de survol. La palette de couleurs est un pastel doux pour le mode clair, avec un thème compatible avec le mode sombre. Le composant comprend une image, un titre, des métadonnées (auteur/date), un extrait et un bouton « Lire la suite ». Les images fictives sont utilisées à partir de picsum.photos et randomuser.me.
Composant Composants d’affichage de contenu
Un composant d’affichage de contenu avec des microinteractions, une conception réactive et la prise en charge du thème sombre à l’aide de Tailwind CSS. Propose des effets de survol subtils et des animations de concentration sur des éléments interactifs.