JSFiddle - React, Tailwind, and code Playground

by Steve Tune

HTML

<main>
    <div class="box1">
        <h2>Unordered List</h2>
        <p>This is a simple list</p>
        <ul>
            <li>First Item (bold)</li>
            <li>Second Item</li>
            <li>Third Item</li>
            <li>Last Item (underlined)</li>
        </ul>
    </div>

    <div class="box2">
        <h2>Button Jquery Demo</h2>
        <p>The background of this box should be set to white on document.ready()</p>
        <p>Clicking the button below will alternate the color of the border of this box to red and back to default on on each click.</p>
        <a href="javascript:void(0);" onclick="alternateColor();">Toggle Color</a>
    </div>
    <div class="box3">
        <h2>Table Example</h2>
        <p>Table rows should include a hover state</p>
        <table>
            <thead>
                <div id="col3">
                    <tr>
                        <th>Driver</th>
                        <th>Hometown</th>
                        <th>Car</th>
                    </tr>
                </div>
            </thead>
            <tbody>
                <tr>
                    <td>John S.</td>
                    <td>Lincoln, NE</td>
                    <td>55</td>
                </tr>
                <tr>
                    <td>Jane D.</td>
                    <td>Omaha, NE</td>
                    <td>24</td>
                </tr>
            </tbody>

            <tfoot>
                <tr>
                    <td>Mike J.</td>
                    <td>Albany, NY</td>
                    <td>1</td>
                </tr>
            </tfoot>
        </table>
    </div>
</main>
<footer></footer>

CSS

.box1,
.box2,
.box3 {
    width: 300px;
    padding: 25px;
    margin: 25px;
    height: 240px;
    border-radius: 25px;
    display: inline-block;
    float: left;
}

.box1 {
    background-color: #4b4244;
}

.box2 {
    background-color: white;
}

.box3 {
    background-color: #4b4244;
}

main:after{
	content:"";
	display:block;
	clear:both;
}

footer {
    background: lightblue;
    height: 200px;
}