Composant Composants d’affichage de contenu
Un composant d’affichage de contenu réactif conçu pour les sites Web d’entreprise/d’entreprise avec prise en charge du mode sombre et une palette de couleurs vives. Il comprend des sections pour les avatars des utilisateurs, le contenu textuel et les images.
HTML Code
<div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg max-w-4xl mx-auto">
<h2 class="text-2xl font-bold mb-4">Our Team</h2>
<div class="grid md:grid-cols-2 gap-5">
<div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
<img class="w-full rounded-lg" src="https://picsum.photos/300/200" alt="Content Image">
<div class="flex items-center mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="ml-3">
<p class="text-lg font-semibold">John Doe</p>
<p class="text-sm text-gray-400">CEO</p>
</div>
</div>
<p class="mt-2 text-gray-300">John is the visionary behind the company, driving innovation and strategies.</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
<img class="w-full rounded-lg" src="https://picsum.photos/300/201" alt="Content Image">
<div class="flex items-center mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
<div class="ml-3">
<p class="text-lg font-semibold">Jane Smith</p>
<p class="text-sm text-gray-400">CTO</p>
</div>
</div>
<p class="mt-2 text-gray-300">Jane oversees all technical aspects, ensuring seamless operations.</p>
</div>
</div>
<h2 class="text-2xl font-bold mt-10 mb-4">Company Achievements</h2>
<div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
<ul class="list-disc list-inside">
<li class="mt-2 text-gray-300">Awarded "Best Startup of the Year".</li>
<li class="mt-2 text-gray-300">Reached over 10,000 active users in under a year.</li>
<li class="mt-2 text-gray-300">Secured $1 million in funding.</li>
</ul>
</div>
</div>Composants associés
Carte de contenu de conception matérielle pour l’éducation
Une carte de contenu simple et réactive conçue avec les principes de conception matérielle, la palette de couleurs bleues de l’entreprise et la prise en charge du mode sombre, adaptée aux plateformes éducatives.
Composant d’affichage du contenu
Un composant d’affichage de contenu conçu dans un style skeuomorphe pour le commerce électronique avec un thème sombre. Il présente des produits avec un minimum d’éléments, en utilisant une palette de couleurs analogue pour une esthétique agréable.
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.