JSFiddle - React, Tailwind, and code Playground

by TheDev6

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<div id="the-vid">
    <video id="mov" width="320" height="240">
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" />
    </video>
    <br/>
    <button data-bind="click:play">Play</button> <button data-bind="click:pause">Pause</button>
    
    <div>
        Current Time: <span data-bind="text:currentTime"></span>
    </div>
    <div data-bind="foreach:lines">
        <p style="cursor: pointer;" data-bind="text:text,click:$root.setTime,css:$root.currentLineStyle($data)"></p>
    </div>
</div>

CSS

.yellow {
    background-color: #e1e114;
}

.white {
    background-color: #9a9595;
}

JavaScript

$(function () {
        http://jsfiddle.net/5P9x2/


        //revealing modular pattern (like namespaces for javascript)
        //http://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript
        var sooper = function () {

            //this is some test data
            var someLines = [
                { 'text': "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,", 'val': 0 },
                { 'text': "eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam ", 'val': 1 },
                { 'text': "voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem ", 'val': 2 },
                { 'text': "sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam ", 'val': 3 },
                { 'text': "eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ", 'val': 4 },
                { 'text': "ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate ", 'val': 5 },
                { 'text': "velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?", 'val': 6 },
                { 'text': "sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam ", 'val': 7 },
                { 'text': "eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ", 'val': 8 },
                { 'text': "ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea...