Tabla de datos de redes sociales Monocromática 3D Simple
Un componente de tabla de datos de diseño 3D simple y monocromático para interfaces de redes sociales con soporte para temas oscuros.
Código HTML
<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>
Componentes relacionados
Skeuomorphic_Earth_Tone_Data_Table
Una tabla de datos simple y receptiva con un estilo de diseño esqueuomórfico y una combinación de colores en tonos tierra, adecuada para sitios web comerciales / corporativos. Incluye soporte para modo oscuro.
Tabla de datos de lujo/premium para organizaciones sin fines de lucro/caridad
Un componente de tabla de datos elegante y receptivo diseñado con una sensación de lujo/premium utilizando tonos azules corporativos, adecuado para organizaciones benéficas y sin fines de lucro. Incluye soporte para modo oscuro y una interfaz compleja para mostrar datos con acciones.
Componente de tablas de datos
Un componente de tablas de datos responsivo diseñado con el estilo Neumorphism utilizando Tailwind CSS, con soporte para temas oscuros e imágenes de marcador de posición aleatorio.