JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="tgi-spoiler">Sed nec pretium nulla.</span> Curabitur nisi nulla, feugiat nec mauris at, eleifend tempus sapien. Donec ut velit dolor. Suspendisse suscipit arcu eu tellus gravida, ac vestibulum lorem congue. Suspendisse vulputate <span class="tgi-spoiler">rhoncus dignissim</span>. Vivamus pellentesque tincidunt magna. Mauris placerat lectus auctor velit vulputate, ac mollis enim accumsan. <span class="tgi-spoiler">Suspendisse euismod tortor sapien, id sollicitudin nulla </span>condimentum eget. Fusce luctus risus nec dolor pellentesque placerat.
    </p>
    <p>Etiam aliquet non eros id adipiscing. Vestibulum ante <span class="tgi-spoiler">ipsum primis</span> in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam a sodales ipsum, non adipiscing felis. Suspendisse vitae nulla eleifend, bibendum nisi a, gravida metus. <span class="tgi-spoiler">Donec ullamcorper</span>, metus sit amet euismod posuere, tellus enim vestibulum lectus, sit amet rutrum elit nulla venenatis lorem. Praesent egestas aliquam eros, a congue erat vestibulum nec. Nulla non elit quis diam dapibus vulputate non at quam.
    </p>
    <p>Ut commodo felis ante, a eleifend nisi commodo vel. Vestibulum aliquam eu quam vitae sodales. Nunc a ultricies mauris. Donec tempus diam urna, quis varius turpis hendrerit id. Vivamus aliquet volutpat nisi non pulvinar. Nulla facilisi. Vivamus vel quam sit amet nulla facilisis <span class="tgi-spoiler">accumsan ac imperdiet diam</span>. Integer faucibus, libero in adipiscing varius, lorem sem hendrerit nibh, porttitor rhoncus tortor urna sit amet sapien. Pellentesque accumsan venenatis elit at facilisis. Vestibulum feugiat commodo congue. Sed eu gravida eros. Quisque aliquet suscipit egestas. Integer ac ante eu turpis iaculis semper. Suspendisse mollis dui tellus, vel interdum ligula iaculis eget. <span class="tgi-spoiler">Donec tempus mi in egestas...

CSS

@import url("http://fnt.webink.com/wfs/webink.css/?project=48A0FEEA-BDD3-4D13-87A6-73DC10C33BB5&fonts=31B87CF9-F410-ED20-E812-2F143D523935:f=Hermes-Regular");

html, body {
    overflow: hidden;
}
body {
    padding: 15px;
}
p, span {
    color: #666;
    font: 16px 'Hermes-Regular', sans-serif;
    text-align: justify;
}
#content {
    height: 400px;
    overflow-y: scroll;
}
.tgi-spoiler {
    border-color: #2CAE85;
    border-style: dashed;
    border-width: 0 0 2px;
    padding: 0;
}
.tgi-spoiler.on {
    background-color: #2CAE85;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    padding: 2px 0;
    text-indent: -9999px;
}
#switch, #switch * {
    border-radius: 5px;
}
#switch, #switch span {
    display: block;
}
#switch {
    background-color: #bfbfbf;
    cursor: pointer;
    height: 50px;
    margin-bottom: 15px;
    width: 224px;
}
#switch:hover {
    background: #c4c4c4;
}
#switch:hover:active {
    background-color: #afafaf;
}
#switch.on {
    background-color: #2cae85;
}
#switch.on:hover {
    background-color: #2fb78a;
}
#switch.on:hover:active {
    background-color: #2b9f75;
}
#switch span {
    background-color: transparent;
    color: #eee;
    float: left;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}
#switch .switch-img-wr {
    background-color: rgba(0,0,0, 0.2);
    border-radius: 5px 0 0 5px!important;
}
#switch .switch-img, #switch.on:hover .switch-img {
    background: url('http://thegeekinvasion.com/fran-temp/spoiler-35.png') center -38px no-repeat;
    background-origin: content-box;
    border-radius: 19px;
    height: 50px;
    padding: 0 7px;
    width: 40px;
}
#switch.on .switch-img, #switch:hover .switch-img {
    background-position: center 8px;
}
#switch .switch-txt {
    border-radius: 0 5px 5px 0;
    padding: 16px 0 16px 10px;
    text-shadow: rgba(0, 0, 0, 0.5) 1px 1px;
    width: 160px;
}
#switch:hover .switch-txt {
    text-shadow: #fff 0 0 10px, rgba(0,0,0, 0.3) 1px 1px;
}

JavaScript

jQuery(function($) {
    var c = function(w) { // For debugging. Remove when done.
            console.log(w);
        },
        bCol = "#2CAE85",
        chnColor = function(c) {
            var cO = c.replace("rgb(", "").replace(")", "").replace(/ /g, "").split(",");
            $.each(cO, function(i, v) {
                cO[i] = Math.round( parseFloat(v, 10) * 0.95 );
            });
            return "rgb("+cO.join(", ")+")";
        },
        ClickFn = function(event) {
            var obj1 = event.data.obj;
            if( obj1.hasClass("tgi-spoiler-off") ) {
                SpoilOn(obj1);
                obj1
                    .removeClass("tgi-spoiler-off")
                    .attr( "title", obj1.attr("title").replace("hide", "show") )
                    .trigger("mouseover")
                ;
            } else {
                obj1
                    .addClass("tgi-spoiler-off")
                    .attr( "title", obj1.attr("title").replace("show", "hide") )
                ;
                SpoilOff(obj1);
            }
        },
        OverFn = function(event) {
            var obj2 = event.data.obj,
                col = obj2.css("color")
            ;
            if( col === obj2.css("background-color") ) {
                obj2.css( "color", chnColor(col) );
            }
        },
        OutFn = function(event) {
            var obj3 = event.data.obj;
           obj3.css( "color", obj3.css("background-color") );
        },
        SpoilInit = function(mode) {
            var col,
                spoilBtn = "<div id='switch' class=' on'>"+"\n"+"<span class='switch-img-wr'>"+"\n"+"<span class='switch-img'></span>"+"\n"+"</span>"+"\n"+"<span class='switch-txt'>Spoiler-Safe On</span>"+"\n"+"</div>",
                tOn = "Click to deactivate and show spoilers!",
                tOff = "Click to activate and hide spoilers!"
            ;
            if( mode === "on" ) {
                if( !Boolean( $("#switch")[0]) ) {
                  ...