JSFiddle - React, Tailwind, and code Playground

by ketan156

HTML

<table>
            <tr class="lightBgOnHover">
                <td>
                    <label>
                        Cell_11
                    </label>
                </td>

                <td>
                    <label>
                        Cell_12
                    </label>
                </td>

                <td>
                    <label>
                        Cell_13
                    </label>
                </td>
            </tr>
            
            <tr class="lightBgOnHover">
                <td>
                    <label>
                        Cell_21
                    </label>
                </td>

                <td colspan="2">
                    <label>
                        Cell_223
                    </label>
                </td>

            </tr>
            
            <tr class="lightBgOnHover">
                <td>
                    <label>
                        Cell_11
                    </label>
                </td>

                <td rowspan="2">
                    <label>
                        Cell_12
                    </label>
                </td>

            </tr>
            
            <tr class="lightBgOnHover">
                
                <td colspan="3">
                    <label>
                        Cell_11
                    </label>
                </td>

            </tr>

        </table>

CSS

.lightBgOnHover {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    display: block;
}
table {
    border-collapse: collapse;
}
    .lightBgOnHover:hover {
        -webkit-box-shadow: 0 1px 1px 0 rgb(109, 109, 109);
        -ms-box-shadow: 0 1px 1px 0 rgb(109, 109, 109);
        box-shadow: 0 1px 1px 0 rgb(109, 109, 109);
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iNjIlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MyUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
        background: -moz-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 62%, rgba(0,0,0,0.2) 63%, rgba(0,0,0,0.1) 100%);
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(62%,rgba(0,0,0,0.1)), color-stop(63%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.1)));
        background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 62%,rgba(0,0,0,0.2) 63%,rgba(0,0,0,0.1) 100%);
        background: -o-linear-gradient(-45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 62%,rgba(0,0,0,0.2) 63%,rgba(0,0,0,0.1) 100%);
        background: -ms-linear-gradient(-45deg, rgba(0,0,0,0)...