JSFiddle - React, Tailwind, and code Playground

by Naydenov_it

HTML

<body>
    <div id="wrapper">
        <table>
            <thead>
                <tr>
                    <th>Country</th>
                    <th>Result</th>
                    <th>Country</th>
                    <th>Group</th>
                    <th colspan="4">Place A Bet</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Brasil</td>
                    <td>1<span>-</span>3</td>
                    <td>Mexico</td>
                    <td>A</td>
                    <td>Brasil</td>
                    <td>
                        <form method="post" action="">
                            <select class="inactive">
                                <option selected="selected" disabled="disabled">0</option>
                            </select>
                            <span>-</span>
                            <select class="inactive">
                                <option selected="selected" disabled="disabled">0</option>
                            </select>
                        </form>
                    </td>
                    <td>Mexico</td>
                    <td>
                        <button type="submit">BET</button>
                    </td>
                </tr>
                <tr>
                    <td>Spain</td>
                    <td>1<span>-</span>5</td>
                    <td>Netherlands</td>
                    <td>B</td>
                    <td>Spain</td>
                    <td>
                        <form method="post" action="">
                            <select class="inactive">
                                <option selected="selected" disabled="disabled">0</option>
                            </select>
                            <span>-</span>
                            <select class="inactive">
                                <option selected="selected" disabled="disabled">0</option>
                            </select>
                       ...

CSS

* {
    margin: 0;
    padding: 0;
}

div#wrapper {
    background-color: #00923E;
    width: 89%;
    height: 440px;
    padding: 20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

table {
    width: 100%;
    height: 100%;
    border: 1px solid #000000;
    border-spacing: 0;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Calibri;
}

    table thead {
        font-size: 2.2em;
        font-weight: bolder;
    }

        table thead tr {
            background-color: #F8C711;
            height: 60px;
        }

            table thead tr th {
                border: 1px solid #000000;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }

                table thead tr th:first-child {
                    width: 200px;
                    text-align: right;
                    padding-right: 10px;
                    -webkit-border-top-left-radius: 20px;
                    -moz-border-radius-topleft: 20px;
                    border-top-left-radius: 20px;
                }

                table thead tr th:nth-of-type(2) {
                    width: 115px;
                }

                table thead tr th:nth-of-type(3) {
                    width: 200px;
                    text-align: left;
                    padding-left: 10px;
                }

                table thead tr th:nth-of-type(4) {
                    width: 112px;
                }

                table thead tr th:last-of-type {
                    -webkit-border-top-right-radius: 20px;
                    -moz-border-radius-topright: 20px;
                    border-top-right-radius: 20px;
                }

    table tbody {
        font-size: 1.5em;
    }

        table tbody tr {
   ...