JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bank">
    <div class="header"> <span>Bank of despair</span> 
    </div>
    <div class="body">
        <div class="container">
            <div class="item">
                <img src="//canyourcode.com/rsps/images/items/995.png" /> <span class="white">1000k</span>

            </div>
            <div class="item">
                <img src="//canyourcode.com/rsps/images/items/6570.png" /> <span class="yellow">10</span>

            </div>
            <div class="item">
                <img src="//canyourcode.com/rsps/images/items/4151.png" /> <span class="yellow">100</span>

            </div>
            <div class="item">
                <img src="//canyourcode.com/rsps/images/items/555.png" /> <span class="yellow">10</span>

            </div>
            <div class="item">
                <img src="//canyourcode.com/rsps/images/items/3168.png" /> <span class="yellow">10</span>

            </div>
            <div class="item">
                <img src="//canyourcode.com/rsps/images/items/556.png" /> <span class="yellow">10</span>

            </div>
            <div class="item">
                <img src="//canyourcode.com/rsps/images/items/557.png" /> <span class="yellow">10</span>

            </div>
            <div class="item">
                <img src="//canyourcode.com/rsps/images/items/558.png" /> <span class="yellow">10</span>

            </div>
            <div class="item">
                <img src="//canyourcode.com/rsps/images/items/16.png" /> <span class="yellow">10</span>

            </div>
            <div class="item">
                <img src="//canyourcode.com/rsps/images/items/10.png" /> <span class="yellow">10</span>

            </div>
            <div class="item">
                <img src="//canyourcode.com/rsps/images/items/12.png" /> <span class="yellow">10</span>

            </div>
        </div>
    </div>
    <div class="footer"></div>
</div>

SCSS

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.bank {
    width:490px;
    height:305px;
    
    .header {
        display: table;
        background: url('http://i.imgur.com/ltd9dBc.png') no-repeat;
        height: 34px;
        width: 490px;
        
        span {
            color: #ff0;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    }
    
    .footer {
        background: url('http://i.imgur.com/Uh5p4rZ.png') no-repeat;
        width: 490px;
        height: 41px;
    }
    
    .body {
        background: url('http://i.imgur.com/VktZa0e.png') no-repeat;
        width: 490px;
        height: 230px;
        padding: 5px;
        
        .container {
            display: block;
            width: 445px;
            height: 220px;
            overflow: auto;
        }
    }
}

.item {
    position: relative;
    display: inline-block;
    width: 40px;
    margin: 5px 2px;
    padding-top: 10px;
    
    text-align: center;
    
    span {
        font-size: 12px;
        position: absolute;
        top: 2px;
        right: 2px;
    }
}

.white {
    color: white;
}

.yellow {
    color: yellow;
}