JSFiddle - React, Tailwind, and code Playground

HTML

<section class="news">
    <article>
        <div class="head_article">        
            <a href="#"><h2>Отличные новости!</h2></a>
            <p class="new">NEW!</p>
        </div>
        <div class="article_meta">
            Опубликовал <a href="#">Василий Петров</a> 24.08.2021
        </div>
        <img src="https://www.tourprom.ru/site_media/cache/ec/f2/ecf231c2949712844c983f9d819204fc.jpg" alt="Картинка">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda ipsa odio repudiandae? Possimus similique unde reiciendis nostrum iure nemo quia tempore officia numquam!</p>
    </article>
    <article>
        <div class="head_article">        
            <a href="#"><h2>Отличные новости!</h2></a>
            <p class="new">NEW!</p>
        </div>
        <div class="article_meta">
            Опубликовал <a href="#">Василий Петров</a> 24.08.2021
        </div>
        <img src="https://wide-w.com/wp-content/uploads/2018/10/priroda-japonskij-sad.jpg" alt="Картинка">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda ipsa odio repudiandae? Possimus similique unde reiciendis nostrum iure nemo quia tempore officia numquam!</p>
    </article>
    <article>
        <div class="head_article">        
            <a href="#"><h2>Отличные новости!</h2></a>
            <p class="new">NEW!</p>
        </div>
        <div class="article_meta">
            Опубликовал <a href="#">Василий Петров</a> 24.08.2021
        </div>
        <img src="https://img4.goodfon.ru/wallpaper/nbig/7/42/christopher-schiefer-art-japan-iaponiia.jpg" alt="Картинка">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda ipsa odio repudiandae? Possimus similique unde reiciendis nostrum iure nemo quia tempore officia numquam!</p>
    </article>
    <article>
        <div class="head_article">        
            <a href="#"><h2>Отличные новости!</h2></a>
            <p class="new">NEW!</p>
        </div>
        <div...

CSS

.news{
    width: 798px;
    margin: 0 auto;
    background-color: #fff;
    padding: 0 0 15px;
    position: relative;
}

article{
    width: 768px;
    margin: 0 auto;
    padding: 6px 15px;
}

.head_article{
    display: flex;
    justify-content: space-between;
}

.head_article p{
    padding: 0;
    margin: 20px 0 0 0;
    font-size: 1.5em;
    color: rgb(107, 192, 107);
}

.new:nth-of-type(-n+2){
    color: red;
}


article a{
    text-decoration: none;
    color: black;
}
article a:hover{
    color: rgb(228, 110, 81);
}
article h2{
    margin-bottom: 5px;
}
.article_meta{
    font-size: .7em;
    color: gray;
    margin-bottom: 5px;
}
article img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(0,0,0,0.5); 
    transition: 1s;
    filter: grayscale(70%); 
}
article img:hover{
    scale: 102%;
    filter: brightness(120%);
    filter: grayscale(0%); 
}
article p{
    font-size: 14px;
}

article:nth-child(even){
    border-radius: 20px;
    background-color: rgb(255, 163, 130);
}

.split{
    position: absolute;    
    width: 798px;
    border-top: 1px solid black;
}