JSFiddle - React, Tailwind, and code Playground

by Phan Hung

HTML

<div runat="server" id="sidebar" style="padding: 5px 0 0 5px;">
  <input class='toggle-box' id='header1' type='checkbox' /><label for='header1'>Nguyễn Văn Tư</label><div><table style='text-align:left; width: 100%; vertical-align: middle;'><tr><td>Tên khách hàng</td><td>Nguyễn Văn Tư</td></tr><tr><td>Mã khách hàng</td><td>PC06LL0191387</td></tr><tr><td>Sery công tơ</td><td>14138734</td></tr><tr><td>Chỉ số cũ</td><td>194.000</td></tr><tr><td>Chỉ số mới</td><td>196.60</td></tr><tr><td>Sản lượng mới</td><td>2</td></tr></table></div><input class='toggle-box' id='header2' type='checkbox' /><label for='header2'>ĐInh Thị Tha</label><div><table style='text-align:left; width: 100%; vertical-align: middle;'><tr><td>Tên khách hàng</td><td>ĐInh Thị Tha</td></tr><tr><td>Mã khách hàng</td><td>PC06LL0182038</td></tr><tr><td>Sery công tơ</td><td>14140069</td></tr><tr><td>Chỉ số cũ</td><td>2050.000</td></tr><tr><td>Chỉ số mới</td><td>2104.10</td></tr><tr><td>Sản lượng mới</td><td>54</td></tr></table></div><input class='toggle-box' id='header3' type='checkbox' /><label for='header3'>Nguyễn Văn Nhựt</label><div><table style='text-align:left; width: 100%; vertical-align: middle;'><tr><td>Tên khách hàng</td><td>Nguyễn Văn Nhựt</td></tr><tr><td>Mã khách hàng</td><td>PC06LL0190775</td></tr><tr><td>Sery công tơ</td><td>14138746</td></tr><tr><td>Chỉ số cũ</td><td>2699.000</td></tr><tr><td>Chỉ số mới</td><td>2785.10</td></tr><tr><td>Sản lượng mới</td><td>86</td></tr></table></div><input class='toggle-box' id='header4' type='checkbox' /><label for='header4'>Mai Văn Lý</label><div><table style='text-align:left; width: 100%; vertical-align: middle;'><tr><td>Tên khách hàng</td><td>Mai Văn Lý</td></tr><tr><td>Mã khách hàng</td><td>PC06LL0182035</td></tr><tr><td>Sery công tơ</td><td>14138744</td></tr><tr><td>Chỉ số cũ</td><td>2581.000</td></tr><tr><td>Chỉ số mới</td><td>2631.70</td></tr><tr><td>Sản lượng mới</td><td>50</td></tr></table></div>
</div>

CSS

html, body, form {
            margin: 0 auto;
            padding: 0;
            text-align: left;
            height: 100%;
            top: 0;
            bottom: 0;
            overflow: hidden;
        }

        tr:nth-child(even) {
            background: #F5F5F5;
        }

        tr:nth-child(odd) {
            background: #DCDCDC;
        }

        tr:hover
        {
            background-color: #D3D3D3;
        }
        .toggle-box {
            display: none;
        }

            .toggle-box + label {
                cursor: pointer;
                display: block;
                font-weight: bold;
                line-height: 25px;
                margin-bottom: 2px;
                margin-left: 5px;
                background-color: #F1F8FF;
                border-bottom: 1px solid gray;
            }

                .toggle-box + label:hover {
                    background-color: #C5ECFF;
                }

                .toggle-box + label + div {
                    display: none;
                    margin-bottom: 10px;
                    margin-left: 20px;
                }

            .toggle-box:checked + label + div {
                display: block;
            }

            .toggle-box + label:before {
                background-color: #66AEFF;
                -webkit-border-radius: 15px;
                -moz-border-radius: 15px;
                border-radius: 15px;
                color: #FFFFFF;
                content: "+";
                display: block;
                float: left;
                font-weight: bold;
                height: 25px;
                line-height: 25px;
                margin-right: 5px;
                text-align: center;
                width: 25px;
            }

            .toggle-box:checked + label:before {
                content: "\2212";
            }
            #matru {
            border: 0;
            text-align: left;
            position: absolute;
            top: 100px;
     ...