Componentes de búsqueda

Categorías

Componentes Tablas de datos

Tablas de datos

Visualización tabular de datos estructurados

Tabla de datos Modo oscuro

Componente de tabla de datos responsivo con modo oscuro

                <div class="overflow-x-auto bg-gray-900 text-pastel-light"
>
    <table class="min-w-full table-auto">
        <thead>
            <tr class="bg-gray-800">
                <th class="px-4 py-2 text-left text-pastel-lighter">Name</th>
                <th class="px-4 py-2 text-left text-pastel-lighter">Title</th>
                <th class="px-4 py-2 text-left text-pastel-lighter">Status</th>
                <th class="px-4 py-2 text-left text-pastel-lighter">Role</th>
                <th class="px-4 py-2"></th>
            </tr>
        </thead>
        <tbody>
            <tr class="border-b border-gray-700 hover:bg-gray-700">
                <td class="px-4 py-2 flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
                    John Doe
                </td>
                <td class="px-4 py-2">Software Engineer</td>
                <td class="px-4 py-2">
                    <span class="px-2 py-1 bg-green-600 text-white rounded-full text-xs">Active</span>
                </td>
                <td class="px-4 py-2">Member</td>
                <td class="px-4 py-2 text-right">
                    <button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
                </td>
            </tr>
            <tr class="border-b border-gray-700 hover:bg-gray-700">
                <td class="px-4 py-2 flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
                    Jane Smith
                </td>
                <td class="px-4 py-2">UI/UX Designer</td>
                <td class="px-4 py-2">
                    <span class="px-2 py-1 bg-yellow-600 text-white rounded-full text-xs">Pending</span>
                </td>
                <td class="px-4 py-2">Admin</td>
                <td class="px-4 py-2 text-right">
                    <button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
                </td>
            </tr>
            <tr class="border-b border-gray-700 hover:bg-gray-700">
                <td class="px-4 py-2 flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/76.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
                    Robert Johnson
                </td>
                <td class="px-4 py-2">Project Manager</td>
                <td class="px-4 py-2">
                    <span class="px-2 py-1 bg-red-600 text-white rounded-full text-xs">Inactive</span>
                </td>
                <td class="px-4 py-2">Member</td>
                <td class="px-4 py-2 text-right">
                    <button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
                </td>
            </tr>
             <tr class="border-b border-gray-700 hover:bg-gray-700">
                <td class="px-4 py-2 flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
                    Emily Davis
                </td>
                <td class="px-4 py-2">Data Analyst</td>
                <td class="px-4 py-2">
                    <span class="px-2 py-1 bg-green-600 text-white rounded-full text-xs">Active</span>
                </td>
                <td class="px-4 py-2">Observer</td>
                <td class="px-4 py-2 text-right">
                    <button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Componente de tablas de datos

Un componente de tablas de datos diseñado con estilo brutalismo con colores de alta saturación para comercio electrónico, responsivo con soporte para temas oscuros.

Abrir Vista previa

                <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
        <thead class="bg-blue-600 dark:bg-blue-900">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">#</th>
                <th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Product</th>
                <th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Price</th>
                <th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Availability</th>
                <th class="px-6 py-3 text-left text-xs font-bold text-white uppercase tracking-wider">Action</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
            <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">1</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">\n                    <div class="flex items-center space-x-2">
                        <img src="https://picsum.photos/50/50" alt="Product Image" class="w-12 h-12 rounded-md">
                        <span>Awesome Product</span>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">$39.99</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">In Stock</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <a href="#" class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400">Buy Now</a>
                </td>
            </tr>
            <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">\n                    <div class="flex items-center space-x-2">
                        <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="w-12 h-12 rounded-md">
                        <span>Amazing Gadget</span>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">$29.99</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">Limited Stock</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <a href="#" class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400">Buy Now</a>
                </td>
            </tr>
            <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">3</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">\n                    <div class="flex items-center space-x-2">
                        <img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="w-12 h-12 rounded-md">
                        <span>Stylish Widget</span>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">$19.99</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">Out of Stock</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <a href="#" class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400">Notify Me</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

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.

Abrir Vista previa

                <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>

Componente de tablas de datos

Componente de tablas de datos responsivo con soporte de modo oscuro mediante Tailwind CSS

