JSFiddle - React, Tailwind, and code Playground

by Sandra Caroline Hansen

HTML

<link rel="stylesheet" href="stylesheet.css">
  <script src="jquery.js"></script>
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

    <script type="text/javascript">
    $( document ).ready(function() {
$('#recorder').css('-webkit-transform', 'scale(100%)');
});
 $(function () {
    var startTime = +new Date();
    $('#smallLEFTbox').css('overflow', 'hidden');
    
    var finnnosliderleftside = $('#finnnosliderleftside'),
        items = finnnosliderleftside.find('.IMGslideFINNNO');
    var finnnosliderleftsideHeight = finnnosliderleftside.height(),
        itemsNum = items.length,
        itemHeight = items.height();

    finnnosliderleftside.css('top', '-' + (finnnosliderleftsideHeight + itemHeight) + 'px');

    var startPos = finnnosliderleftside.css('top');

    items.first().before(items.clone());
    items.last().after(items.clone());

    scrollItems(finnnosliderleftside,finnnosliderleftsideHeight,itemHeight,startPos,3);
    var endTime = +new Date();
    var diff = endTime - startTime;
    console.log(diff);
    setInterval(function(){ 
        scrollItems(finnnosliderleftside,finnnosliderleftsideHeight,itemHeight,startPos,3);
    }, 3);
});

function scrollItems(smallLEFTbox, targetsHeight, increment, startPos, temps) {
    var secs = temps * 6000;
    smallLEFTbox.animate({
        'top': '-' + ((targetsHeight * 1.1) + increment) + 'px'
    }, secs, 'linear', function () {
        smallLEFTbox.css('top', startPos);
    });
}
    </script>
    
    
  <style>
  
    /*recorder just for testing web */
  #recorder {
    width: 30px;
    height: 20px;
    transform: scale(0.5);
  }
  </style>
  
  
  <div id="recorder">

 <div class="finn-no-backgroundbox">

<div id="smallLEFTbox">
    <div id="finnnosliderleftside">
        <div class="IMGslideFINNNO"><img src="http://i67.tinypic.com/106hkci.jpg" class="finn-no-img-small-size" alt="" /></div>
...

CSS

<style>

  .finn-no-img-logo {
    /* max-height: 87px; */
    /* max-width: 149px; */
    /* opacity: 1.5; */
}
/*Slider*/
#smallLEFTbox {
  border: 1px solid #ac5acf;
    position: relative;
    background: black;
    display: table-cell;
    width: 370px;
    height: 1038px;
    float: left;
    margin: 5px 0 0 0;
    color: #66757f;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    line-height: 13px;
}
#finnnosliderleftside {
    position: absolute;
    border: 1px solid #ac5acf;

}

.IMGslideFINNNO {
      display: table-cell;
      border: 1px solid #ac5acf;
    width: 370px;
    height: 195px;
    float: left;
    /* border: 1px solid #3a9358; */
    margin: 30px 2px;
    color: #66757f;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    line-height: 13px;
  
}
.finn-no-img-small-size {
    /* max-height: 99px; */
    max-width: 370px;
    opacity: 1.5;
    border: 1px solid #ac5acf;

}
/*HEADER*/
.finn-no-header-box {
    display: table-cell;
    width: 925px;
    height: 60px;
    float: left;
    margin: 0px;
    color: #6b7277;
    border: 1px solid #ac5acf;
    /* background: rgba(255, 255, 255, 0.76); */
    font-family: helvetica;
    font-size: 11px;
    font-weight: normal;
    line-height: 13px;
}
.finn-no-header-box-right {
    display: table-cell;
    width: 469px;
    height: 51px;
    border: 1px solid #ac5acf;
    float: right;
    text-align: left;
    margin: 3px;
    color: #66757f;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    line-height: 13px;
}
.finn-no-header-box-left {
    display: table-cell;
    width: 239px;
    height: 51px;
    float: left;
    text-align: left;
    margin: 0px;
    color: #66757f;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    line-height: 13px;
}
.finn-no-header-productname {
    display: table-cell;
    float: right;
    width: 440px;
    height: 51px;
    text-align: left;
    text-align: center;
   ...