JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first" class="qtip-pos-lc">
<div class="videoFlyOut">
  <div class="pointer"></div>
  <div class="pointerBorder"></div>
  <div class="info">
    <div class="logo"></div>
    <button class="htmlPlay" data-uuid="uuid"></button>
    <h5 class="bubble-name">Why does Cristiano Ronaldo choose to work with Her...</h5>
    <div class="time">3/31/14</div>
    <div class="date">1:02</div>
    <div class="desc">The first six months of the partnership was spent reviewing the foods Cristiano Ronaldo ate throughout the day, and the drinks and supplements he used while on the pitch and after ...</div>
  </div>
</div>
</div>
<div id="second" class="qtip-pos-rc">
<div class="videoFlyOut">
  <div class="pointer"></div>
  <div class="pointerBorder"></div>
  <div class="info">
    <div class="logo"></div>
    <button class="htmlPlay" data-uuid="uuid"></button>
    <h5 class="bubble-name">Why does Cristiano Ronaldo choose to work with Her...</h5>
    <div class="time">3/31/14</div>
    <div class="date">1:02</div>
    <div class="desc">The first six months of the partnership was spent reviewing the foods Cristiano Ronaldo ate throughout the day, and the drinks and supplements he used while on the pitch and after ...</div>
  </div>
</div>
</div>

CSS

/* arbitrary container positions */
#first {
  top: 20px;
  left: 40px;
}

#second {
  top: 190px;
  left: 40px;
}

/* begin required css */
div.videoFlyOut div.logo {
  background: url(//video.herbalife.com/css/playlist-sprite.png);
}
div.videoFlyOut * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
}
div.videoFlyOut {
    position: relative;
    background: #fff;
}
div.videoFlyOut {
    position: relative;
    text-align: left;
    padding: 0;
    top: -5px;
    width: 256px;
    height: 156px;
    color: #515151;
    border-top: solid 1px #ccc;
    border-right: solid 1px #666;
    border-left:solid 1px #ccc;
    border-bottom: solid 1px #666;
    border-radius: 10px;
    box-shadow: 0px 1px 2px rgba( 0,0,0,0.3 );
}
/*
  Play button for mobile, since there is no mouseover on touch devices, this button should be available to replace the "click" action on the thumbnails (see the behavior at video.herbalife.com).  This will need a class on the body element indicating the play button should be visible, replace isMobile with your preferred selector:
 */

body.isMobile div.videoFlyOut button.htmlPlay {
  display: block;
}
div.videoFlyOut button.htmlPlay {
    display: none;
    border: none;
    border-style:none;
    outline: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    background-position: -0px -60px;
    right: 0;
    background-color: transparent;
}
div.videoFlyOut button.htmlPlay:hover {
    background-position: -40px -60px;
}
div.videoFlyOut button {
    height: 30px;
    width: 40px;
    background-position: 0 -60px;
    background-color:transparent;
}
div.videoFlyOut div,
div.videoFlyOut button {
    position: absolute;
}
div.videoFlyOut div.logo {
    top: -5px;
    left: -3px;
    width: 158px;
    height: 24px;
    background-position: 0px -120px;
}
div.videoFlyOut h5 {
position: absolute;
font-weight: bold;
top: 23px;
font-size: 13px;
line-height:...