Abrir Vista previa

                <div class="container mx-auto p-4 dark:bg-gray-900">

  <div class="data-table bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800">
    <table class="min-w-full leading-normal">
      <thead>
        <tr class="bg-gradient-to-br from-purple-500 to-pink-500 text-white">
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Name
          </th>
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Role
          </th>
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Status
          </th>
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Created At
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <div class="flex items-center">
              <div class="flex-shrink-0 w-10 h-10">
                <img
                  class="w-full h-full rounded-full"
                  src="https://randomuser.me/api/portraits/men/1.jpg"
                  alt=""
                />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 whitespace-no-wrap dark:text-white">
                  John Doe
                </p>
              </div>
            </div>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">Admin</p>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <span
              class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight"
            >
              <span
                aria-hidden
                class="absolute inset-0 bg-green-200 opacity-50 rounded-full"
              ></span>
              <span class="relative">Active</span>
            </span>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              2023-10-27
            </p>
          </td>
        </tr>
        <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <div class="flex items-center">
              <div class="flex-shrink-0 w-10 h-10">
                <img
                  class="w-full h-full rounded-full"
                  src="https://randomuser.me/api/portraits/women/2.jpg"
                  alt=""
                />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 whitespace-no-wrap dark:text-white">
                  Jane Smith
                </p>
              </div>
            </div>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              Editor
            </p>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <span
              class="relative inline-block px-3 py-1 font-semibold text-orange-900 leading-tight"
            >
              <span
                aria-hidden
                class="absolute inset-0 bg-orange-200 opacity-50 rounded-full"
              ></span>
              <span class="relative">Pending</span>
            </span>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              2023-10-27
            </p>
          </td>
        </tr>
        <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <div class="flex items-center">
              <div class="flex-shrink-0 w-10 h-10">
                <img
                  class="w-full h-10 h-10 rounded-full"
                  src="https://randomuser.me/api/portraits/men/3.jpg"
                  alt=""
                />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 whitespace-no-wrap dark:text-white">
                  Peter Jones
                </p>
              </div>
            </div>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              Viewer
            </p>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <span
              class="relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight"
            >
              <span
                aria-hidden
                class="absolute inset-0 bg-red-200 opacity-50 rounded-full"
              ></span>
              <span class="relative">Inactive</span>
            </span>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              2023-10-27
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

RetroVintageDataTable

Un componente de tabla de datos de estilo retro/vintage receptivo que utiliza Tailwind CSS con soporte para modo oscuro.

Abrir Vista previa

                <!-- Retro Vintage Data Table Component -->
<div class="overflow-x-auto bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-xl border-4 border-teal-700 dark:border-teal-900 font-sans">
  <table class="min-w-full border-collapse border-spacing-0">
    <thead>
      <tr class="bg-teal-700 dark:bg-teal-900 text-gray-100 text-sm uppercase">
        <th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Name</th>
        <th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Title</th>
        <th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Status</th>
        <th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Role</th>
        <th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Image</th>
      </tr>
    </thead>
    <tbody class="bg-white dark:bg-gray-700 divide-y divide-gray-300 dark:divide-gray-600 text-gray-800 dark:text-gray-200 text-sm">
      <tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
            <img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
            Rickard Andersson
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Software Engineer</td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">Active</span>
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Member</td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
            <img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1015/60/40" alt="Random Image">
        </td>
      </tr>
      <tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
             <img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
             Alice Johnson
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Product Manager</td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100">Pending</span>
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Admin</td>
         <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
            <img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1018/60/40" alt="Random Image">
        </td>
      </tr>
       <tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
             <img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/men/70.jpg" alt="Avatar">
             Bob Williams
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">UX Designer</td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">Inactive</span>
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Member</td>
         <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
            <img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1024/60/40" alt="Random Image">
        </td>
      </tr>
       <tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
             <img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/women/8.jpg" alt="Avatar">
             Jane Smith
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Marketing Specialist</td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
          <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">Active</span>
        </td>
        <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Member</td>
         <td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
            <img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1025/60/40" alt="Random Image">
        </td>
      </tr>
    </tbody>
  </table>
</div>

Tabla de datos de brutalismo

Un componente de tabla de datos receptivo con diseño brutalista, con soporte para modo oscuro y efectos de desplazamiento.

Abrir Vista previa

                <div class="overflow-x-auto bg-white dark:bg-black text-black dark:text-white border-4 border-black dark:border-white">
  <table class="min-w-full table-auto">
    <thead>
      <tr>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Name</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Title</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Status</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Role</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
        <td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
          <img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          John Doe
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Software Engineer</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <span class="inline-block bg-green-500 text-white text-xs px-2 rounded-full uppercase font-semibold">Active</span>
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Member</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
        </td>
      </tr>
      <tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
        <td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
          <img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
          Jane Smith
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">UI Designer</td>
         <td class="px-4 py-2 border-b border-black dark:border-white">
          <span class="inline-block bg-yellow-500 text-black text-xs px-2 rounded-full uppercase font-semibold">Pending</span>
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Admin</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
        </td>
      </tr>
      <tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
        <td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
          <img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
          Peter Jones
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Data Analyst</td>
         <td class="px-4 py-2 border-b border-black dark:border-white">
          <span class="inline-block bg-red-500 text-white text-xs px-2 rounded-full uppercase font-semibold">Inactive</span>
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Member</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Componente de tablas de datos

