JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<script src="//cdn.axiell.com/arena/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.5/slick.css">
<script>
    $.ajax({
    url: 'http://theduck:9000/dynamicList/query/publicationYear_index:2003/size/20',
    dataType: 'json',
    success: function (data) {
        $('body').append('<ul class="arena-dynamic-list"></ul>');
        $.each(data, function (i, val) {
            $('.arena-dynamic-list').append('<li class="arena-record"><div class="arena-record-jacket"><a href="' + data[i].link + '"><div class="arena-record-cover"><img src="' + data[i].cover + '" alt="' + data[i].title + '"></a></div></div><a href="' + data[i].link + '"><div class="arena-record-title">' + data[i].title + '</div></a><div class="arena-record-author">' + data[i].author + '</div><div class="arena-record-media">' + data[i].media + '</div></li>');
        });
        $('.arena-dynamic-list').slick({
            dots: true,
            slide: '.arena-record',
            slidesToShow: 6,
            slidesToScroll: 6,
            infinite: false
        });
    }
});
</script>

CSS

@font-face {
    font-family:'FontAwesome';
    src: url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0');
    src: url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-slider {
    max-width: 100%;
    overflow: hidden;
    padding-bottom: 20px;
    clear: both;
    margin-bottom: 10px;
}
.slick-slide {
    height: auto;
    margin-bottom: 30px;
}
.slick-list:focus {
    outline: none;
}
.slick-prev:before, .slick-next:before, .slick-dots li button:before {
    font-family:'FontAwesome';
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
}
.slick-prev:before, .slick-next:before {
    color: #fff;
    font-size: 40px;
    position: relative;
    text-align: center;
}
.slick-prev:before {
    content:"\f104";
    left: -3px;
}
.slick-next:before {
    content:"\f105";
    left: 1px;
}
.slick-prev, .slick-next {
    background-image: none;
    border: 0;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0.7;
    outline: 0;
}
.slick-prev:hover, .slick-next:hover {
    background-image: none;
    border: 0;
    opacity: 1;
}
.slick-prev, .slick-next {
    position: absolute;
    cursor: pointer;
    clear: both;
    z-index: 100;
    padding: 0;
    top: 30px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    overflow: hidden;
   ...