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
Componente Visualizzazione contenuto
Un componente di visualizzazione dei contenuti reattivo che incorpora microinterazioni con animazioni coinvolgenti incentrate sulle azioni dell'utente. Include il supporto per la modalità oscura e segnaposto per immagini e avatar.
Componente Componenti di visualizzazione dei contenuti
Componente di visualizzazione del contenuto Glassmorphism con i toni della terra
Componente Visualizzazione contenuto
Un componente di visualizzazione dei contenuti progettato in uno stile scheumorfico per l'e-commerce con un tema scuro. Mette in mostra prodotti con elementi minimali, utilizzando una combinazione di colori analoga per un'estetica piacevole.