JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Interface 1 </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- stylesheets -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css" />
  
</head>

<body class="body">
    <div class="profile-img-container">
        <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
        <div class=" icon frown"><i class="fa fa-frown-o fa-2x" aria-hidden="true"></i></div>
     
    </div>
</body>

</html>

CSS

body{
	 font: bold 11px sans-serif;
}
.label{
	opacity: 1;
	font: 10px sans-serif;
	float:left;
	margin:2px;
    padding:2px;
    border-radius: 2px;
    border-width: thin;
    border-color: #5F5F5F;
    border-style: solid;

}
.profile-img-container {
    position: relative;
    width:500px;
}

.form{
	position: absolute;
	padding:2px;
	background:#f7f2ee;
	border-radius: 10px;
	border-color: #5F5F5F;
	border-width: thin;
	width:110px;
	height:150px;
	border-style: solid;
	top: 92%;  
	left: 80%;
	transform: translate(-15%, -110%);
	display: none;
}

.fa-thumbs-down{
	position: absolute;
    top: 92%;  
    left: 78%;
    transform: translate(-45%, -45%);
    display: none;
}

.fa-frown-o{
    position: absolute;
    top: 92%;  
    left: 83%;
    transform: translate(-45%, -45%);
    display: none;
}
.fa-smile-o {
    position: absolute;
    top: 92%;  
    left: 88%;
    transform: translate(-45%, -45%);
    display: none;
}
.fa-thumbs-up{
	position: absolute;
    top: 92%;  
    left: 93%;
    transform: translate(-45%, -45%);
    display: none;
}
.fa-heart {
    position: absolute;
    top: 92%;  
    left: 98%;
    transform: translate(-45%, -45%);
    display: none;
}

.fa:hover {
color:#267bfb;
}

.profile-img-container:hover img {
    opacity: 0.5;    
}

.profile-img-container:hover i {
    display: block;
    z-index: 500;
}
/*.profile-img-container:hover div{
    display: block;
    z-index: 500;
}
*/

JavaScript

var keyword =["Director", "length", "Actors/Actresses","Genre","plot"];
   
   $( ".profile-img-container" ).on( "mouseleave", function() {

     $(".form").remove();
   })

   $(".frown").click(function(){
      $(".form").remove();
      $(".profile-img-container").append("<div class='form'></div>")
      $(".form").slideDown();
      $( ".form" ).append( "<p>Sorry. Why Sad?</p>" );
      loadKeywords();
    });



   function loadKeywords(){
      for(i=0;i<keyword.length;i++){
        $('<div/>', {
            class:"label",
            id:"label_"+i,
            height: "15",
            html:keyword[i]
        }).appendTo(".form");
      }
   }

    $(".profile-img-container").on('click', '.label', function() {
       alert("lalala");
    });

    $(".form").on('click', '.label', function(e) {
      alert('you click on yellow');
        
    });