Un componente de tablas de datos responsivo diseñado en estilo skeuomórfico con soporte para temas oscuros utilizando Tailwind CSS.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-3xl mx-auto mt-10">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">User Data Table</h2>
    <div class="overflow-x-auto">
        <table class="min-w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg">
            <thead class="bg-gray-200 dark:bg-gray-700">
                <tr>
                    <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Avatar</th>
                    <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Name</th>
                    <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Email</th>
                    <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Status</th>
                </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-800">
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar"></td>
                    <td class="py-3 px-4 text-gray-800 dark:text-gray-200">John Doe</td>
                    <td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
                    <td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar"></td>
                    <td class="py-3 px-4 text-gray-800 dark:text-gray-200">Jane Smith</td>
                    <td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
                    <td class="py-3 px-4"><span class="bg-red-500 text-white py-1 px-2 rounded-full text-xs">Inactive</span></td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
                    <td class="py-3 px-4 text-gray-800 dark:text-gray-200">Bob Johnson</td>
                    <td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
                    <td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="mt-4 text-center">
        <img class="mx-auto" src="https://picsum.photos/600/200" alt="Random placeholder">
    </div>
</div>

Un componente de tablas de datos diseñado en un estilo skeuomórfico, que imita a sus homólogos del mundo real con efectos responsivos y admite temas oscuros. La tabla incluye encabezados, filas con datos y utiliza imágenes de marcador de posición.

Abrir Vista previa

                <div class="container mx-auto px-4 py-8">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Data Tables</h2>
    <div class="overflow-x-auto shadow-lg rounded-lg">
        <table class="min-w-full bg-white dark:bg-gray-800">
            <thead class="bg-gray-200 dark:bg-gray-700">
                <tr>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">#</th>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Name</th>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Email</th>
                    <th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Avatar</th>
                </tr>
            </thead>
            <tbody>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">1</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">John Doe</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=1" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">2</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">Jane Smith</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=2" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">3</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">Alice Johnson</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=3" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
                    <td class="py-2 px-4 border-b dark:border-gray-600">4</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">Bob Brown</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
                    <td class="py-2 px-4 border-b dark:border-gray-600">
                        <img src="https://i.pravatar.cc/150?img=4" alt="Avatar" class="rounded-full w-10 h-10" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<style>
    /* Dark Mode Styles */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
            color: #cbd5e0;
        }
    }
</style>

Componente de tablas de datos

Un componente de tabla de datos minimalista y receptivo diseñado con Tailwind CSS que admite el modo oscuro.

Abrir Vista previa

                <div class="overflow-x-auto bg-white dark:bg-gray-800 shadow-md rounded-lg">
    <table class="min-w-full border-collapse">
        <thead class="bg-gray-200 dark:bg-gray-700">
            <tr>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Name</th>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Email</th>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Avatar</th>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Profile Picture</th>
            </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-900">
            <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">John Doe</td>
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
                <td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
            </tr>
            <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">Jane Smith</td>
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
                <td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
            </tr>
            <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">Alice Johnson</td>
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
                <td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
            </tr>
        </tbody>
    </table>
</div>

Componente de tablas de datos

Un componente de tablas de datos con capacidad de respuesta con un diseño de cristal, con elementos translúcidos similares al vidrio esmerilado, efectos de desenfoque y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="container mx-auto my-10 p-5 bg-white bg-opacity-30 backdrop-blur-lg shadow-lg rounded-lg dark:bg-gray-800 dark:bg-opacity-30">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center">Data Tables</h2>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-600">
            <thead class="bg-gray-50 dark:bg-gray-700">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avatar</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Profile Image</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-600">
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">1</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">John Doe</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/200/300" alt="Profile Image"></td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">Jane Smith</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar"></td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/201/300" alt="Profile Image"></td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">3</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">Michael Johnson</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar"></td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/202/300" alt="Profile Image"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<style>
    /* Additional styles for glassmorphism */
    body {
        background: rgb(239, 246, 255);
        background: linear-gradient(90deg, rgba(239, 246, 255, 1) 0%, rgba(255, 255, 255, 0.75) 100%);
    }
    .bg-white {
        background: rgba(255, 255, 255, 0.9) !important;
    }
    /* Dark mode adjustments */
    .dark .bg-white {
        background: rgba(31, 41, 55, 0.7) !important;
    }
</style>