JSFiddle - React, Tailwind, and code Playground

by rluuan

HTML

<style type='text/css'>* { box-sizing: border-box; }
    td { vertical-align: top; padding: 10px; word-break: break-word}
    table { border-color: #ddd !important; table-layout: fixed; width: 100%; max-width: 100px;}
</style>
<table border='1' cellpadding='1' cellspacing='1' height='250px'>
    <tbody>
        <tr>
            <td style='white-space: wrap;width: 380px;' onchange="alert('rodrigo')"></td>
            <td style='width: 338px;'>
            <table border='1' style='margin-left: 20px;'>
                <tbody>
                    <tr>
                        <td style='width: 50px; text-align: center; padding: 10px;'><img src='/NimbiShopBackOffice/img/logo_NimbiresizeB.png' style='width:14px' /></td>
                        <td style='width:250px; padding: 5px;'></td>
                    </tr>
                    <tr>
                        <td style='width: 50px; text-align: center; padding: 10px;'><img src='/NimbiShopBackOffice/img/serasaexperianlogo.png' style='width:35px' /></td>
                        <td style='width:250px; padding: 5px;'></td>
                    </tr>
                    <tr>
                        <td style='width: 50px; text-align: center; padding: 10px;'><img src='/NimbiShopBackOffice/img/arrow_down.png' style='width:15px' /></td>
                        <td style='width:250px; padding: 5px;'></td>
                    </tr>
                    <tr>
                        <td style='width: 50px; text-align: center; padding: 10px;'><img src='/NimbiShopBackOffice/img/usd.png' style='width:15px' /></td>
                        <td style='width:250px; padding: 5px;'></td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
    </tbody>
</table>

CSS

.nb-position-relative { position: relative; }
.nb-position-absolute { position: absolute; }

/* borders | default*/
.nb-border { border: 1px solid #dfdfdf; }
.nb-border-top { border-top: 1px solid #dfdfdf; }
.nb-border-right { border-right: 1px solid #dfdfdf; }
.nb-border-right-r + .nb-border-right-r { border-right: 1px solid #dfdfdf; }
.nb-border-bottom { border-bottom: 1px solid #dfdfdf; }
.nb-border-left { border-left: 1px solid #dfdfdf; }
.nb-border-left-r + .nb-border-left-r { border-left: 1px solid #dfdfdf !important; }

/* border-radius */
.nb-border-radius-1 { border-radius: 1px !important; }
.nb-border-radius-2 { border-radius: 2px !important; }
.nb-border-radius-3 { border-radius: 3px !important; }
.nb-border-radius-4 { border-radius: 4px !important; }
.nb-border-radius-5 { border-radius: 5px !important; }
.nb-border-radius-10 { border-radius: 10px !important; }
.nb-border-radius-15 { border-radius: 15px !important; }
.nb-border-radius-20 { border-radius: 20px !important; }
.nb-border-radius-25 { border-radius: 25px !important; }
.nb-border-radius-30 { border-radius: 30px !important; }
.nb-border-radius-35 { border-radius: 35px !important; }
.nb-border-radius-40 { border-radius: 40px !important; }


 /* padding & margin | default*/
.nb-margin-0 { margin: 0px !important; }
.nb-margin-5 { margin: 5px !important; }
.nb-margin-10 { margin: 10px !important; }
.nb-margin-15 { margin: 15px !important; }
.nb-margin-20 { margin: 20px !important; }
.nb-margin-35 { margin-left: 35px !important; }
.nb-margin-40 { margin-left: 40px !important; }
.nb-margin-45 { margin-left: 45px !important; }
.nb-margin-50 { margin-left: 50px !important; }

.nb-margin-top-0 { margin-top: 0px !important; }
.nb-margin-top-5 { margin-top: 5px !important; }
.nb-margin-top-10 { margin-top: 10px !important; }
.nb-margin-top-15 { margin-top: 15px !important; }
.nb-margin-top-20 { margin-top: 20px !important; }
.nb-margin-top-25 { margin-top: 25px !important; }
.nb-margin-top-30 {...