JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<table>
    <tr>
        <th>Friday</th>
        <th>Saturday</th>
        <th>Sunday</th>
    </tr>
    <tr>
        <td><div class="featuredGame">
            <img src="http://placekitten.com/100/200" />
                <p> Subway Series </p>
            </div>
        </td>
        <td>
            <div class="featuredGame">
                <img src="http://placekitten.com/300/200" />
                <p> Subway Series </p>
            </div>
        </td>
        <td>
            <div class="featuredGame">
                        <img src="http://placekitten.com/300/400" />
                        <p> Subway Series </p>
            </div>
        </td>
    </tr>
    <tr>
        <td><div class="featuredGame">
                <img src="http://placekitten.com/500/400" />
                <p> Subway Series </p>
            </div>
        </td>
        <td>
            <div class="featuredGame">
                <img src="http://placekitten.com/500/500" />
                <p> Subway Series </p>
            </div>
        </td>
        <td>
            <div class="featuredGame">
                <img src="http://placekitten.com/400/300" />
                <p> Subway Series </p>
            </div>
        </td>
    </tr>
</table>

CSS

img { height: 150px; width: auto}

#featured .featuredGame {
    position: relative;
    height: auto;
    width: 150px;
    font-size: 1.0em;   
}

th, td {text-align:center;}