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.
Carte de tableau de bord triadique de conception matérielle
Un composant d’affichage de contenu de tableau de bord simple et réactif avec l’esthétique du Material Design, utilisant une palette de couleurs triadique et la prise en charge du mode sombre. Convient pour afficher des mesures ou des informations clés.
Composant d’affichage du contenu
Un composant d’affichage de contenu réactif qui intègre des micro-interactions avec des animations attrayantes axées sur les actions de l’utilisateur. Il inclut la prise en charge du mode sombre et des espaces réservés pour les images et les avatars.