Componente Componenti di visualizzazione dei contenuti
Un componente di visualizzazione dei contenuti reattivo progettato per siti Web aziendali/aziendali con supporto della modalità scura e una combinazione di colori vivaci. Include sezioni per avatar utente, contenuti testuali e immagini.
Codice HTML
<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>Componenti correlati
Espositore per schede prodotto e-commerce retrò
Un componente di visualizzazione dei prodotti di e-commerce complesso e reattivo con un'estetica retrò/vintage anni '80/'90, con una combinazione di colori viola/viola, elementi interattivi e supporto per la modalità scura.
Componenti di visualizzazione dei contenuti
Un portfolio di progettazione 3D che mostra lavori o prodotti con una combinazione di colori in scala di grigi e un design reattivo, che supporta la modalità scura.
Componente Componenti di visualizzazione dei contenuti
Un componente di visualizzazione dei contenuti con microinterazioni, colori in scala di grigi e complessità moderata, progettato per portafogli con supporto per temi scuri reattivi.