JSFiddle - React, Tailwind, and code Playground

HTML

<div class='content'>
<div class='tovars'>
    <div class='article_outer'>
        <a href='http://google.com'><img src='http://l-userpic.livejournal.com/112768101/24105751' alt="" height='50' width='50' /></a>
    </div>
    <div class='article_outer'>
        <a href='http://google.com'><img src='http://l-userpic.livejournal.com/112768101/24105751' alt="" height='50' width='50' /></a>
    </div>
    <div class='article_outer'>
        <a href='http://google.com'><img src='http://l-userpic.livejournal.com/112768101/24105751' alt="" height='50' width='50' /></a>
    </div>
    <div class='article_outer'>
        <a href='http://google.com'><img src='http://l-userpic.livejournal.com/112768101/24105751' alt="" height='50' width='50' /></a>
    </div>
    <div class='article_outer'>
        <a href='http://google.com'><img src='http://l-userpic.livejournal.com/112768101/24105751' alt="" height='50' width='50' /></a>
    </div>
    <div class='article_outer'>
        <a href='http://google.com'><img src='http://l-userpic.livejournal.com/112768101/24105751' alt="" height='50' width='50' /></a>
    </div>
    <div class='article_outer'>
        <a href='http://google.com'><img src='http://l-userpic.livejournal.com/112768101/24105751' alt="" height='50' width='50' /></a>
    </div>
    <div class='article_outer'>
        <a href='http://google.com'><img src='http://l-userpic.livejournal.com/112768101/24105751' alt="" height='50' width='50' /></a>
    </div>
    <div class='article_outer'>
        <a href='http://google.com'><img src='http://l-userpic.livejournal.com/112768101/24105751' alt="" height='50' width='50' /></a>
    </div>
</div><!--.tovars-->
</div><!--.content-->

CSS

.content {
    background:#fcc;
    width:244px;
    padding: 6px 0;
}
.tovars{
    margin:  0 -6px -10px;
    overflow: hidden;
}
.article_outer{
    float:left;
    margin: 0 6px 10px;
    border: 1px solid #f00;
}
a{
    
}
img{
    vertical-align:top;
    border: none;
}