Midone - Tailwind Admin Dashboard Template

Regular Table

Basic Table

# First Name Last Name Username
1 Angelina Jolie @angelinajolie
2 Brad Pitt @bradpitt
3 Charlie Hunnam @charliehunnam
# First Name Last Name Username
1 Angelina Jolie @angelinajolie
2 Brad Pitt @bradpitt
3 Charlie Hunnam @charliehunnam 
            <div class="overflow-x-auto">
    <table data-tw-merge class="w-full text-left">
        <thead data-tw-merge class="">
            <tr data-tw-merge class="">
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap">
                    #
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap">
                    First Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap">
                    Last Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap">
                    Username
                </th>
            </tr>
        </thead>
        <tbody>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    1
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Angelina
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Jolie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    @angelinajolie
                </td>
            </tr>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    2
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Brad
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Pitt
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    @bradpitt
                </td>
            </tr>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    3
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Charlie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Hunnam
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    @charliehunnam
                </td>
            </tr>
        </tbody>
    </table>
    <table data-tw-merge class="w-full text-left bg-dark text-white dark:bg-black/30 mt-5">
        <thead data-tw-merge class="">
            <tr data-tw-merge class="">
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300 whitespace-nowrap">
                    #
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300 whitespace-nowrap">
                    First Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300 whitespace-nowrap">
                    Last Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300 whitespace-nowrap">
                    Username
                </th>
            </tr>
        </thead>
        <tbody>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300">
                    1
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300">
                    Angelina
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300">
                    Jolie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300">
                    @angelinajolie
                </td>
            </tr>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300">
                    2
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300">
                    Brad
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300">
                    Pitt
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300">
                    @bradpitt
                </td>
            </tr>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300">
                    3
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300">
                    Charlie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300">
                    Hunnam
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-slate-600 dark:border-darkmode-300">
                    @charliehunnam
                </td>
            </tr>
        </tbody>
    </table>
</div>

Bordered Table

# First Name Last Name Username
1 Angelina Jolie @angelinajolie
2 Brad Pitt @bradpitt
3 Charlie Hunnam @charliehunnam 
            <div class="overflow-x-auto">
    <table data-tw-merge class="w-full text-left">
        <thead data-tw-merge class="">
            <tr data-tw-merge class="">
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap">
                    #
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap">
                    First Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap">
                    Last Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap">
                    Username
                </th>
            </tr>
        </thead>
        <tbody>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    1
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    Angelina
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    Jolie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    @angelinajolie
                </td>
            </tr>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    2
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    Brad
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    Pitt
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    @bradpitt
                </td>
            </tr>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    3
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    Charlie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    Hunnam
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    @charliehunnam
                </td>
            </tr>
        </tbody>
    </table>
</div>

Hoverable Table

# First Name Last Name Username
1 Angelina Jolie @angelinajolie
2 Brad Pitt @bradpitt
3 Charlie Hunnam @charliehunnam 
            <div class="overflow-x-auto">
    <table data-tw-merge class="w-full text-left">
        <thead data-tw-merge class="">
            <tr data-tw-merge class="[&:hover_td]:bg-slate-100 [&:hover_td]:dark:bg-darkmode-300 [&:hover_td]:dark:bg-opacity-50">
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap">
                    #
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap">
                    First Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap">
                    Last Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-l border-r border-t whitespace-nowrap">
                    Username
                </th>
            </tr>
        </thead>
        <tbody>
            <tr data-tw-merge class="[&:hover_td]:bg-slate-100 [&:hover_td]:dark:bg-darkmode-300 [&:hover_td]:dark:bg-opacity-50">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    1
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    Angelina
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    Jolie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    @angelinajolie
                </td>
            </tr>
            <tr data-tw-merge class="[&:hover_td]:bg-slate-100 [&:hover_td]:dark:bg-darkmode-300 [&:hover_td]:dark:bg-opacity-50">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    2
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    Brad
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    Pitt
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    @bradpitt
                </td>
            </tr>
            <tr data-tw-merge class="[&:hover_td]:bg-slate-100 [&:hover_td]:dark:bg-darkmode-300 [&:hover_td]:dark:bg-opacity-50">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    3
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    Charlie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    Hunnam
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 border-l border-r border-t">
                    @charliehunnam
                </td>
            </tr>
        </tbody>
    </table>
