JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<div class="centered">
    <div class="card">
        <h1 class="pageTitle"><a href="#">Math Games Central</a></h1>
    </div>
    <div class="card">
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odio praesentium illo fugit <a href="#">dolorem</a> quam rerum facilis impedit sunt provident amet eveniet animi qui ipsam consequatur optio modi sequi a unde est. Itaque quos ea!</span>
    </div>
    <div class="boxLinkWrapper">
        <div class="card left">
            <a href="#">
                <img src="https://cdn2.scratch.mit.edu/get_image/project/64582886_144x108.png?v=1433244541.55" class="boxImg" />
                <h3 class="boxTitle">Fraction Smasher</h3>
            </a>
        </div>
        <div class="card right">
            <a href="#">
                <img src="https://cdn2.scratch.mit.edu/get_image/project/64582886_144x108.png?v=1433244541.55" class="boxImg" />
                <h3 class="boxTitle">Multiplication/Division Game</h3>
            </a>
        </div>
    </div>
</div>

CSS

body {
    background:#2C96F2;
    margin:40px 80px;
    padding:0px;
    font-family:'Open Sans', sans-serif;
}
.centered {
    width:100%;
    max-width:700px;
    margin:0 auto;
}
.card {
    background:white;
    padding:25px;
    box-shadow:1px 1px 3px rgba(0,0,0,0.3),
               1px 1px 4px rgba(0,0,0,0.3),
               2px 2px 5px rgba(0,0,0,0.3);
    margin-bottom:15px;
}
.pageTitle {
    -webkit-margin-before:0;
    -webkit-margin-after:0;
    margin:0px;
}
.pageTitle a {
    text-decoration:none;
}
.boxLinkWrapper {
    margin:0 -15px;
    width:calc(100% + 30px);
    display:table;
    border-collapse: separate;
    border-spacing: 15px 0px;
}
.card.left, .card.right {
    /* width:48%;
    width:calc(50% - 60px); */
    display:table-cell;
    float: none !important;
    width:50%;
}
.boxTitle {
    -webkit-margin-before:0;
    -webkit-margin-after:0;
    margin:0px;
    word-wrap: break-word;
}
.boxImg {
    width:100%;
}

a {
    color:#062D4F;
}

@media (max-width:880px) {
    .boxLinkWrapper {
        width:auto;
        display:block;
        margin:0px;
        border-collapse: separate;
        border-spacing: 0px;
    }
    .card.left, .card.right {
        display:block;
        width:auto;
    }
}