JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<div class="player">
    <img src="http://sc2mayhem.com/image/Protoss_logo.gif" class="portrait">
    <h2>Liquid`TLO</h2>
</div>

<span class="vs">Vs.</span>

<div class="player">
    <img src="http://sc2mayhem.com/image/Protoss_logo.gif" class="portrait">
    <h2>Liquid`Huk</h2>
</div>

CSS

.player {
    padding: 5px;
    text-align: center;
    border: solid 1px #000;
    width: 160px;
    height: 160px;
    float: left;
}

.player .portrait {
    height: 128px;
    width: 128px;
    border: solid 1px #eee;
}

span.vs {
    font-size: 200%;
    display: block;
    margin: 60px 5px;
    padding: 5px;
    float: left;
}

.player > h2 {
    font-size: 120%;
    margin: 5px;
}