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 class="user-container"></div>
    </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 class="user-container"></div>
    </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 class="user-container"></div>
    </div>
    
</div>

CSS

.icon_b {
  width:30px;
  height:30px;
  background-color:red;
  bottom:5px;
  right:305px;
  position:absolute;
}
.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:350px;
  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;
  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;
}

.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 {
    height: 2px;
    width: 100%;
    display: block;
    content: " ";
    bottom: 0px;
    left: 0px;
   ...

JavaScript

var response = '<div class="emicon-menu MaterialTabs" data-upgraded> <ul> <li class="tab active"> <a href="#starks-panel1"> Starks </a> </li> <li class="tab"> <a href="#lannisters-panel1"> Lannisters </a> </li> <li class="tab"> <a href="#targaryens-panel1"> Targaryens </a> <span> </span></li> </ul> <div class="panels"> <div id="starks-panel1" class="panel pactive"> a </div>  <div id="lannisters-panel1" class="panel"> b </div> <div id="targaryens-panel1" class="panel"> c </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');
                });
            }
        });

    }
    function hideProfileTooltip() {
        $('.the-container').removeClass('eactive');
    }
    $('body').on('click', '.emoticon', function(e) {
    var id = $(this).find('.emoticon_click').attr('data-id');
    showProfileTooltip($(this), id);
});
if (!response.is(e.target) && response.has(e.target).length === 0)  {
        response.hide();
    }
});

var componentHandler = function() {
  'use strict';

  var registeredComponents_ = [];
  var createdComponents_ = [];

  function findRegisteredClass_(name, opt_replace) {
    for (var i = 0; i < registeredComponents_.length; i++) {
      if (registeredComponents_[i].className === name) {
        if (opt_replace !== undefined) {
          registeredComponents_[i] = opt_replace;
        }
        return registeredComponents_[i];
      }
    }
    return false;
  }

  function upgradeDomInternal(jsClass, cssClass) {
    if (cssClass === undefined) {
      var registeredClass =...