Social Media Data Table Monochromatic 3D Simple
A simple, monochromatic 3D design data table component for social media interfaces with dark theme support.
HTML Code
<div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg shadow-lg overflow-hidden"> <div class="overflow-x-auto"> <table class="min-w-full bg-gray-300 dark:bg-gray-700 rounded-lg"> <thead> <tr class="bg-gray-400 dark:bg-gray-600 text-gray-800 dark:text-gray-200 uppercase text-sm leading-normal"> <th class="py-3 px-6 text-left">User</th> <th class="py-3 px-6 text-left">Activity</th> <th class="py-3 px-6 text-center">Likes</th> <th class="py-3 px-6 text-center">Comments</th> </tr> </thead> <tbody class="text-gray-800 dark:text-gray-200 text-sm font-light"> <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900"> <td class="py-3 px-6 text-left whitespace-nowrap"> <div class="flex items-center"> <div class="mr-2"> <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar"/> </div> <span>John Doe</span> </div> </td> <td class="py-3 px-6 text-left">Posted a photo</td> <td class="py-3 px-6 text-center">125</td> <td class="py-3 px-6 text-center">36</td> </tr> <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900"> <td class="py-3 px-6 text-left whitespace-nowrap"> <div class="flex items-center"> <div class="mr-2"> <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar"/> </div> <span>Jane Smith</span> </div> </td> <td class="py-3 px-6 text-left">Commented on a post</td> <td class="py-3 px-6 text-center">88</td> <td class="py-3 px-6 text-center">12</td> </tr> <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900"> <td class="py-3 px-6 text-left whitespace-nowrap"> <div class="flex items-center"> <div class="mr-2"> <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar"/> </div> <span>Peter Jones</span> </div> </td> <td class="py-3 px-6 text-left">Shared a link</td> <td class="py-3 px-6 text-center">54</td> <td class="py-3 px-6 text-center">7</td> </tr> <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-900"> <td class="py-3 px-6 text-left whitespace-nowrap"> <div class="flex items-center"> <div class="mr-2"> <img class="w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar"/> </div> <span>Mary Williams</span> </div> </td> <td class="py-3 px-6 text-left">Liked a photo</td> <td class="py-3 px-6 text-center">201</td> <td class="py-3 px-6 text-center">45</td> </tr> </tbody> </table> </div></div>Related Components
Data Tables Component
A simple data table component with earth tone colors, micro-interactions, and dark mode support, suitable for social media interfaces.
Retro Data Grid
A responsive data table component styled with a retro/vintage 80s/90s aesthetic using Tailwind CSS. It features a blocky design, vibrant color accents (purple/orange in light mode, green/neon in dark mode), and a monospace font for a nostalgic tech feel. The table includes distinct header and row styling, bordered elements like avatars and status badges, and supports dark mode via CSS. Placeholder data includes user avatars, contact information, status badges, roles, and join dates. The table is horizontally scrollable on smaller screens for better responsiveness.
Data Tables Component
A responsive data tables component with a glassmorphism design, featuring translucent frosted glass-like elements, blur effects, and support for dark mode.