JSFiddle - React, Tailwind, and code Playground

HTML

<div class="matches">
    <div class="match-container">
        <div class="user-match-container">
            <div class="match-owner user">You</div>
            <div class="match">
                <div class="thumbnail">
                    <img class="image-container" src="http://cdn.steamcommunity.com/economy/image/GGym2wEsIYJ_SsfotJmtRKAgbGpFXC_cuoUc_h1j_OvFZIg7Vnt2mtaS3RqQuP_XsXt_exIWY868hEL_H2L289FthHJKO3KZ0s7QX56m4NOsaSoqS0Awn-iUFOcSaazF32mOZGEwd4DX0tZflrvx3a1pLnhLQjKYqtlO8Ec9pOSHaNl_FjEmw4mMiB-bsKSPrWIhIhpKM5b2g1PjEGu35N94hSpdCnyY2trdRJy09IOtbXx5TUY0yqrRTfdOPqDigzyFLB03IseC34hKzeejjPhtKyhRA27I6JZAog==">
                    <div class="thumbnail-count">2</div>
                </div>
                <div class="item-name">Coco Nebulon</div>
            </div>
        </div>	<span class="arrow">→</span>	
        <div class="user-match-container">
            <div class="match-owner friend">PfaU- [W] King Arthurs Gold</div>
            <div class="match">
                <div class="thumbnail">
                    <img class="image-container" src="http://cdn.steamcommunity.com/economy/image/A9CL7fJHZd_f6Jnelb10E7ucQVy2N2uBGidCyDxHJbze2KUNpRAyx3YwgyyxnCaAqsdSTeF9J5McJhzJPkYvpMrRqUS5UDbEcmyOab-COYS31QccuCt0wkg2StEzTXWWztimEPdKOc0wT4kjspcnxoOaWlzkfTDUBy9CwjoVf7DJhvsd6gY3yiJ53nfmlH7e5IxWSrp6fJYKdxHDaBsu4JqF_U-9DH_YdXjALbGALYiht1xB7X8hzw0gR5w6ESyymYP4HLgPYcwrLdcr7cQtjuGKAh61enTBXHMQk28Re-OFxqIe-khsmQ==">
                    <div class="thumbnail-count">2</div>
                </div>
                <div class="item-name">Genji the Pollen Prophet</div>
            </div>
            <div class="match">
                <div class="thumbnail">
                    <img class="image-container"...

CSS

html, body {
    margin:0;
    background-color:#111;
    color:#fff;
    font-family:Helvetica, Verdana, sans-serif;
    font-size:14px;
}
.match-container:before, .match-container:after {
    content:"";
    display:table;
}
.match-container:after {
    clear:both;
}
.match-container {
    border:1px solid #666;
    background-image:url('img/stripes.png');
    border-radius:5px;
    padding:10px;
    margin:10px;
    float:left;
}
.match {
    width:112px;
    float:left;
    margin: 0 2px;
}
.match .image-container {
    width:112px;
    height:130px;
    display:block;
}
.match .item-name {
    line-height:12px;
    font-size:10px;
    margin-top:4px;
    text-align:center;
    height:24px;
    overflow:hidden;
    clear:both;
}
.match-container .arrow {
    float:left;
    position:relative;
    top:70px;
    margin:5px;
}
.match-owner {
    line-height:14px;
    font-size:12px;
    margin-top:4px;
    text-align:center;
    height:14px;
    overflow:hidden;
    margin-bottom:4px;
    border:1px solid #666;
    background-image:url('img/stripes.png');
    border-radius:5px;
}
.match-owner.user {
    background-color:green;
}
.match-owner.friend {
    background-color:red;
}
.thumbnail-count {
    position:relative;
    top:-24px;
    margin-bottom:-24px;
    font-size:16px;
    font-weight:bold;
    border-top:1px solid white;
    border-right:1px solid white;
    border-top-right-radius: 7px;
    font-size:18px;
    background: rgb(160, 160, 160) transparent;
    background: rgba(160, 160, 160, 0.70);
    padding: 0 4px;
    float:left;
}
.user-match-container {
    float:left;
}