JSFiddle - React, Tailwind, and code Playground

by laurean0

CSS

/********* OCULTAR MENSAJES TEMPORAL? *********/
#side .m6ZEb {
	display: none;
}
/********* FONDO CELESTE *********/
._1FKgS {
    background-color: #00A4BF;
}
/********* LOGO AVANZAR *********/
#logoSide {
	background:url(https://circuitos.info/_theme/_img/logo-avanzar-117x59-2.png) no-repeat;
	width:117px;
	height:59px;
	position:absolute;
	left:70px;
	top:0;
}
/********* CONTENEDOR *********/
#enChuladaBar{
  background-color: #FBFBFB;
	border-bottom:1px solid #D7D0CA;
	border-right:1px solid #D7D0CA;
	border-left:1px solid #DBDBDB;
	border-top:1px solid #fff;
	height:48px;
	display:block;
	position:relative;
	z-index:2;
}
/********* PERFIL *********/
.perfilWS{
	width: 66px;
	height: 48px;
	border-right:1px solid #DED6CE;
	padding:0 8px;
	float:left;
}
.perfilWS a{
	background: url(https://circuitos.info/_theme/_img/perfil.png) no-repeat;
	width: 66px;
	height: 48px;
	display:block;
	text-decoration:none;
	text-indent:-9999px;
}

.perfilWS.OkVerificado a{
	background-position:0 0;
}
.perfilWS.OkVerificado a:hover{
	background-position:0 -100px;
}


.perfilWS.NoVerificado a{
	background-position:0 -200px;
}
.perfilWS.NoVerificado a:hover{
	background-position:0 -300px;
}

/********* GUARDAR TXT *********/
.guardarWS{
	width: 53px;
	height: 48px;
	border-right:1px solid #DED6CE;
	padding:0 8px;
	float:left;
}
.guardarWS .BtGuardar{
	background: url(https://circuitos.info/_theme/_img/guardar.png) no-repeat;
	width: 53px;
	height: 48px;
	display:block;
	text-decoration:none;
	text-indent:-9999px;
	background-position:0 -200px;
}
.guardarWS .BtGuardar:hover, .guardarWS.activo .BtGuardar:hover{
	background-position:0 0;
	cursor:pointer;
}
.guardarWS.activo .BtGuardar{
	background-position:0 -100px;
	cursor:pointer;
}

/********* ETIQUETA *********/
.etiquetasWS{
	height: 32px;
	padding:16px 0 0 16px;
	float:left;
	font-size:11px;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
}
.etiqueta{
	background-color:#999;
	-webkit-border-radius:...

JavaScript

var urlconfig = "https://circuitos.info/temp/whatsapp/v2/";

/* CLICK EN EL USUARIO */
$('body').on('click', '._2wP_Y, #logoSide', function(e) {

  if ($('#enChuladaBar').length > 0) {
    return;
  }

  $('#enChuladaBar').data('allowSave', 'false');


  var name = $(this).find("._1wjpf").attr('title');


  $("#main ._3zJZ2").before("<div id='enChuladaBar'></div>");


  if ($('#enChuladaBar').data('logoListo') != "true") {
    $('#enChuladaBar').data('logoListo', 'true');
    // Logo de Avanzar
    $("._3auIg").prepend("<div id='logoSide'></div>");
  }
  
  var verificadoUrl = "https://circuitos.info/temp/whatsapp/v2/verificado/?name=" + name;

  $.get(verificadoUrl, function(data) {

    //console.info(data);

    var vClass = 'NoVerificado';
    var vTitle = 'Perfil No Verificado';

    if (data == "TRUE") {
      vClass = 'OkVerificado';
      vTitle = 'Perfil Verificado';
    }

    var avatar = '<div class="perfilWS ';
    avatar += vClass + '"><a href="https://circuitos.info/temp/whatsapp/v2/perfil/?name=' + name;
    avatar += '" target="_blank" title="' + vTitle + '">PERFIL</a></div>';

    $("#enChuladaBar").append(avatar);


    // BOTON HABILITAR GUARDAR
    $("#enChuladaBar").append('<div class="guardarWS"><div class="BtGuardar" title="Guardar Comentario">GUARDAR</div></div>');

    // ETIQUETAS: 

   $( ".etiquetasWS" ).load( "https://circuitos.info/temp/whatsapp/v2/etiquetas/","name="+ name, function() {
     console.log("ETIQUETAS CARGADAS");
   });


  });

});

/* CLICK EN EL BOTON GUARDAR */
$('body').on('click', '.guardarWS', function(e) {
  if ($('#enChuladaBar').data('allowSave') == "true") {

    $('#enChuladaBar').data('allowSave', 'false');
    $(this).removeClass('activo');
    $('.msg-btn-save').remove();

  } else {

    $('#enChuladaBar').data('allowSave', 'true');
    $(this).addClass('activo');

  }
});


/* CLICK EN EL MENSAJE */
$('body').on('click', '.message-in', function(e) {

  if ($(this).data('yasta') == 'si') {
    return;
 ...