JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<div id="texto" style="position:absolute; left:25%;"><input type="text" class="texto" /></div>
<div id="neon">
   <div id="neon-title"><img src="https://cdn1.iconfinder.com/data/icons/fatcow/16/select_by_color.png"/></div>
   <div id="neon-content">
<table>
   <tbody>
       <tr>
          <td><div id="copyright"></div></td>
            <td style="cursor:default;font-size:11px;color:#000;font-weight:bold;" title="Efeito Neon - PunBB Community  www.punbb.forumeiros.com">Efeito Neon</td>
        </tr>
       <tr>
           <td><div id="vermelho"></div></td>
            <td class="vermelho" style="cursor:pointer;font-size:12px;color:#dc0000;text-shadow:#dc0000 0 0 3px;">Neon Vermelho</td>
        </tr>
       <tr>
           <td><div id="verde"></div></td>
            <td class="verde" style="cursor:pointer;font-size:12px;color:#61cf00;text-shadow:#61cf00 0 0 3px;">Neon Verde</td>
        </tr>
       <tr>
           <td><div id="laranja"></div></td>
            <td class="laranja" style="cursor:pointer;font-size:12px;color:#cf7f00;text-shadow:#cf7f00 0 0 3px;">Neon Laranja</td>
        </tr>
    </tbody>
</table>
    </div>
</div>

CSS

@charset "utf-8";
/* CSS Document */
body{
   font: normal 12px "Trebuchet MS",tahoma,helvetica,arial,sans-serif;
}
#copyright{
   background: url('http://punbb.informer.com/favicon.ico') no-repeat;
   width: 16px;
   height: 16px;
}
#neon-title{
   background: url('https://cdn1.iconfinder.com/data/icons/fatcow/16/select_by_color.png') no-repeat;
   text-align: center;
   color: #999;
   cursor: pointer;
   width: 16px;
   height: 16px;
   -webkit-background-clip: padding-box;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
   background: #FFF;
   background-clip: padding-box;
   border: 1px solid #CCC;
   border-radius: 2px;
   box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
   color: #333;
   line-height: 1;
   padding: 4px;
   z-index: 4000;
}
#neon-content{
   -webkit-background-clip: padding-box;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
   background: #FFF;
   background-clip: padding-box;
   border: 1px solid #CCC;
   border-radius: 2px;
   box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
   color: #333;
   line-height: 1;
   padding: 10px;
   position: absolute;
   z-index: 4000;
   display: none;
}
/* CORES */
#vermelho{
   background: #dc0000;
}
#vermelho,v{
   width: 10px;
   border-radius: 2px;
   height: 10px;
   float: ;
   color: #dc0000;
   cursor: pointer;
}
#verde,ve{
   width: 10px;
   border-radius: 2px;
   height: 10px;
   float: ;
   color: #61cf00;
   background: #61cf00;
   cursor: pointer;
}
#laranja,lr{
   width: 10px;
   border-radius: 2px;
   height: 10px;
   float: ;
   color: #cf7f00;
   background: #cf7f00;
   cursor: pointer;
}

JavaScript

$(document).ready(function(){
   $("#neon-title").click(function(){
      $("#neon-content").stop().slideToggle(300);
   });
});
$(document).ready(function(){
$(".vermelho,#vermelho").click(function(){$(".texto").val('<v>' + jQuery('.texto').val() + '</v>');});
$(".verde,#verde").click(function(){$(".texto").val('<ve>' + jQuery('.texto').val() + '</ve>');});
$(".laranja,#laranja").click(function(){$(".texto").val('<lr>' + jQuery('.texto').val() + '</lr>');});
});