데이터 테이블 구성 요소
Glassmorphism Data Tables 포트폴리오를 위한 생생한 색상을 가진 구성 요소, 다크 모드 지원으로 반응합니다. JavaScript가 필요하지 않으며 Tailwind CSS가 있는 HTML만 있으면 됩니다.
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>