JSFiddle - React, Tailwind, and code Playground

HTML

Marquee:
<marquee direction="up" scrollamount="3">           
     <div class="eachnews">

    <a href="#"> <div class="news-date"><span class="day_news">15</span><span class="month_news">Apr</span>
     </div>
     <div class="news-descript"><h2>News Title</h2>
     <p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.
     </p>
     </div></a>
     </div>


         <div class="eachnews">

    <a href="#"> <div class="news-date"><span class="day_news">16</span><span class="month_news">Jan</span>
     </div>
     <div class="news-descript"><h2>News Title</h2>
     <p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.
     </p>
     </div></a>
     </div>



         <div class="eachnews">

    <a href="#"> <div class="news-date"><span class="day_news">17</span><span class="month_news">Oct</span>
     </div>
     <div class="news-descript"><h2>News Title</h2>
     <p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.
     </p>
     </div></a>
     </div>


         <div class="eachnews">

    <a href="#"> <div class="news-date"><span class="day_news">18</span><span class="month_news">Mar</span>
     </div>
     <div class="news-descript"><h2>News Title</h2>
     <p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type...

CSS

#marquee{
    height:180px;
    border:1px solid red;
    overflow:hidden;
}
#inner_marquee{
    position:relative;
}

JavaScript

var el = document.querySelector("#marquee");
var inner = el.querySelector("#inner_marquee");

height = parseInt(window.getComputedStyle(inner).height);
containerheight= parseInt(window.getComputedStyle(el).height);

setInterval(function(){
    var top = inner.style.top;
    top = parseInt(inner.style.top);
    top = (-top > height)?containerheight:top;
    top = (top)?top-3:-3;
    inner.style.top = top+"px";
},50);