JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<svg class="socialtemplate" width="26px" height="130px" viewBox="0 0 26 130">
	<path id="facebook_1" fill="#FFFFFF" d="M17,8h-2.3C14,8,14,8.8,14,9.2V11h3v2h-3v7h-3v-7H9v-2h2V9.5C11,7.6,12.8,6,14.7,6H17V8z"/>
	<path id="twitter_3" fill="#FFFFFF" d="M16.4,69h-2.7c-1.9,0-2.2-1.2-2.2-1.9c0-0.4,0-1.1,0-2.1H16c0.7,0,2,0,2-1.2c0-1.2-0.6-1.8-1.4-1.8h-5 c0-2-0.1-3.8-1.9-3.8c-0.7,0-1.3,0.2-1.5,0.9c-0.3,1-0.2,2-0.2,3c0,0.2,0,0.4,0,0.6c0,0.7,0,1.3,0,2c0,0.7,0,1.4,0,2.1 c0,4,3.6,5.1,4.3,5.1c0.7,0,3.4,0.1,3.9,0.1c0.5,0,1.9,0.1,1.9-1.3C18.1,69.3,17.1,69,16.4,69z"/>
	<path id="gplus_2" fill="#FFFFFF" d="M6.6,35.5c0,1.2,0.4,2,1.2,2.5c0.6,0.4,1.4,0.5,1.8,0.5c0.1,0,0.2,0,0.2-0.1c0,0-0.1,0.5,0.5,1.5h0 c-1,0-4.4,0.3-4.4,3c0,2.8,3.8,3,3.8,3c0,0,1.5,0,2.5-0.5c1.2-0.6,1.9-1.6,1.9-3.1c0-1.4-1-2.2-1.6-2.8c-0.4-0.4-0.8-0.7-0.8-1 c0-0.3,0.3-0.6,0.6-0.9c0.5-0.5,1.1-1.2,1.1-2.5c0-1.2-0.2-1.9-1.1-2.4c0.1-0.1,1.9-0.3,1.9-0.7V32h-3.7C10.3,32,6.6,32.1,6.6,35.5z M12.5,42.7c0.1,1.1-0.9,1.9-2.3,2c-1.5,0.1-2.7-0.5-2.7-1.7c0-0.5,0.2-1.1,0.7-1.5c0.5-0.4,1.1-0.7,1.8-0.7c0.1,0,0.2,0,0.2,0 C11.6,40.8,12.5,41.6,12.5,42.7z M11.6,34.7c0.4,1.3-0.2,2.6-1,2.8c-0.1,0-0.2,0-0.3,0c-0.8,0-1.6-0.8-1.9-1.9 c-0.2-0.6-0.2-1.2,0-1.7c0.2-0.5,0.5-0.9,0.9-1c0.1,0,0.2,0,0.3,0C10.6,33,11.2,33.4,11.6,34.7z M19,37v-2h-2v2h-2v2h2v2h2v-2h2v-2 H19z"/>
	<g id="email_5">
		<polygon fill="#FFFFFF" points="13,117 5,111 21,111"/>
		<path fill="#FFFFFF" d="M11.8,119.3L5,114.3v6.8c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-6.8l-6.8,5.1 C13.5,119.9,12.5,119.9,11.8,119.3z"/>
	</g>
	<path id="reddit_4" fill="#FFFFFF" d="M20.3,88.7c-0.7,0-1.4,0.4-1.8,0.9c-1.2-1-3-1.7-5-1.8l0.5-2.7l2.7,0.5c0.1,0.8,0.8,1.5,1.7,1.5 c1,0,1.7-0.8,1.7-1.7c0-1-0.8-1.7-1.7-1.7c-0.7,0-1.4,0.5-1.6,1.1l-3-0.6c-0.2,0-0.5,0.1-0.5,0.3l-0.7,3.3c-2.1,0.1-4,0.7-5.3,1.8...

CSS

body {
    background:white;
}
svg.socialtemplate {
    display:none;
}
svg.socialtemplate path{
    stroke:rgba(0,0,0,0);
}
div.share_dlg{
    position:absolute;
    padding: 20px 10px 10px 10px;
    box-sizing:border-box;
    height: 207px;
}
div.share_dlg>svg {
    stroke: #2c2c2c;
    stroke-width: 1.2px;
    fill: rgba(0,0,0,0.6);
    position: absolute;
    top:0;
    left: 0;
    z-index:-1;
}
.share_dlg .tab{
    font-family: "PT Sans Narrow";
    font-size: 30px;
    display: inline-block;
    margin-right:10px;
    margin-bottom:11px;
    padding-bottom: 2px;
    border-bottom-width:2px;
    color: #fff;
}
.share_dlg .tab:hover {
    color: #7e7e81;
    cursor: pointer;
}
.share_dlg.mode_share .tab.share, .share_dlg.mode_embed .tab.embed{
    color: #00b7f1;
    border-bottom-style:solid;
    border-bottom-color: #00b7f1;
    cursor: default;
}
div.textbox {
    border: 1px solid #7e7e81;
    background-color: #2f2f2f;
    border-radius:5px;
    font-family:"PT Sans";
    color: white;
    padding: 3px 6px;
    width: 480px;
    height: 85px;
    box-sizing:border-box;
    font-size: 14px;
    line-height: 18px;
}
.textbox span {
    color: #00b7f1;
}
div.socialpanel {
    position:absolute;
    width: 156px;
    height: 26px;
    overflow: visible;
    margin-left: -78px;
    left: 50%;
    bottom: 11px;
    /*box-shadow: 0 0 1px red inset;*/
}
div.socialbutton, div.copybutton {
    width:26px;
    height: 26px;
    margin: 0 1px;
    display: inline-block;
    cursor: pointer;
    perspective:1000px;
    perspective-origin:-350px 50%;
    -webkit-perspective:1000px;
    -webkit-perspective-origin:-350px 50%;
}
.panel{
    width:26px;
    height:26px;
    position:absolute;
    margin:0px;
    border-radius:3px;
    background: #7e7e81;
    transform-origin:50% 50% 13px;
    transition:transform 200ms linear;
    -webkit-transform-origin:50% 50% 13px;
    -webkit-transition:-webkit-transform 200ms linear;
}
.mode_embed .socialpanel {
    display:...

JavaScript

(function wrap(){
    function set_mode(mode){
        if (mode=='share')
        {
            $('.share_dlg').removeClass('mode_embed').addClass('mode_share');
            $('.textbox').attr('contenteditable', true);
            $('.textbox').html('Hey, I just watched <span contenteditable="false">a wonderful movie.mp4</span> with Hola direct streaming!');
        }
        else if (mode=='embed')
        {
            $('.share_dlg').removeClass('mode_share').addClass('mode_embed');
            $('.textbox').attr('contenteditable', true);
            $('.textbox').text('<iframe src="blahblah">bleh</iframe>');
        }
    }
    $('.tab').click(function(){
        set_mode($(this).attr('class').split(' ')[1]);
    });
    set_mode('share');
    $('.copybutton').click(function(){
        var theDiv=document.querySelector('.textbox');
        var r = document.createRange();
        r.selectNodeContents(theDiv);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(r);
        $('.copypanel>span').show();
        theDiv.focus();
    });
    $('.textbox').blur(function(){
        $('.copypanel>span').hide();
    });
})();