JSFiddle - React, Tailwind, and code Playground

HTML

<div class='corpo'>
    <div class='foto'>
        <img class="foto" src="http://imguol.com/f7/2015/07/03/grecia-e-zona-do-euro-divida-da-grecia-1435933950572_1024x768.jpg">
        <br />
        <div class='corpo_texto'>
            <br />
            <div style='font-size:200%; color:#FF7F00; text-align:center;'><strong></strong> Economia - 16/07/2015
                <br />
            </div>
            <hr>
            <div style='margin-left:30px; font-size:180%'><strong></strong> Países europeus aprovam empréstimo emergencial de 7 bilhões de euros para Grécia pagar contas
                <br />
            </div>
            <br />
            <div class='relogio'>05:11:27
                <br />20/7/2015
                <br/>
                <br/>
                <img src='uol_reflexo.png' width='50%' />
                <br />
                <img src='logob.png' width='50%' />
            </div>
        </div>
    </div>
</div>
<div class='corpo'>
    <div class='foto'>
        <img class="foto" src="http://imguol.com/f7/2015/07/03/grecia-e-zona-do-euro-divida-da-grecia-1435933950572_1024x768.jpg">
        <br />
        <div class='corpo_texto'>
            <br />
            <div style='font-size:200%; color:#FF7F00; text-align:center;'><strong></strong> Economia - 16/07/2015
                <br />
            </div>
            <hr>
            <div style='margin-left:30px; font-size:180%'><strong></strong> Países europeus aprovam empréstimo emergencial de 7 bilhões de euros para Grécia pagar contas
                <br />
            </div>
            <br />
            <div class='relogio'>05:11:27
                <br />20/7/2015
                <br/>
                <br/>
                <img src='uol_reflexo.png' width='50%' />
                <br />
                <img src='logob.png' width='50%' />
            </div>
        </div>
    </div>
</div>
<div class='corpo'>
    <div class='foto'>
        <img class="foto"...

CSS

@charset"utf-8";
 body {
    margin: 0px;
    padding: 0px;
    width:100%;
    height:100%;
}
.foto {
    width:100%;
    height: 100%;
    z-index: 0;
    margin-top:0px;
    margin-left:0px;
}
.video {
    position:relative;
    height: 100%;
    width:100%;
    right: -100px;
}
.corpo {
    z-index: 0;
    margin-top:0px;
    margin-left:0px;
    margin:0px;
    padding:0px;
}
.corpo_texto {
    width: 30%;
    height: 100%;
    z-index: 1;
    font-size:150%;
    color:#FFFFFF;
    font-family:Tahoma;
    top: 0px;
    left: 0px;
    background: url(fundo_80.png);
}
.relogio {
    position:relative;
    z-index:7;
    text-align:center;
    bottom:-40px;
}

JavaScript

var $noticias = $('.corpo');
var qtd = $noticias.length;
var i = 0;
setInterval(function () {
if ((i++) == qtd) i = 0;
    $('html, body').animate({
        scrollTop: $noticias.eq(i).position().top
    }, 800);

}, 2000);