JSFiddle - React, Tailwind, and code Playground

by Manish Sharma

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script
			  src="https://code.jquery.com/jquery-3.0.0.js"
			  integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo="
			  crossorigin="anonymous"></script>
<div class="col-md-6 con">
  <div class="prev pull-left">
    <a class="prev">
     Prev
    </a>
  </div>
  <div class="next pull-right">
   <a class="next">
     Next
   </a>
  </div>
<div class="col-md-6 table-responsive">
  <table class="table">
    <tr>
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
    ...

CSS

a{font-size:16px; cursor:pointer;}
.con{margin-top:20px;}

JavaScript

$(document).ready(function(){

$('.prev').click(function(){
    if (getStyle(null,'direction') == 'ltr'){
    $('.table-responsive').animate({scrollLeft: -$( '.table-responsive' ).offset().left},1000);
} else {
    $('.table-responsive').animate({scrollLeft:$( '.table-responsive' ).offset().left},1000);
}
});



$('.next').click(function(){
    if (getStyle(null,'direction') == 'ltr'){
    $('.table-responsive').animate({scrollLeft: -$( '.table-responsive' ).offset().left+ $('.table-responsive table').outerWidth()},1000);
} else {
    $('.table-responsive').animate({scrollLeft:$( '.table-responsive' ).offset().left+$('.table-responsive  table').width()},1000);
}
});
});


function getStyle(el,styleProp){
    var x = document.getElementById(el) || document.body;
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}