JSFiddle - React, Tailwind, and code Playground

HTML

<table>
                        <thead>
                            <tr>
                                <th>Produto</th>
                                <th>Quantidade</th>
                                <th>Valor Unitário</th>
                                <th>TOTAL</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><img src="img/checkout01.jpg" width="82" height="82" alt="">Item 1</td>
                                <td>03</td>
                                <td>R$ 220,00</td>
                                <td>R$ 660,00</td>
                            </tr>
                            <tr>
                                <td><img src="img/checkout01.jpg" width="82" height="82" alt="">Item 2</td>
                                <td>03</td>
                                <td>R$ 220,00</td>
                                <td>R$ 660,00</td>
                            </tr>
                            <tr>
                                <td><img src="img/checkout01.jpg" width="82" height="82" alt="">Item 3</td>
                                <td>03</td>
                                <td>R$ 220,00</td>
                                <td>R$ 660,00</td>
                            </tr>
                            <tr>
                                <td><img src="img/checkout01.jpg" width="82" height="82" alt="">Item 4</td>
                                <td>03</td>
                                <td>R$ 220,00</td>
                                <td>R$ 660,00</td>
                            </tr>
                            <tr>
                                <td><img src="img/checkout01.jpg" width="82" height="82" alt="">Item 5</td>
                                <td>03</td>
                                <td>R$ 220,00</td>
                                <td>R$ 660,00</td>
                            </tr>
                ...

CSS

table{
            width: 100%;
}
            thead{
                background-color: #000;
}               
                th{
                    color: #fff;
                    font-style: italic;
                    font-weight: 400;
                    font-size: 1.3125em;
                    text-align: center;
                    padding: 14px 0;
                    line-height: 1;
}
                    th:first-child{
                        text-align: left;
                        text-indent: 30px;
                        width: 52%;
                    }

                    th:nth-child(2){
                        width: 14%;
                    }

                    th:nth-child(3){
                        width: 16%;
                    }

                    th:last-child{
                        width: 18%;
                    }
                


                
                tbody:before {
                    line-height:10px;
                    content:"-";
                    color:transparent; /* to hide text */
                    display:block;
                }

                td{
                    border-bottom: solid 1px #000;
                    border-right: solid 1px #000;
                    text-align: center;
                    font-weight: 600;
                    font-style: italic;
                    font-size: 21px;
                    font-size: 1.3125rem;
                    padding: 14px 0;
}
                    td:first-child{
                        font-weight: 400;
                        text-align: left;
                        width: 52%;
}
                        td img{
                            margin-right: 60px;
                        }
                    

                    td:nth-child(2){
                        width: 14%;
                    }

                    td:nth-child(3){
                        width: 16%;
                    }

                    td:last-child{
               ...