</div>

Table Row States

# First Name Last Name Username
1 Angelina Jolie @angelinajolie
2 Brad Pitt @bradpitt
3 Charlie Hunnam @charliehunnam 
            <div class="overflow-x-auto">
    <table data-tw-merge class="w-full text-left">
        <thead data-tw-merge class="">
            <tr data-tw-merge class="">
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap">
                    #
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap">
                    First Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap">
                    Last Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap">
                    Username
                </th>
            </tr>
        </thead>
        <tbody>
            <tr data-tw-merge class="bg-primary text-white">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    1
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Angelina
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Jolie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    @angelinajolie
                </td>
            </tr>
            <tr data-tw-merge class="bg-danger text-white">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    2
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Brad
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Pitt
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    @bradpitt
                </td>
            </tr>
            <tr data-tw-merge class="bg-warning">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    3
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Charlie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Hunnam
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    @charliehunnam
                </td>
            </tr>
        </tbody>
    </table>
</div>

Table Head Options

# First Name Last Name Username
1 Angelina Jolie @angelinajolie
2 Brad Pitt @bradpitt
3 Charlie Hunnam @charliehunnam
# First Name Last Name Username
1 Angelina Jolie @angelinajolie
2 Brad Pitt @bradpitt
3 Charlie Hunnam @charliehunnam 
            <div class="overflow-x-auto">
    <table data-tw-merge class="w-full text-left">
        <thead data-tw-merge class="bg-dark text-white dark:bg-black/30">
            <tr data-tw-merge class="">
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 whitespace-nowrap">
                    #
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 whitespace-nowrap">
                    First Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 whitespace-nowrap">
                    Last Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 whitespace-nowrap">
                    Username
                </th>
            </tr>
        </thead>
        <tbody>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    1
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Angelina
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Jolie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    @angelinajolie
                </td>
            </tr>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    2
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Brad
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Pitt
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    @bradpitt
                </td>
            </tr>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    3
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Charlie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Hunnam
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    @charliehunnam
                </td>
            </tr>
        </tbody>
    </table>
    <table data-tw-merge class="w-full text-left mt-5">
        <thead data-tw-merge class="bg-slate-200/60 dark:bg-slate-200">
            <tr data-tw-merge class="">
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 text-slate-700 whitespace-nowrap">
                    #
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 text-slate-700 whitespace-nowrap">
                    First Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 text-slate-700 whitespace-nowrap">
                    Last Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 border-b-0 text-slate-700 whitespace-nowrap">
                    Username
                </th>
            </tr>
        </thead>
        <tbody>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    1
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Angelina
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Jolie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    @angelinajolie
                </td>
            </tr>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    2
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Brad
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Pitt
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    @bradpitt
                </td>
            </tr>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    3
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Charlie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Hunnam
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    @charliehunnam
                </td>
            </tr>
        </tbody>
    </table>
</div>

Responsive Table

