JSFiddle - React, Tailwind, and code Playground

HTML

<section id='latest-jobs'>
    <header class='header text clearfix'>
        <h1 class='title'>Latest jobs</h1>
    </header>
    
    <ul class='list'>
        <li class='media'>
            <a class='img' href=''>
                <img class='logo' height='45' src='http://www.fuu.sk/wp-content/uploads/2010/12/apple_logo.jpg' width='45' />
            </a>
            <div class='body'>
                <h2 class='name'>
                    <a><a href="/">Web Developer</a></a>
                </h2>
                <span class='locality unimportant'>Texas, US</span>
            </div>
        </li>
        
        <li class='media'>
            <a class='img' href=''>
                <img class='logo' height='45' src='http://www.fuu.sk/wp-content/uploads/2010/12/apple_logo.jpg' width='45' />
            </a>
            <div class='body'>
                <h2 class='name'>
                    <a><a href="/">Web Developer</a></a>
                </h2>
                <span class='locality unimportant'>Texas, US</span>
            </div>
        </li>
        
        <li class='media'>
            <a class='img' href=''>
                <img class='logo' height='45' src='http://www.fuu.sk/wp-content/uploads/2010/12/apple_logo.jpg' width='45' />
            </a>
            <div class='body'>
                <h2 class='name'>
                    <a><a href="/">Web Developer</a></a>
                </h2>
                <span class='locality unimportant'>Texas, US</span>
            </div>
        </li>
    </ul>
</section>

CSS

.media {
  display: block;
  position: relative;
  overflow: hidden;
  *zoom: 1;
  margin: 10px 0;
}

.media .img {
  float: left;
  margin-right: 10px;
}

.media .img img {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
  display: block;
}

.media .body {
  display: table-cell;
  vertical-align: top;
  padding-top: 7px;
    width:250px;
}

.media .body .heading, .media .body .title, .media .body .name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-align: left;
}

JavaScript

setInterval(function() {
    $('#latest-jobs ul li:last').fadeOut(function() { $(this).remove(); });

    $( "<li class='media'><a class='img' href=''><img class='logo' height='45' src='http://www.fuu.sk/wp-content/uploads/2010/12/apple_logo.jpg' width='45' /></a><div class='body'><h2 class='name'><a><a href='/'>Web Developer</a></a></h2><span class='locality unimportant'>Texas, US</span></div></li>" )
        .hide()
        .prependTo('#latest-jobs ul')
        .slideDown('slow');
}, 5000);