JSFiddle - React, Tailwind, and code Playground

by for3v3rforgott3n

HTML

<ol>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic2</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic3</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic4</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic5</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic6</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic7</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic8</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic9</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic10</a></li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic11</a></li>
</ol>

CSS

ol {
  padding: 0px;
  list-style: decimal-leading-zero inside;
  color: #000;
  font-size: 0.9em;
  -moz-column-count: 5;
  -webkit-column-count: 5;
  column-count: 5;
}

ol li {
  display: inline-block;
  margin: 5px 10px;
}

ol li a {
  background-color: #EEE;
  display: block;
  width: 200px;
  height: 40px;
  cursor: pointer;
  text-overflow:ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
}

JavaScript

$('a.song').each(function() {
      var origwidth = $(this).width();
      var origheight = $(this).height();
      $(this).hover(
        function() {
          $(this).stop().animate({width: origwidth * 2, height: origheight * 2});
        }, function() {
          $(this).stop().animate({width: origwidth, height: origheight});
      });
        $(this).clone(true).attr({"class":"song-detail"}).css({"z-index": 1, "background-color":"#CCC"}).appendTo('ol').wrap("<li></li>");
    });