JSFiddle - React, Tailwind, and code Playground

by milosdakic

HTML

<div class="games">
    
    <div class="match">
        <div class="teams">
            <div class="team">
                <div class="club">
                    <img class="logo" src="http://f.cl.ly/items/171D1i0S3U2c233B431Y/Arsenal.png" />
                    <div class="name">Buffalo Bills</div>
                </div>
                <div class="score left">500</div>
            </div>
            <div class="divider">:</div>
            <div class="team">
                <div class="score right">400</div>
                <div class="club">
                    <img class="logo" src="http://f.cl.ly/items/171D1i0S3U2c233B431Y/Arsenal.png" />
                    <div class="name">Man United</div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="match">
        <div class="teams">
            <div class="team">
                <div class="club">
                    <img class="logo" src="http://f.cl.ly/items/171D1i0S3U2c233B431Y/Arsenal.png" />
                    <div class="name">Buffalo Bills</div>
                </div>
                <div class="score left">500</div>
            </div>
            <div class="divider">:</div>
            <div class="team">
                <div class="score right">400</div>
                <div class="club">
                    <img class="logo" src="http://f.cl.ly/items/171D1i0S3U2c233B431Y/Arsenal.png" />
                    <div class="name">Man United</div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="match">
        <div class="teams">
            <div class="team">
                <div class="club">
                    <img class="logo" src="http://f.cl.ly/items/171D1i0S3U2c233B431Y/Arsenal.png" />
                    <div class="name">Buffalo Bills</div>
                </div>
                <div class="score left">500</div>
            </div>
            <div class="divider">:</div>
            <div class="team">
               ...

CSS

* {
    font-size: 10px;
    font-family: Lucida Grande;
}

.match {
    background: #f9f9f9;
    -webkit-border-radius: 3px;
    width: 350px;
    padding: 5px;
}

.teams {
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-border-radius: 3px;
    background: #e7eef1;
}

.team {
    -webkit-box-flex: 1;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    padding: 8px;
}

.club {
    -webkit-box-flex: 2;
    width: 100px;
    text-align: center;
}

.name {
    font-size: 14px;
}

.logo {
    padding: 5px;
}

.score {
    -webkit-box-flex: 1;
    font-size: 24px;
    font-family: Tahoma;
}

.left {
    text-align: right;
}

.right {
    text-align: left;
}

.divider {
    width: 6px;
    font-size: 18px;
    font-weight: bold;
}

.details {
    margin-top: 5px;
    margin-left: 5px;
}