Componente di visualizzazione dei dati
Un componente di visualizzazione dei dati reattivo progettato in stile Material Design con una combinazione di colori pastello, adatto per mostrare il lavoro del portfolio con supporto per la modalità oscura.
Codice HTML
<div class="max-w-4xl mx-auto p-4">
<h2 class="text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Portfolio Showcase</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/300/200" alt="Portfolio Item" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project. It's visually appealing and user-friendly.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/300/201" alt="Portfolio Item" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project. It focuses on usability and design.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/300/202" alt="Portfolio Item" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project. Created with attention to detail.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/300/203" alt="Portfolio Item" class="w-full h-32 object-cover">
<div class="p-4">
<h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 4</h3>
<p class="text-gray-600 dark:text-gray-400">Short description of the project. Designed with modern aesthetics.</p>
</div>
</div>
</div>
</div>Componenti correlati
Componenti di visualizzazione dei dati
Un componente di visualizzazione dei dati progettato in stile brutalista con Tailwind CSS, con layout reattivi e supporto per temi scuri.
Componenti di visualizzazione dei dati
Un componente di visualizzazione dei dati reattivo con elementi di progettazione 3D con supporto per temi scuri.
Componente di visualizzazione dei dati di neumorfismo
Componente di visualizzazione dei dati in stile neumorfismo per i contenuti del blog, con una combinazione di colori pastello, complessità moderata, reattività e supporto per la modalità scura.