JSFiddle - React, Tailwind, and code Playground

by laurean0

HTML

NADA, solo JS y CSS

// VERSIÓN DEL CÓDIGO – v6.0

CSS

/********* 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;
}

/********* VISTO MENSAJE *********/
.vistoWS{
	width: 53px;
	height: 48px;
	border-right:1px solid #DED6CE;
	padding:0 8px;
	float:left;
}
.vistoWS .BtVisto{
	background: url(https://circuitos.info/_theme/_img/visto.png) no-repeat;
	width: 53px;
	height:...

JavaScript

// VERSIÓN DEL CÓDIGO – v6.0

var basePath = "http://localhost:27703/amigos/sis/whatsapp.php";
//var basePath = "https://circuitos.info/temp/whatsapp/v3/whatsapp.php";
//var basePath = "http://localhost/ws/v3/whatsapp.php";

// Mensaje de difusión: true = Leído | false = Recibido
var marcarLeido = true;
// var marcarLeido = false;

// Logo de Avanzar
$("._3auIg").prepend("<div id='logoSide'></div>");


/* CLICK EN EL USUARIO o EN EL LOGO AVANZAR*/
$('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>");

  
  
 // PERFIL VERIFICAR TRUE / FALSE
  var verificadoUrl = basePath + "?q=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="' + basePath + '?q=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>');

    // BOTON VISTO LISTA
    $("#enChuladaBar").append('<div class="vistoWS"><div class="BtVisto" title="Visto Comentario">VISTO</div></div>');  
    
    // ETIQUETAS: 
   $("#enChuladaBar").append('<div class="etiquetasWS"></div>');
    
   $( ".etiquetasWS" ).load( basePath,'q=etiquetas&name='+ name, function() {
     console.log("ETIQUETAS CARGADAS");
   });


  });

});

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

   ...