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
Componenti di visualizzazione dei contenuti
Un semplice componente di visualizzazione di contenuti reattivi in stile vintage per l'e-commerce, che utilizza una combinazione di colori monocromatica e supporta la modalità scura.
Componente Visualizzazione contenuto
Un componente reattivo per mostrare lavori o prodotti in uno stile di modalità scura con una combinazione di colori pastello.
Pastel3DBlogContentCard
Un componente di visualizzazione dei contenuti reattivo per blog o sezioni di contenuti, progettato con Tailwind CSS. Presenta un layout semplice con un'estetica ispirata al 3D che utilizza ombre ed effetti al passaggio del mouse. La combinazione di colori è pastello tenue per la modalità chiara, con un tema compatibile con la modalità scura. Il componente include un'immagine, un titolo, metadati (autore/data), un estratto e un pulsante "Leggi di più". Le immagini segnaposto vengono utilizzate da picsum.photos e randomuser.me.