Tabelle di dati

Componente Tabelle dati

Un componente Data Table reattivo con design del neumorfismo, una combinazione di colori triadica e supporto per la modalità scura, adatto per un blog o un sito di contenuti.

Apri anteprima

                <div class="p-8 font-sans antialiased text-gray-700 bg-gray-200 dark:bg-gray-900 dark:text-gray-200 transition-all duration-500">
  <div class="p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <h2 class="mb-6 text-2xl font-semibold text-center text-gray-800 dark:text-gray-100">Our Latest Posts</h2>
    <div class="overflow-x-auto">
      <table class="w-full text-left table-auto">
        <thead>
          <tr>
            <th class="p-4 rounded-tl-lg bg-gray-300 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark text-gray-700 dark:text-gray-300">Title</th>
            <th class="p-4 bg-gray-300 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark text-gray-700 dark:text-gray-300">Category</th>
            <th class="p-4 rounded-tr-lg bg-gray-300 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark text-gray-700 dark:text-gray-300">Date</th>
          </tr>
        </thead>
        <tbody>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post1/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                Exploring Neumorphism in UI Design                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-blue-800 bg-blue-200 rounded-full dark:text-blue-200 dark:bg-blue-800">Design</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-01-15</td>
          </tr>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post2/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                The Future of Web Development                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-green-800 bg-green-200 rounded-full dark:text-green-200 dark:bg-green-800">Technology</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-01-20</td>
          </tr>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post3/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                Mastering Tailwind CSS                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-red-800 bg-red-200 rounded-full dark:text-red-200 dark:bg-red-800">Front-end</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-01-25</td>
          </tr>
          <tr class="transition-all duration-300 ease-in-out hover:scale-[1.02]">
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">
              <div class="flex items-center">
                <img src="https://picsum.photos/seed/post4/50/50" alt="Post thumbnail" class="mr-3 rounded shadow-md">
                A Journey into Minimalist Art                
              </div>
            </td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700"><span class="px-3 py-1 text-sm font-semibold text-yellow-800 bg-yellow-200 rounded-full dark:text-yellow-200 dark:bg-yellow-800">Art</span></td>
            <td class="p-4 border-t border-gray-300 dark:border-gray-700">2023-02-01</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<style>
  /* Neumorphism shadows for light theme */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a6a6a6, -8px -8px 16px #ffffff;
  }

  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #a6a6a6, inset -5px -5px 10px #ffffff;
  }

  /* Neumorphism shadows for dark theme */
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #2e2e2e;
  }

  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #2e2e2e;
  }

</style>

<script>
  // This script is for demonstration purposes to toggle dark mode.
  // In a real application, you might use a theme switcher or OS preference.
  document.documentElement.classList.add('dark');
</script>

Componente Tabelle dati

Tabella di dati reattiva per dashboard con supporto per temi scuri

Apri anteprima

                <div class="container mx-auto p-4 dark:bg-gray-900 dark:text-gray-200">
  <h2 class="text-2xl font-bold mb-4 dark:text-white">Dashboard Data</h2>
  <div class="overflow-x-auto">
    <table class="min-w-full bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
      <thead class="bg-gray-200 dark:bg-gray-700">
        <tr>
          <th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Name</th>
          <th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Email</th>
          <th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Role</th>
          <th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Status</th>
        </tr>
      </thead>
      <tbody class="text-gray-700 dark:text-gray-400">
        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
          <td class="text-left py-3 px-4 flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
            <span>John Doe</span>
          </td>
          <td class="text-left py-3 px-4">[email protected]</td>
          <td class="text-left py-3 px-4">Admin</td>
          <td class="text-left py-3 px-4"><span class="px-2 py-1 bg-green-200 text-green-800 text-xs font-semibold rounded-full dark:bg-green-700 dark:text-green-200">Active</span></td>
        </tr>
        <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
          <td class="text-left py-3 px-4 flex items-center">
             <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Jane Smith</span>
          </td>
          <td class="text-left py-3 px-4">[email protected]</td>
          <td class="text-left py-3 px-4">Editor</td>
          <td class="text-left py-3 px-4"><span class="px-2 py-1 bg-yellow-200 text-yellow-800 text-xs font-semibold rounded-full dark:bg-yellow-600 dark:text-yellow-100">Pending</span></td>
        </tr>
         <tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
          <td class="text-left py-3 px-4 flex items-center">
             <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Peter Jones</span>
          </td>
          <td class="text-left py-3 px-4">[email protected]</td>
          <td class="text-left py-3 px-4">Viewer</td>
          <td class="text-left py-3 px-4"><span class="px-2 py-1 bg-gray-200 text-gray-800 text-xs font-semibold rounded-full dark:bg-gray-600 dark:text-gray-100">Inactive</span></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Componente Tabella dati

