JSFiddle - React, Tailwind, and code Playground

by VixedS

HTML

<div id="round">
  <a href="#" title="Lorem Ipsum 1">
    <h2>Lorem Ipsum 1</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla tellus et risus rutrum molestie. Mauris bibendum placerat velit ut gravida.
  </a>
  <a href="#" title="Lorem Ipsum 2">
    <h2>Lorem Ipsum 2</h2>
    Quisque ac diam condimentum, tincidunt nibh sit amet, sagittis odio. Mauris at fringilla tellus. In nec semper erat. Fusce imperdiet, sem nec rutrum fermentum, turpis nulla scelerisque ligula, ut blandit ex libero nec nisi. Sed ornare bibendum ex non consequat.
  </a>
  <a href="#" title="Lorem Ipsum 3">
    <h2>Lorem Ipsum 3</h2>
    Fusce porttitor ligula eros, at mollis odio molestie quis.
  </a>
  <a href="#" title="Lorem Ipsum 4">
    <h2>Lorem Ipsum 4</h2>
    Vivamus ut nulla accumsan, ornare quam vel, posuere eros. Sed dictum, enim a posuere congue, tellus nisi convallis mauris, eu dictum risus mauris sit amet nisi. Nunc porta vehicula nibh sit amet vestibulum. 
  </a>
</div>

Mario Bross is up and down, and I don't want this.

CSS

#round a {
    display:block;
    background-color:#666;
    text-decoration: none;
    border-radius:3px;
    color:#DDD;
    padding:10px 20px 40px;
}

JavaScript

var banDiv=$('#round');


var setBanHeight = function(){
  var t=0;
  banDiv.children('a').each(function(){
    var el = $(this);
    if (el.outerHeight() > t ) t=el.outerHeight();
  })
  banDiv.css('height',t+'px');
  banDiv.children('a').hide();
};

var startBanRotation=function(){
  var activeBan=banDiv.children('a:first');
  activeBan.fadeIn('slow',function(){
    activeBan.delay(5000).fadeOut('slow',function(){
     activeBan.appendTo(banDiv);
      startBanRotation();
    });
  });
};

setBanHeight();
startBanRotation();