JSFiddle - React, Tailwind, and code Playground

by brennan

HTML

<!-- Place this where you want the widget to show up -->
<div class="SB_tout"></div>




<!-- Embed code. Place at the end of the <body> -->
<script id="SB_script-embed" data-lang="en_CA" type="text/javascript">
/*{literal}<![CDATA[*/
window.lightningjs||function(c){function g(b,d){d&&(d+=(/\?/.test(d)?"&":"?")+"lv=1");c[b]||function(){var i=window,h=document,j=b,g=h.location.protocol,l="load",k=0;(function(){function b(){a.P(l);a.w=1;c[j]("_load")}c[j]=function(){function m(){m.id=e;return c[j].apply(m,arguments)}var b,e=++k;b=this&&this!=i?this.id||0:0;(a.s=a.s||[]).push([e,b,arguments]);m.then=function(b,c,h){var d=a.fh[e]=a.fh[e]||[],j=a.eh[e]=a.eh[e]||[],f=a.ph[e]=a.ph[e]||[];b&&d.push(b);c&&j.push(c);h&&f.push(h);return m}; return m};var a=c[j]._={};a.fh={};a.eh={};a.ph={};a.l=d?d.replace(/^\/\//,(g=="https:"?g:"http:")+"//"):d;a.p={0:+new Date};a.P=function(b){a.p[b]=new Date-a.p[0]};a.w&&b();i.addEventListener?i.addEventListener(l,b,!1):i.attachEvent("on"+l,b);a.l&&function(){function b(){return["<head></head><",c,' onload="var d=',n,";d.getElementsByTagName('head')[0].",d,"(d.",g,"('script')).",i,"='",a.l,"'\"></",c,">"].join("")}var c="body",e=h[c];if(!e)return setTimeout(arguments.callee,100);a.P(1);var d="appendChild",g="createElement",i="src",k=h[g]("div"),l=k[d](h[g]("div")),f=h[g]("iframe"),n="document",p;k.style.display="none";e.insertBefore(k,e.firstChild).id=o+"-"+j;f.frameBorder="0";f.id=o+"-frame-"+j;/MSIE[ ]+6/.test(navigator.userAgent)&&(f[i]="javascript:false");f.allowTransparency="true";l[d](f);try{f.contentWindow[n].open()}catch(r){a.domain=h.domain,p="javascript:var d="+n+".open();d.domain='"+h.domain+"';",f[i]=p+"void(0);"}try{var q=f.contentWindow[n];q.write(b());q.close()}catch(s){f[i]=p+'d.write("'+b().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}a.P(2)}()})()}();c[b].lv="1";return c[b]}var o="lightningjs",k=window[o]=g(o);k.require=g;k.modules=c}({});
window.SB_sideTab = lightningjs.require("SB_sideTab",...

CSS

.SB_widget_tout-contain{
    /* container styles */
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    font-family: Helvetica, Arial, 'Lucida Grande', sans-serif;
}

.SB_widget_tout-head{
    /* header styles ("Soabox      Add and Idea")*/
    padding: 5px;
    line-height: 25px;
    color: white;
    background: #757575 url(http://indigo.dev.soapbox.co/assets/v3/img/sidebar-gradient.png) no-repeat center -150px;
    font-family: Helvetica, Arial, 'Lucida Grande', sans-serif;
    font-size: 14px;
    border-bottom: 1px solid #585858;
    font-family: Helvetica, Arial, 'Lucida Grande', sans-serif;
    cursor: pointer;
}

.SB_widget_tout-head .SB_button{
    /* [Add an Idea] */
    color: #D2D3D7;
    display: inline-block;
    font-family: Helvetica, Arial, 'Lucida Grande', sans-serif;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    line-height: 23px;
    padding: 0 5px;
    color: white;
    border: 1px solid #525357;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: #A4A6AD;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#B1B3B9), color-stop(100%,#8B8D93));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1b3b9', endColorstr='#8b8d93',GradientType=0 );
    font-family: Helvetica, Arial, 'Lucida Grande', sans-serif;
}

.SB_widget_tout-body{
    /* contains the profile image, idea, and thumbs */
    background-color:#fff;
}

/* Styles inside the body must be styled by the HitSend Team. Shoot an email to [email protected] */