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 web per la visualizzazione dei dati che utilizza lo stile Material Design con Tailwind CSS, con layout reattivi, supporto per temi scuri e immagini segnaposto.
Sports_Fitness_Dashboard_Monospace
Un componente pulito e ispirato al codice per la guida di sport/fitness con caratteri monospace, estetica del terminale e toni oceano/blu. È dotato di un design reattivo, supporto per la modalità oscura ed elementi di visualizzazione dei dati adatti per squadre sportive e applicazioni di fitness.
Componente Componenti per la visualizzazione dei dati per l'e-commerce
Un componente di visualizzazione dei dati per l'e-commerce, con uno stile basato sui principi del Material Design, toni terrosi e supporto della modalità oscura reattiva utilizzando Tailwind CSS.