adrema/resources/css/table.css

.custom-table {
    width: 100%;
    & > thead > th {
        @apply text-left px-6 text-gray-200 font-semibold py-3 border-gray-600 border-b;
    }

    & > tr {
        @apply text-gray-200 transition-all duration-300 rounded hover:bg-gray-800;
        & > td {
            @apply py-1 px-6;
        }
    }

    &.custom-table-sm {
        & > thead > th {
            @apply px-3 py-2;
        }
        & > tr {
            & > td {
                @apply py-1 px-3;
            }
        }
    }

    &.custom-table-light {
        & > thead > th {
            @apply border-gray-500;
        }
        & > td {
            &:hover {
                @apply bg-gray-700;
            }
        }
    }

}
.custom-table > * {
    display: table-row;
}
.custom-table > * > * {
    display: table-cell;
}