JSFiddle - React, Tailwind, and code Playground

HTML

<div class="infoimg" style="float: left;"><img src="http://i.imgur.com/W1FxGnH.png" alt="Lorem ipsum" width="62" height="61">
<div class="infobox"><span>Lorem ipsum</span>
    <ul style="padding-top: 15px;padding-left:5px; margin-left: 5px;list-style-type: disc;">
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Consectetur adipiscing elit.</li>
      <li>Sed maximus magna vel facilisis vulputate.</li>
      <li>Mauris sit amet elit sit amet ipsum.</li>
    </ul>
  </div>
</div>

CSS

.infobox {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -ms-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
  position: absolute;
  top: 0;
  left: 72px;
  right: 0;
  width: 200px;
  height: 110px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #000;
  color: black;
  font-family: Verdana;
  font-size: 9px;
  padding: 10px 10px;
  line-height: 12px;
}

.infoimg:hover div.infobox {
  opacity: 1;
  position: absolute;
  top: 0;
  left: 72px;
  right: 0;
  width: 200px;
  height: 110px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #000;
  color: black;
  font-family: Verdana;
  font-size: 9px;
  padding: 10px 10px;
  line-height: 12px;
}

.infoimg {
  width: 62px;
  height: 61px;
}