JSFiddle - React, Tailwind, and code Playground

by sungsoonz

HTML

<div class="ambiance-rows">
  <div class="ambiance-row " data-reactid=".6.0.3.2.3.$16">
    <div class="play" data-reactid=".6.0.3.2.3.$16.1">
      <i class="fa fa-play stopped" data-reactid=".6.0.3.2.3.$16.1.0"></i>
    </div>
    <div class="ambiance-file" data-reactid=".6.0.3.2.3.$16.2">
      <div class="edit">
        <span class="exit">X</span>
      </div>
      <div class="row-signal Vocal" data-reactid=".6.0.3.2.3.$16.2.0"></div>
      <div class="file-name" data-reactid=".6.0.3.2.3.$16.2.1">en riantinnna</div>
    </div>
  </div>
  <div class="ambiance-row " data-reactid=".6.0.3.2.3.$16">
    <div class="play" data-reactid=".6.0.3.2.3.$16.1">
      <i class="fa fa-play stopped" data-reactid=".6.0.3.2.3.$16.1.0"></i>
    </div>
    <div class="ambiance-file" data-reactid=".6.0.3.2.3.$16.2">
      <div class="edit">
        <span class="exit">X</span>
      </div>
      <div class="row-signal Vocal" data-reactid=".6.0.3.2.3.$16.2.0"></div>
      <div class="file-name" data-reactid=".6.0.3.2.3.$16.2.1">flippt fdt</div>
    </div>
  </div>
  <div class="ambiance-row " data-reactid=".6.0.3.2.3.$16">
    <div class="play" data-reactid=".6.0.3.2.3.$16.1">
      <i class="fa fa-play stopped" data-reactid=".6.0.3.2.3.$16.1.0"></i>
    </div>
    <div class="ambiance-file" data-reactid=".6.0.3.2.3.$16.2">
      <div class="edit">
        <span class="exit">X</span>
      </div>
      <div class="row-signal Vocal" data-reactid=".6.0.3.2.3.$16.2.0"></div>
      <div class="file-name" data-reactid=".6.0.3.2.3.$16.2.1">long long name</div>
    </div>
  </div>
  <div class="ambiance-row " data-reactid=".6.0.3.2.3.$16">
    <div class="play" data-reactid=".6.0.3.2.3.$16.1">
      <i class="fa fa-play stopped" data-reactid=".6.0.3.2.3.$16.1.0"></i>
    </div>
    <div class="ambiance-file" data-reactid=".6.0.3.2.3.$16.2">
      <div class="edit">
        <span class="exit">X</span>
      </div>
      <div class="row-signal Vocal"...

CSS

body {
          background: #fff;
        }
        .ambiance-rows {
          display: inline-block;
          margin-left: 50px;
        }
        .ambiance-row.hover .edit {
          opacity: 1;
        }
        .ambiance-row.hover {
          z-index: 0;
        } 
        .ambiance-row .edit {
          z-index: -1;
          background-color: white;
          transition: opacity 0.1s linear;
          opacity: 0;
          position: absolute;
          height: 40px;
          top: -8px;
          left: -100px;
          right: -80px;
          border-radius: 25px;
          box-shadow: 0 0 4px 0 rgba(0,0,0,0.36);
        }
        
        .exit {
          position: absolute;
          right: 7px;
          top: 7px;
          font-size: 20px;
          color: gray;
        }
        
        .exit:hover {
          color: purple;
        }
        
        .ambiance-row .play {
          display: inline-block;
          border: solid 1px #5b98cd;
          border-radius: 50%;
          width: 25px;
          height: 25px;
          line-height: 25px;
          margin: 0 5px;
          vertical-align: middle;
          cursor: pointer;
          text-align: center;
        }
        
        .ambiance-row .ambiance-file {
          position: relative;
          font-family: 'Open Sans', Arial, sans-serif;
          border: solid 1px #e6e5e5;
          border-bottom-width: 2px;
          border-radius: 15px;
          margin: 10px 5px;
          padding: 0 10px 0 10px;
          text-align: start;
          color: #4f4a4a;
          display: inline-block;
          line-height: 25px;
          height: 25px;
          vertical-align: middle;
          cursor: pointer;
        }
        
        .ambiance-row .ambiance-file .file-name {
          height: 100%;
          font-size: 13px;
          display: inline-block;
          vertical-align: top;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
         ...

JavaScript

$(document).ready(function() {
	$(".ambiance-row")
  	.hover(function() {
    
    	var self = this;
      hovertimer = setTimeout(function() {
          $(self).addClass('hover');
      }, 150);
    },function() {
    	clearTimeout(hovertimer);
    	$(this).removeClass('hover');
  	}
  );
  /*  
	$(".ambiance-row")
  	.on('mouseenter', function(e) {
    	$(this).data("initcoords", { x: e.clientX, y: e.clientY });
    })
  	.on('mouseover', function(e) {
    
    	var initCoords = $(this).data("initcoords") || { x: 0, y: 0 };
        
        if (e.clientX === initCoords.x && e.clientY === initCoords.y) {
   
            $(this).addClass('hover');
            $(this).data('initcoords', {x:-1, y:-1});
        }
		})
    .on('mouseout', function(e) {
    	$(this).removeClass('hover');
   	});
	*/
});