Gray Header table
Web2tailwind.com

Output

Code

<!DOCTYPE html>
<html>

<head>
    <title>Animated Login Form</title>
    <link href="/assets/css/tailwind.min.css" rel="stylesheet">
    <script src="/assets/js/alpine.min.js" defer></script>
    <link rel="stylesheet" href="/assets/iconfont/material-icons.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body class="h-screen flex justify-center  bg-gray-300" style="font-family:Roboto">
    <div class=" w-4/5 md:w-3/5 bg-white rounded-lg shadow-lg">
        <div class="block overflow-x-auto m-6">
            <table class="w-full text-left rounded-lg">
                <thead>
                    <tr class="bg-gray-700 text-gray-200 border border-b-0">
                        <th class="px-4 py-3">#</th>
                        <th class="px-4 py-3">Name</th>
                        <th class="px-4 py-3">Avatar</th>
                        <th class="px-4 py-3">Email</th>
                        <th class="px-4 py-3">Status</th>
                        <th class="px-4 py-3">Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="w-full font-light text-gray-700 bg-gray-100 whitespace-no-wrap border border-b-0">
                        <td class="px-4 py-4">1</td>
                        <td class="px-4 py-4">Bedram Tamang</td>
                        <td class="px-4 py-4">
                            <img class="h-6 w-6 rounded-full"
                                src="/assets/docs/master/image-01.jpg">
                        </td>
                        <td class="px-4 py-4">[email protected]</td>
                        <td class="px-4 py-4">
                            <span class="text-sm bg-green-500 text-white rounded-full px-2 py-1">Active</span>
                        </td>
                        <td class="text-center">
                            <a href="#"><span class="fill-current text-green-500 material-icons">edit</span></a>
                            <a href="#"><span class="fill-current text-red-500 material-icons">highlight_off</span></a>
                        </td>
                    </tr>
                    <tr class="w-full font-light text-gray-700 whitespace-no-wrap border">
                        <td class="px-4 py-4">2</td>
                        <td class="px-4 py-4">Taylor Otwel</td>
                        <td class="px-4 py-4">
                            <img class="h-6 w-6 rounded-full"
                                src="/assets/docs/master/image-01.jpg">
                        </td>
                        <td class="px-4 py-4">[email protected]</td>
                        <td class="px-4 py-4">
                            <span class="text-sm bg-yellow-500 text-white rounded-full px-2 py-1">Pending</span>
                        </td>
                        <td class="text-center">
                            <a href="#"><span class="fill-current text-green-500 material-icons">edit</span></a>
                            <a href="#"><span class="fill-current text-red-500 material-icons">highlight_off</span></a>
                        </td>
                    </tr>
                    <tr class="w-full font-light text-gray-700 bg-gray-100 whitespace-no-wrap border">
                        <td class="px-4 py-4">3</td>
                        <td class="px-4 py-4">Adam wathan</td>
                        <td class="px-4 py-4">
                            <img class="h-6 w-6 rounded-full"
                                src="/assets/docs/master/image-01.jpg">
                        </td>
                        <td class="px-4 py-4">[email protected]</td>
                        <td class="px-4 py-4">
                            <span class="text-sm bg-red-500 text-white rounded-full px-2 py-1">Not Active</span>
                        </td>
                        <td class="text-center">
                            <a href="#"><span class="fill-current text-green-500 material-icons">edit</span></a>
                            <a href="#"><span class="fill-current text-red-500 material-icons">highlight_off</span></a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>

</html>
© 2019 - 2020 Web2tailwind.com