Componente Schede in modalità scura
Un componente di schede reattive progettato per siti Web aziendali/aziendali con un'interfaccia utente in modalità scura e una combinazione di colori in scala di grigi, caratterizzata da complessità e interattività moderate.
Codice HTML
<div class="flex flex-wrap justify-center p-5 bg-gray-900 dark:bg-gray-800">
<div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Card Image">
<div class="p-5">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="Avatar">
<div class="ml-4 text-white">
<h2 class="text-lg font-semibold">John Doe</h2>
<p class="text-gray-400">@johndoe</p>
</div>
</div>
<h3 class="text-xl font-bold text-white mb-2">Business Strategy</h3>
<p class="text-gray-300 mb-4">This card contains information about business strategies that can be utilized for enhancing corporate effectiveness.</p>
<a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Learn More</a>
</div>
</div>
<div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=2" alt="Card Image">
<div class="p-5">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/11.jpg" alt="Avatar">
<div class="ml-4 text-white">
<h2 class="text-lg font-semibold">Jane Smith</h2>
<p class="text-gray-400">@janesmith</p>
</div>
</div>
<h3 class="text-xl font-bold text-white mb-2">Marketing Insights</h3>
<p class="text-gray-300 mb-4">Insights and analytics on market trends that can help your business adapt and grow.</p>
<a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Discover More</a>
</div>
</div>
<div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=3" alt="Card Image">
<div class="p-5">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar">
<div class="ml-4 text-white">
<h2 class="text-lg font-semibold">Mike Johnson</h2>
<p class="text-gray-400">@mikejohnson</p>
</div>
</div>
<h3 class="text-xl font-bold text-white mb-2">Financial Planning</h3>
<p class="text-gray-300 mb-4">Detailed financial planning services aimed at helping companies achieve their financial goals.</p>
<a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Get Started</a>
</div>
</div>
</div>Componenti correlati
Componente della scheda Skeuomorphism
Un componente di carta reattivo in stile Skeuomorphism con supporto per la modalità oscura utilizzando Tailwind CSS. Include immagini segnaposto e avatar.
Componente Schede
Un componente di carte portfolio reattivo con uno stile di design brutalista, che utilizza una combinazione di colori pastello e una complessità moderata con funzionalità interattive. Questa scheda mostra il lavoro o i prodotti e supporta la modalità scura.
Componente Glassmorphism Cards
Componente Glassmorphism Cards con colori vivaci. Design reattivo con supporto per temi scuri. Utilizza picsum.photos per le immagini e randomuser.me per gli avatar.