JSFiddle - React, Tailwind, and code Playground

by SM ADnan

HTML

<div class="thought-container">
    <ul id="thought-list-0" class="thought-list">
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li> 
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
        <li>Some thought text</li>
    </ul>
</div>

CSS

.thought-container{
    text-align: center;    
}
.thought-list li{
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: #CCCCCC;
    margin-bottom: 4px;
    pointer-events: none;
}
.thought-list {
    height: 500px;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
    left: 0;
}

JavaScript

$(function(){
    console.clear();
    console.log($('.thought-list').width()+" "+$('.thought-list').height());
    var $view = $('.thought-list');
    window.$view = $view;
    $('.thought-container').on('mousedown', function(){
        console.log('keydown');
        var left = parseInt($view.css('left')) - 100;
        console.log(left);
        $view.css('left', left+"px");
    })
});