JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<div class="entry-content" itemprop="text" style="opacity: 1;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp;<span id="more-3537"></span><span class="tgi-spoiler tgi-spoiler-span on" title="Left click to show content!" style="color: rgb(44, 174, 133); background-color: rgb(44, 174, 133);">Sed nec pretium nulla.&nbsp;Curabitur nisi nulla, feugiat nec mauris at, eleifend tempus sapien. Donec ut velit dolor.</span> Suspendisse suscipit arcu eu tellus gravida, ac vestibulum lorem congue. Suspendisse vulputate&nbsp;rhoncus dignissim. Vivamus pellentesque tincidunt magna. Mauris placerat lectus auctor velit vulputate, ac mollis enim accumsan.&nbsp;Suspendisse euismod tortor sapien, id sollicitudin nulla&nbsp;condimentum eget. Fusce luctus risus nec dolor pellentesque placerat.</p>
<p><span class="tgi-spoiler tgi-spoiler-span on" title="Left click to show content!" style="color: rgb(44, 174, 133); background-color: rgb(44, 174, 133);">Etiam aliquet non eros id adipiscing. Vestibulum ante&nbsp;ipsum primis&nbsp;</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.&nbsp;Donec ullamcorper, 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><span class="tgi-spoiler tgi-spoiler-span on" title="Left click to show content!" style="color: rgb(44, 174, 133); background-color: rgb(44, 174, 133);">Some p</span>ara<span>gra</span><span>p</span><span>h</span> with <span class="tgi-spoiler tgi-spoiler-span on" title="Left click to show content!" style="color: rgb(44, 174, 133); background-color: rgb(44, 174, 133);">a <a title="Link deactivated by Spoiler Safe!" data-href="http://google.com/ncr" data-title="Google">link</a>.<span style="line-height:...

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');

/* INTERFACE */
.clear {
	clear: both;
}
#tgiss-cache {
	display: none;
}
.switch-wrap, .switch-wrap * {
    border-radius: 5px;
}
.switch-wrap > div {
	float: left;
	height: 50px;
}
.switch-wrap span {
	font: 12px "Hermes-regular", sans-serif;
}
#tgi-info {
	background-color: #dfdfdf;
	margin-left: 10px;
}
#tgi-info span {
	font-style: italic;
	text-shadow: 1px 1px 1px #fff;
}
#tgi-info .tgi-accent {
	color: #2CAE85;
}
#tgi-switch {
    background-color: #bfbfbf;
    cursor: pointer;
    margin-bottom: 30px;
    width: 226px;
}
#tgi-switch:hover {
    background: #c4c4c4;
}
#tgi-switch:hover:active {
    background-color: #afafaf;
}
#tgi-switch.on {
    background-color: #2cae85;
}
#tgi-switch.on:hover {
    background-color: #2fb78a;
}
#tgi-switch.on:hover:active {
    background-color: #2b9f75;
}
#tgi-switch span, #tgi-info span:not(.tgi-accent) {
    float: left;
    display: block;
}
#tgi-switch span {
    color: #eee;
    font-weight: bold;
    text-transform: uppercase;
}
.switch-wrap .tgi-img-wr {
    background-color: rgba(0,0,0, 0.2);
    border-radius: 5px 0 0 5px!important;
    padding: 0 7px;
}
.switch-wrap .tgi-img {
    background-origin: content-box;
    height: 50px;
    width: 40px;
}
#tgi-switch .tgi-img, #tgi-switch.on:hover .tgi-img {
    background: url('../img/spoiler-front.png') center -38px no-repeat;
}
#tgi-info .tgi-img {
    background: url('../img/spoiler-info-front.png') center 7px no-repeat;
}
#tgi-switch.on .tgi-img, #tgi-switch:hover .tgi-img {
    background-position: center 8px;
}
#tgi-switch-txt, #tgi-info-txt {
    border-radius: 0 5px 5px 0;
    padding: 16px 0 16px 10px;
}
#tgi-switch-txt {
    border-radius: 0 5px 5px 0;
    text-shadow: rgba(0, 0, 0, 0.5) 1px 1px;
    width: 164px;
}
#tgi-info-txt {
	padding-right: 12px;
}
#tgi-switch:hover #tgi-switch-txt {
   ...