Tabella dati reattiva con modalità scura

Apri anteprima

                <div class="container mx-auto p-4">
  <div class="border rounded-lg overflow-hidden">
    <table class="min-w-full bg-white dark:bg-gray-800">
      <thead>
        <tr>
          <th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Title</th>
          <th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Author</th>
          <th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 1</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">John Doe</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-27</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 2</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Jane Smith</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-26</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 3</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Peter Jones</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-25</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

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.

Apri anteprima

                <div class="container mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
    <table class="min-w-full leading-normal">
      <thead>
        <tr>
          <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
            User
          </th>
          <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
            Status
          </th>
          <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
            Joined
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <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/85.jpg"
                     alt="" />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 dark:text-white whitespace-no-wrap">
                  John Doe
                </p>
              </div>
            </div>
          </td>
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <p class="text-gray-900 dark:text-white whitespace-no-wrap">
              Active
            </p>
          </td>
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <p class="text-gray-900 dark:text-white whitespace-no-wrap">
              Jan 10, 2023
            </p>
          </td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <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/45.jpg"
                     alt="" />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 dark:text-white whitespace-no-wrap">
                  Jane Smith
                </p>
              </div>
            </div>
          </td>
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <p class="text-gray-900 dark:text-white whitespace-no-wrap">
              Pending
            </p>
          </td>
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <p class="text-gray-900 dark:text-white whitespace-no-wrap">
              Feb 15, 2023
            </p>
          </td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <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/60.jpg"
                     alt="" />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 dark:text-white whitespace-no-wrap">
                  Peter Jones
                </p>
              </div>
            </div>
          </td>
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <p class="text-gray-900 dark:text-white whitespace-no-wrap">
              Inactive
            </p>
          </td>
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <p class="text-gray-900 dark:text-white whitespace-no-wrap">
              Mar 20, 2023
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Componente Tabelle dati

Un componente di tabella dati reattivo con un design minimalista e piatto, adatto per siti Web aziendali/aziendali, con supporto per temi scuri.

Apri anteprima

                <div class="overflow-x-auto">
    <table class="min-w-full bg-white dark:bg-gray-800">
        <thead>
            <tr class="w-full bg-gray-200 dark:bg-gray-700">
                <th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">#</th>
                <th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Name</th>
                <th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Email</th>
                <th class="py-3 px-4 text-left text-gray-600 dark:text-gray-300">Avatar</th>
            </tr>
        </thead>
        <tbody>
            <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">1</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">John Doe</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
            </tr>
            <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">2</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">Jane Smith</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
            </tr>
            <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">3</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">Alice Johnson</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
            </tr>
            <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">4</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">Bob Williams</td>
                <td class="py-3 px-4 text-gray-700 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-4"><img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar" class="w-10 h-10 rounded-full"/></td>
            </tr>
        </tbody>
    </table>
</div>

Tabella dei dati sul brutalismo

Un componente semplice e brutale della tabella dei dati con colori analoghi per siti web aziendali/aziendali. È reattivo e supporta la modalità oscura utilizzando Tailwind CSS.

Apri anteprima

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800">
  <table class="min-w-full border-collapse border-spacing-0 shadow-xl">
    <thead>
      <tr class="bg-teal-500 dark:bg-teal-700 text-white">
        <th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Name</th>
        <th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Title</th>
        <th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Status</th>
        <th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Role</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-teal-200 dark:bg-teal-600 text-gray-900 dark:text-white">
        <td class="border border-gray-700 dark:border-gray-600 p-4">John Doe</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Software Engineer</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Active</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Member</td>
      </tr>
      <tr class="bg-teal-300 dark:bg-teal-500 text-gray-900 dark:text-white">
        <td class="border border-gray-700 dark:border-gray-600 p-4">Jane Smith</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">UI/UX Designer</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Active</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Member</td>
      </tr>
      <tr class="bg-teal-200 dark:bg-teal-600 text-gray-900 dark:text-white">
        <td class="border border-gray-700 dark:border-gray-600 p-4">Peter Jones</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Product Manager</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Inactive</td>
        <td class="border border-gray-700 dark:border-gray-600 p-4">Admin</td>
      </tr>
    </tbody>
  </table>
</div>

Tabella dati Modalità scura

Componente tabella dati reattiva con modalità oscura

Apri anteprima

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

Un componente di tabelle dati progettato con lo stile Brutalismo con colori ad alta saturazione per l'e-commerce, reattivo con supporto per temi scuri.

Apri anteprima

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

Tabella dati dei social media Monocromatico 3D Semplice

Un semplice componente monocromatico per la tabella dei dati di progettazione 3D per interfacce di social media con supporto per temi scuri.

Apri anteprima

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

Componente Tabelle di dati reattive con supporto per la modalità oscura utilizzando Tailwind CSS

Apri anteprima

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

Categorie