JSFiddle - React, Tailwind, and code Playground

by YulyaYulya

HTML

<section class="table">
        <div class="container">
            <div class="table__box">
                <div class="table__box_chec">
                    <div class="checkbox">
                        <input type="checkbox" name="checkbox" id="checkbox" />
                        <label for="checkbox"></label>
                    </div>
                    <div class="checkbox">
                        <input type="checkbox" name="checkbox1" id="checkbox1" />
                        <label for="checkbox1"></label>
                    </div>
                    <div class="checkbox">
                        <input type="checkbox" name="checkbox2" id="checkbox2" />
                        <label for="checkbox2"></label>
                    </div>
                </div>
                <div class="table__scroll">
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>hhh</th>
                                <th>gfgh</th>
                                <th>fhh</th>
                                <th>fhhт</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>3</td>
                                <td>
                                    <div class="toggle-bg">
                                        <input type="radio" name="toggle" value="off">
                                        <input type="radio" name="toggle" value="on">
                                        <span class="switch"></span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>1</td>
                 ...

SCSS

.table {
    margin-top: 20px;
    height: auto;
    &__box {
        display: flex;
        &_chec {
            margin-top: 34px;
            width: 46px;
            margin-right: 20px;
        }
        .checkbox {
            margin-top: 15px;
            input[type="checkbox"]:checked,
            input[type="checkbox"]:not(:checked) {
                position: absolute;
                left: -9999px;
            }
            input[type="checkbox"]:checked + label,
            input[type="checkbox"]:not(:checked) + label {
                display: inline-block;
                position: relative;
                cursor: pointer;
                top: -14px;
            }

            input[type="checkbox"]:checked + label:before,
            input[type="checkbox"]:not(:checked) + label:before {
                content: "";
                position: absolute;
                left: 0px;
                top: 0px;
                width: 16px;
                height: 16px;
                border: 1px solid #d1d4da;
                background-color: transparent;
            }
            input[type="checkbox"]:checked + label:before,
            input[type="checkbox"]:not(:checked) + label:before {
                border-radius: 4px;
            }
            input[type="checkbox"]:checked + label:after,
            input[type="checkbox"]:not(:checked) + label:after {
                content: "";
                position: absolute;
                transition: all 0.2s ease;
            }
            input[type="checkbox"]:checked + label:after,
            input[type="checkbox"]:not(:checked) + label:after {
                left: 4px;
                top: 3px;
                width: 8px;
                height: 5px;
                border-radius: 1px;
                border-left: 3px solid #fff;
                border-bottom: 3px solid #fff;
                transform: rotate(-45deg);
            }
            input[type="checkbox"]:not(:checked) + label:after {
 ...

JavaScript

$('#checkbox').on('click', function () {
        $('tbody tr:nth-child(1)').toggleClass('active');
        $('.toggle-bg').toggleClass('bg');
});
 $('#checkbox1').on('click', function () {
        $('tbody tr:nth-child(2)').toggleClass('active');
});
$('#checkbox2').on('click', function () {
        $('tbody tr:nth-child(3)').toggleClass('active');
});