JSFiddle - React, Tailwind, and code Playground

by Mustafa Oeztuerk

HTML

<div class="emoticon">
    <div class="emoticon_click" data-id="1">
        <img src="http://megaicons.net/static/img/icons_sizes/8/178/512/emoticons-wink-icon.png" width="30px" height="30px">
            
    </div>
    <div class="user-container" data-upgraded></div>
</div>
    
<div class="emoticon">
    <div class="emoticon_click" data-id="2">
        <img src="http://megaicons.net/static/img/icons_sizes/8/178/512/emoticons-wink-icon.png" width="30px" height="30px">            
    </div>
    <div class="user-container" data-upgraded></div>
</div>
    
    
<div class="emoticon">
    <div class="emoticon_click" data-id="3">
        <img src="http://megaicons.net/static/img/icons_sizes/8/178/512/emoticons-wink-icon.png" width="30px" height="30px">
            
    </div>
    <div class="user-container" data-upgraded></div>
    
</div>

CSS

.icon_b {
  width:30px;
  height:30px;
  background-color:red;
  bottom:5px;
  right:105px;
  position:absolute;
}
.emoticon {
    width:30px;
    height:30px;
    float:left;
}
.icon_c {
  width:30px;
  height:30px;
  background-color:red;
  bottom:5px;
  left:5px;
  position:absolute;
}
.clickficon {
  width:30px;
  height:30px;
  background-color:blue;
  float:left;
}
.emicon-menu {
  
  position: absolute;
  margin-top:150px;
  left:0;    /*changed here*/
  width:300px;  /*changed here*/
  z-index: 1000;
  font-size: 14px;
  text-align: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
  background-clip: padding-box;
}
.emicon-menu ul {
   min-width: 160px;
   padding: 5px 0;
   margin: 2px 0 0;
   list-style: none;
   position:relative;
}

.emicon-menu.eactive {
  opacity:1;
}

.emicon-menu li {
  color:#666;
  margin: 0;
  padding: 5px 0 5px 15px;
  height: 24px;
  list-style: none;
  display: inline;
}
.emicon-menu li {
  -webkit-transition: all 0.3s ease;
  transform: translateY(-30%);
}
.emicon-menu.eactive li {
  opacity: 1; 
  transform: translateY(0px);
}
.panels {
  float:left;
  width:300px;
  background-color:red;
  background-color: #444444;
  padding: .5em;
    color:#ffffff;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
}
/*TAB STYLE STARTED*/
.toolbar {
    height: 64px;
    background: red;
}
.MaterialTabs ul li {
    float: left;
    width: 50px;
    background-color:red;
  color:red;
    margin-left:5px;
}

.MaterialTabs a {
    position: relative;
    color: #000000 !important;
    text-decoration: none;
    display: block;
    width: auto;
    height: 22px;
    text-align: center;
    line-height: 12px;
    font-weight: 400;
    font-size: 12px;
    color: red;
    overflow: hidden;
}

.MaterialTabs .pactive a {
    color: #000000 !important;
}

.MaterialTabs .pactive a:after {
   ...

JavaScript

var response = '<div class="emicon-menu MaterialTabs"> <ul> <li class="tab active"> <a href="#starks-panel1"> TAB1 </a> </li> <li class="tab"> <a href="#lannisters-panel1"> TAB2 </a> </li> <li class="tab"> <a href="#targaryens-panel1"> TAB3 </a> <span> </span></li> </ul> <div class="panels"> <div id="starks-panel1" class="panel pactive"> TAB1 CONTENT </div>  <div id="lannisters-panel1" class="panel"> TAB2 CONTENT </div> <div id="targaryens-panel1" class="panel"> TAB3 CONTENT </div> </div> </div>';

$(document).ready(function () {

    function showProfileTooltip(e, id) {
        //send id & get info from get_profile.php 
        $.ajax({
            url: '/echo/html/',
            data: {
                html: response,
                delay: 0
            },
            method: 'post',
            success: function (returnHtml) { 
                e.find('.user-container').html(returnHtml).promise().done(function () {
                    $('.emoticon').addClass('eactive');
                    componentHandler.register({
                    constructor: MaterialTabs,
                    classAsString: 'MaterialTabs',
                    cssClass: 'MaterialTabs'
                    });
                });
            }
        });

    }
    // instead of this
    /*
    $('body').on('click', '.emoticon', function(e) {
    var id = $(this).find('.emoticon_click').attr('data-id');
    showProfileTooltip($(this), id);
});
    $(this).on( "click", function() {
  $(this).find('.user-container').html("");
});
*/
    
    // we need this
    
    //$('body').on('click', '.emoticon', function(e) {
    $('body').on('click', '.emoticon_click', function(e) {
        // clear all user container at the begining of this click event
        $('body').find('.user-container').html("");
                
        // find id
    	var id = $(this).attr('data-id');

        // find the parent, which also contains sibling
        // user-container
        var parent = $(this).parent()

 ...