JSFiddle - React, Tailwind, and code Playground

by SO_AMK

HTML

<body data-twttr-rendered="true" class="active">
        <nav class="toolbar">
            <img class="settings-button" id="settings" src="settings-button.png">
            <a class="toolbar-text" href="">The Pulse News<sup>®</sup><span class="pulse-blue"> WebApp</span></a>
            <img class="refresh-button" id="refresh-all" src="refresh-button.png">
            <div class="pages"><a class="pagename" href="#0HOME">HOME</a><a class="pagename active" href="#1FUN">FUN</a><a class="pagename" href="#2SCIENCE">SCIENCE</a></div>
        </nav>
    
<div class="page" id="1FUN"><header class="feed-title"><div class="feed-title-content"><span class="feed-title-text">The Awl</span></div></header><section class="row"><div class="scroll-left"></div><div class="row-scroll"><div class="tile no-img"><title class="tile-title no-img">Lil Wayne And Big Sean, "My Homies Still"</title><hr class="no-img hr"><span class="no-img excerpt">
The video for Lil Wayne's new song is like a combination of _The Burbs_,
_Mannequin_, _Beetlejuice_, and "Don't Come Around Here No More." It's like
...</span><div class="tile-modal"><div class="article-wrapper">
<div class="article-header">
<a class="article-title-link" target="_blank" href="http://www.theawl.com/2012/07/lil-wayne-big-sean-my-homies-still">
<h1 class="article-title">Lil Wayne And Big Sean, "My Homies Still"</h1>
</a>
<h2 class="article-byline">By Dave Bry: <a href="http://www.theawl.com/" class="article-title-link" title="Click to visit http://www.theawl.com/">The Awl</a></h2>
</div>
<hr class="article-hr">
<div class="article-content"><style>.feedflare{display:none}</style><p><iframe height="480" src="http://player.vimeo.com/video/45861688" width="640"></iframe><br>
The <a href="http://www.missinfo.tv/index.php/lil-wayne-my-homies-still-feat-big-sean-video/#more-63476">video</a> for Lil Wayne's new song is like a combination of <em><a href="http://www.imdb.com/title/tt0096734/">The Burbs</a></em>, <a...

CSS

@font-face {
        font-family: 'Helvetica_Bold';
        src: url('fonts/HelveticaNeueLTCom-Bd.eot');
        src: local('?'), url('fonts/HelveticaNeueLTCom-Bd.woff') format('woff'), url('fonts/HelveticaNeueLTCom-Bd.ttf') format('truetype'), url('fonts/HelveticaNeueLTCom-Bd.svg') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    @-webkit-keyframes rotate {
        from {
            -webkit-transform: rotate(0deg);
        }
        to { 
            -webkit-transform: rotate(360deg);
        }
    }
    
    body {
        margin: 0;
        background-color: #414141;
    }
    
    .row {
        width: 100%;
        white-space: nowrap;
        height: 158px;
        overflow: hidden;
    }
    
    .row-scroll {
        overflow-y: hidden;
        height: 153px;
        display: inline-block;
        position: relative;
        padding: 0 4px 0 4px;
        background-color: #272624;
    }
    
    .tile {
        line-height: 18px;
        vertical-align: top;
        margin: 4px 1px 4px 0px;
        font-size: 15px;
        color: white;
        font-family: Helvetica_Bold;
        white-space: normal;
        overflow: hidden;
        display: inline-block;
        width: 150px;
        height: 144px;
    }
    
    .tile-image {
        height: 100%;
    }
    
    .tile-title {
        padding: 2% 3%;
        height: 41%;
        display: block;
        top: -45%;
        position: relative;
        background-color: rgba(0, 0, 0, 0.69);
    }
    
    .scroll-left {
        z-index: 9;
        background-repeat: no-repeat;
        background-size: 40px, auto;
        background-position: center;
        background-image: url(left-arrow.png), -webkit-linear-gradient(right, rgba(0, 0, 0, 0.48), black);
        left: 0;
        position: absolute;
        display: inline-block;
        height: 153px;
        width: 10%;
        opacity: 0;
        min-width: 40px;
        max-width: 130px;
        -webkit-transition:...

JavaScript

$(".tile").click(function () {
            if ($(".tile-modal.tile-modal-active").length) {
                $(".tile-modal.tile-modal-active").removeClass("tile-modal-active");
                $(this).children(".tile-modal").addClass("tile-modal-active");
            } else {
                $(this).children(".tile-modal").addClass("tile-modal-active");
                $("body").addClass("active");
            }
        });


        $(".scroll-left").hover(function () {
            if (($(this).parent().scrollLeft() * 2) < 1000) speed = $(this).parent().scrollLeft() * 3;
            else if (($(this).parent().scrollLeft() * 2) < 500) speed = $(this).parent().scrollLeft() * 4;
            else if (($(this).parent().scrollLeft() * 2) < 100) speed = $(this).parent().scrollLeft() * 8;
            else speed = $(this).parent().scrollLeft() * 2;
            
            $(this).parent().animate({
                scrollLeft: 0
            }, speed);
        }, function () {
            $(this).parent().stop();
        });

        $(".scroll-right").hover(function () {
            parent = $(this).parent()[0];
            parentWidth = $(this).parent()[0].scrollWidth;
            if (((parentWidth - parent.scrollLeft) * 2) < 1000) speed = (parentWidth - parent.scrollLeft) * 2;
            else if (((parentWidth - parent.scrollLeft) * 2) < 500) speed = (parentWidth - parent.scrollLeft) * 2;
            else if (((parentWidth - parent.scrollLeft) * 2) < 100) speed = (parentWidth - parent.scrollLeft) * 2;
            else speed = (parentWidth - parent.scrollLeft) * 2;
            
            console.log(speed);
            $(this).parent().animate({
                scrollLeft: $(this).siblings(".row-scroll").width()
            },  speed);
        }, function () {
            $(this).parent().stop();
        });