JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<div class="pt-6">
    <!-- card -->
    <div class="bg-white px-6 py-6 rounded-md shadow w-full inline-flex mt-4 font-poppins">
        <div class="flex w-full space-x-2">
            <div class="w-4/5">
                <table class="st-table w-full">
                    <thead>
                        <tr>
                            <th class="text-left font-bold rounded-tl-lg">
                                <input id="undistributed-check-all" type="checkbox" class="cursor-pointer rounded">
                            </th>
                            <th class="pl-0 text-left font-bold">STUDENT ID</th>
                            <th class="pl-0 text-left font-bold rounded-tr-lg">NAME</th>
                        </tr>
                    </thead>
                    <tbody class="undistributed-table-body">
                            <tr class="undistributed-row-tr bg-gray-50 hover:st-bg-color-secondary-i hover:text-white p-0 cursor-pointer">
                                <td class="">
                                    <input type="checkbox" name="" class="undistributed-check-one cursor-pointer rounded" value="1">
                                </td>
                                <td class="pl-0">
                                    <input type="text" class="border-0 font-bold p-0 bg-transparent cursor-pointer focus:ring-0 text-sm w-28" value="IIECRI-B2-0000" readonly>
                                </td>
                                <td class="pl-0">
                                    <input type="text" class="border-0 p-0 bg-transparent cursor-pointer focus:ring-0 text-sm w-full" value="MUHAMMAD ROBBI ZsadadsaULFIKAR" readonly tooltip="a">
                                </td>
                            </tr>
                            <tr class="undistributed-row-tr bg-gray-50...