JSFiddle - React, Tailwind, and code Playground

HTML

<div class="relatednews">
        <ul>
            <li>новость 1</li> 
            <li>новость 2</li>
            <li>новость 3</li>
            <li>новость 4</li>
            <li>новость 5</li>
            <li>новость 6</li>
        </ul>
</div>
<br />
<div class="relatednews1">
        <ul>
            <li>новость 1</li> 
            <li>новость 2</li>
            <li>новость 3</li>
            <li>новость 4</li>
            <li>новость 5</li>
            <li>новость 6</li>
        </ul>
</div>

CSS

ul {width: 340px;}
li {width: 100px; border: solid 1px #ccc; text-align: center;}
.relatednews li {
        float: left;
        margin: 0 0 15px 15px;
        background: #cfc ;
        }     
        .relatednews li:first-child, .relatednews li:first-child + li + li + li {
            margin-left: 0;
            }
 .relatednews1 li {
        float: left;
        margin: 0 0 15px 15px;
        background: #fcc; 
        }     
        .relatednews1 li:first-child, .relatednews1 li + li + li {
            margin-left: 0;
            }