Data Table Dark Mode

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