JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://rawgit.com/nathco/jQuery.scrollSpeed/master/jQuery.scrollSpeed.js"></script>

<div class="container">
<div id="left" class="linked">
<span class="action title-side">Updated Slides</span>
<div class="thumb">
  <div class="image">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWbDJMkbUHw9VfP2m9ncRI8HhWb_oNN7r1M6-Ce1MXl51TxSU2Vw">
  </div>
  <div class="details">
  <div class="action red"><span class="glyphicon glyphicon-alert"></span> Deleted</div>
  <span>Used in <strong>8</strong> Presentations</span>
  <span class="link"><i class="glyphicon glyphicon-link"></i> Is Linked</span>
  <span>Notes: Lorem ipsum dolor sit amet, sed do eiusmod tempor nostrud... </span>
  </div>
</div>
<div class="thumb">
  <div class="image">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWbDJMkbUHw9VfP2m9ncRI8HhWb_oNN7r1M6-Ce1MXl51TxSU2Vw">
  </div>
  <div class="details">
  <div class="action red"><span class="glyphicon glyphicon-alert"></span> Deleted</div>
  <span>Used in <strong>0</strong> Presentations</span>
  <span>Not Linked</span>
  <span>Notes: Lorem ipsum dolor sit amet, sed do eiusmod tempor nostrud... </span>
  </div>
</div>
<div class="thumb">
  <div class="image">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWbDJMkbUHw9VfP2m9ncRI8HhWb_oNN7r1M6-Ce1MXl51TxSU2Vw">
  </div>
  <div class="details">
  <div class="action green"><span class="glyphicon glyphicon-alert"></span> Replaced 1</div>
  <span>Used in <strong>2</strong> Presentations</span>
  <span>Not Linked</span>
  <span>Notes: Lorem ipsum dolor sit amet, sed do eiusmod tempor nostrud... </span>
  </div>
</div>
<div class="thumb">
  <div class="image">
    <img...

CSS

#left { width: 370px; height: 400px; overflow: auto; float: left; }
#right { width: 380px; height: 400px; overflow: auto;  }
#right .thumb {
    margin-left: 15px;
}
.thumb{
    height: 125px;
    width: 350px;
    border: 1px solid #d2d2d2;
    display: block;
    margin-bottom: 18px;
    padding-top: 15px;
    padding-right: 10px;
    padding-left: 15px;
    background:#fff;
}
.invisithumb{
 height: 125px;
 width: 350px;
  border: none;
  display: block;
  margin-bottom: 18px;
    padding-top: 15px;
    padding-right: 10px;
    padding-left: 15px;
    background:#fff;
}
.title-side{
  margin-bottom:15px;
}
.image img, .image{
width:115;
height:90px;
float: left;
}
.details{
  margin-left: 115px;
  font-family:Segoe UI;
  font-size: 12px;
}
.details span{
    display: block;
    line-height: 17px;
    padding-left:15px;
}
.action{
  display: block;
  font-family:Segoe UI;
  font-size: 14px;
  padding-left:10px;
  font-weight: 600;
  padding-bottom:10px;
  height: 20px;
}
.thumb .action{
  padding-bottom:0px;
}
.red{
  color:#df0303;
}
.green{
  color:#36a927;
}
.orange, .glyphicon-alert {
    color: #ff9800;
    float: right;
    padding: 4px 7px 0px 0px;
    font-size: 12px;
}
.container{
  width:812px;
  overflow:hidden;
  border: 1px solid #d2d2d2;
  margin:20px;
  padding:20px 30px;
}
i.glyphicon.glyphicon-link {
    font-size: 11px;
}
.link{
  color:#03b3f9;
  cursor:pointer;
}
.oculto{
  visibility: hidden;
}
#right::-webkit-scrollbar { 
    display: none; 
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-button {
    width: 8px;
    height:5px;
}
::-webkit-scrollbar-track {
    background:#eee;
    box-shadow: 0px 0px 3px #dfdfdf inset;
    border-radius:10px;
}
::-webkit-scrollbar-thumb {
    background:#999;
    border-radius:10px; 
}
::-webkit-scrollbar-thumb:hover {
    background:#7d7d7d;
}

JavaScript

$(function(){

    $('.linked').scroll(function(){
        $('.linked').scrollTop($(this).scrollTop());    
    });
    $('.linked').scrollSpeed(100, 8000);
    

});

 $( "#left, #right" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();