Componente Tabelle dati
Glassmorphism Data Tables Componente con colori vivaci per il portfolio, reattivo con supporto per la modalità scura. Non è necessario JavaScript, solo HTML con Tailwind CSS.
Codice HTML
<div class="H-screen w-full bg-gradient-to-br from-purple-800 via-pink-600 to-red-500 p-8 dark:from-gray-900 dark:via-gray-800 dark:to-black">
<div class="mx-auto max-w-4xl rounded-lg bg-white bg-opacity-10 p-8 shadow-lg backdrop-blur-lg dark:bg-gray-700 dark:bg-opacity-20">
<h2 class="mb-6 text-center text-4xl font-bold text-white drop-shadow-lg dark:text-gray-200">My Projects</h2>
<div class="overflow-x-auto">
<table class="min-w-full rounded-lg bg-white bg-opacity-5 text-left text-sm text-white shadow-md backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-5">
<thead>
<tr class="bg-gray-700 bg-opacity-20 text-gray-200 dark:bg-gray-900 dark:bg-opacity-30">
<th class="px-6 py-3">Project Name</th>
<th class="px-6 py-3">Category</th>
<th class="px-6 py-3">Status</th>
<th class="px-6 py-3">Preview</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
<td class="px-6 py-4">Vibrant Dash</td>
<td class="px-6 py-4">Dashboard UI</td>
<td class="px-6 py-4"><span class="rounded-full bg-green-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Completed</span></td>
<td class="px-6 py-4">
<img src="https://picsum.photos/seed/vibrantdash/100/60" alt="Vibrant Dash Preview" class="h-10 w-16 rounded object-cover shadow-md" />
</td>
</tr>
<tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
<td class="px-6 py-4">AquaFlow Landing</td>
<td class="px-6 py-4">Website</td>
<td class="px-6 py-4"><span class="rounded-full bg-yellow-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">In Progress</span></td>
<td class="px-6 py-4">
<img src="https://picsum.photos/seed/aquaflow/100/60" alt="AquaFlow Landing Preview" class="h-10 w-16 rounded object-cover shadow-md" />
</td>
</tr>
<tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
<td class="px-6 py-4">Neon Chatbot</td>
<td class="px-6 py-4">Application</td>
<td class="px-6 py-4"><span class="rounded-full bg-blue-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Planned</span></td>
<td class="px-6 py-4">
<img src="https://picsum.photos/seed/neonchatbot/100/60" alt="Neon Chatbot Preview" class="h-10 w-16 rounded object-cover shadow-md" />
</td>
</tr>
<tr class="hover:bg-gray-600 hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
<td class="px-6 py-4">Retro Portfolio</td>
<td class="px-6 py-4">Portfolio</td>
<td class="px-6 py-4"><span class="rounded-full bg-green-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Completed</span></td>
<td class="px-6 py-4">
<img src="https://picsum.photos/seed/retroportfolio/100/60" alt="Retro Portfolio Preview" class="h-10 w-16 rounded object-cover shadow-md" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>Componenti correlati
Componente Tabelle dati
Un componente di tabella dati reattivo a tema retrò/vintage, progettato con Tailwind CSS, che supporta la modalità oscura e presenta elementi di design nostalgici degli anni '80/'90.
Componente Tabelle dati
Un semplice componente della tabella dati con colori del tono della terra, micro-interazioni e supporto per la modalità oscura, adatto per le interfacce dei social media.
Organic_Nature_Dashboard_Data_Table
Un componente di tabella dati di complessità moderata, ispirato all'organico/alla natura, per dashboard con una combinazione di colori vivaci, con linee fluide, reattività e supporto per la modalità scura.