# First Name Last Name Username Email Address
1 Angelina Jolie @angelinajolie angelinajolie@gmail.com 260 W. Storm Street New York, NY 10025.
2 Brad Pitt @bradpitt bradpitt@gmail.com 47 Division St. Buffalo, NY 14241.
3 Charlie Hunnam @charliehunnam charliehunnam@gmail.com 8023 Amerige Street Harriman, NY 10926. 
            <div class="overflow-x-auto">
    <table data-tw-merge class="w-full text-left">
        <thead data-tw-merge class="">
            <tr data-tw-merge class="">
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap">
                    #
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap">
                    First Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap">
                    Last Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap">
                    Username
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap">
                    Email
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap">
                    Address
                </th>
            </tr>
        </thead>
        <tbody>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap">
                    1
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap">
                    Angelina
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap">
                    Jolie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap">
                    @angelinajolie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap">
                    angelinajolie@gmail.com
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap">
                    260 W. Storm Street New York, NY 10025.
                </td>
            </tr>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap">
                    2
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap">
                    Brad
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap">
                    Pitt
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap">
                    @bradpitt
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap">
                    bradpitt@gmail.com
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap">
                    47 Division St. Buffalo, NY 14241.
                </td>
            </tr>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap">
                    3
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap">
                    Charlie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap">
                    Hunnam
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap">
                    @charliehunnam
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap">
                    charliehunnam@gmail.com
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 whitespace-nowrap">
                    8023 Amerige Street Harriman, NY 10926.
                </td>
            </tr>
        </tbody>
    </table>
</div>

Small Table

# First Name Last Name Username
1 Angelina Jolie @angelinajolie
2 Brad Pitt @bradpitt
3 Charlie Hunnam @charliehunnam 
            <div class="overflow-x-auto">
    <table data-tw-merge class="w-full text-left">
        <thead data-tw-merge class="">
            <tr data-tw-merge class="">
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 px-4 py-2 whitespace-nowrap">
                    #
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 px-4 py-2 whitespace-nowrap">
                    First Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 px-4 py-2 whitespace-nowrap">
                    Last Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 px-4 py-2 whitespace-nowrap">
                    Username
                </th>
            </tr>
        </thead>
        <tbody>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2">
                    1
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2">
                    Angelina
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2">
                    Jolie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2">
                    @angelinajolie
                </td>
            </tr>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2">
                    2
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2">
                    Brad
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2">
                    Pitt
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2">
                    @bradpitt
                </td>
            </tr>
            <tr data-tw-merge class="">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2">
                    3
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2">
                    Charlie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2">
                    Hunnam
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300 px-4 py-2">
                    @charliehunnam
                </td>
            </tr>
        </tbody>
    </table>
</div>

Striped Rows

# First Name Last Name Username
1 Angelina Jolie @angelinajolie
2 Brad Pitt @bradpitt
3 Charlie Hunnam @charliehunnam 
            <div class="overflow-x-auto">
    <table data-tw-merge class="w-full text-left">
        <thead data-tw-merge class="">
            <tr data-tw-merge class="[&:nth-of-type(odd)_td]:bg-slate-100 [&:nth-of-type(odd)_td]:dark:bg-darkmode-300 [&:nth-of-type(odd)_td]:dark:bg-opacity-50">
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap">
                    #
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap">
                    First Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap">
                    Last Name
                </th>
                <th data-tw-merge class="font-medium px-5 py-3 border-b-2 dark:border-darkmode-300 whitespace-nowrap">
                    Username
                </th>
            </tr>
        </thead>
        <tbody>
            <tr data-tw-merge class="[&:nth-of-type(odd)_td]:bg-slate-100 [&:nth-of-type(odd)_td]:dark:bg-darkmode-300 [&:nth-of-type(odd)_td]:dark:bg-opacity-50">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    1
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Angelina
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Jolie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    @angelinajolie
                </td>
            </tr>
            <tr data-tw-merge class="[&:nth-of-type(odd)_td]:bg-slate-100 [&:nth-of-type(odd)_td]:dark:bg-darkmode-300 [&:nth-of-type(odd)_td]:dark:bg-opacity-50">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    2
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Brad
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Pitt
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    @bradpitt
                </td>
            </tr>
            <tr data-tw-merge class="[&:nth-of-type(odd)_td]:bg-slate-100 [&:nth-of-type(odd)_td]:dark:bg-darkmode-300 [&:nth-of-type(odd)_td]:dark:bg-opacity-50">
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    3
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Charlie
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    Hunnam
                </td>
                <td data-tw-merge class="px-5 py-3 border-b dark:border-darkmode-300">
                    @charliehunnam
                </td>
            </tr>
        </tbody>
    </table>
</div>