JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class="solo-figure">
  <div class="figure">
    <img class="main-image" src="https://www.ocetacea.net/BoyAndDog/img/figure.gif">

    <div class="possessions" id="body_RightHand">
      <ul>
        <li>
          <div class="tooltip">Plastic Bag<span class="tooltipimage"><img class="zoom_small card" src="https://www.ocetacea.net/BoyAndDog/img/cards/items/BagPlastic.gif" /></span></div>
          <ul>
            <li>
              <div class="tooltip">Plastic Bag<span class="tooltipimage"><img class="zoom_small card" src="https://www.ocetacea.net/BoyAndDog/img/cards/items/BagPlastic.gif" /></span></div>
            </li>
            <li>
              <div class="tooltip">Canned Vegetables<span class="tooltipimage"><img class="zoom_small card" src="https://www.ocetacea.net/BoyAndDog/img/cards/items/CannedVegetable.gif" /></span></div>
            </li>
            <li>
              <div class="tooltip">Canned Meat<span class="tooltipimage"><img class="zoom_small card" src="img/cards/items/CannedMeat.gif" /></span></div>
            </li>
            <li>
              <div class="tooltip">Plastic Bottle<span class="tooltipimage"><img class="zoom_small card" src="img/cards/items/BottlePlastic.gif" /></span></div>
            </li>
            <li>
              <div class="tooltip">Plastic Bottle<span class="tooltipimage"><img class="zoom_small card" src="https://www.ocetacea.net/BoyAndDog/img/cards/items/BottlePlastic.gif" /></span></div>
            </li>
            <li>
              <div class="tooltip">Plastic Bottle<span class="tooltipimage"><img class="zoom_small card" src="https://www.ocetacea.net/BoyAndDog/img/cards/items/BottlePlastic.gif" /></span></div>
            </li>
          </ul>
        </li>
      </ul>
    </div><!-- class="possessions" id="RightHand"-->

    <div class="possessions" id="body_LeftHand">
      <ul>
        <li>
          <div class="tooltip">Pump Action Shotgun<span class="tooltipimage"><img class="zoom_small card"...

CSS

ul {
     list-style-type: none;
     margin: 0px 0px 0px 15px;
     padding: 0px;
   }   
   
   #body_Belt {
     border: none;
     left: 100px;
     position: absolute;
     top: 340px;
   }

   .main-image {
     border: solid 2px black;
     width: 50%;
     margin: auto;
   }

   #body_LeftHand {
     background: salmon;
     border: none;
     left: 500px;
     position: absolute;
     top: 340px;
   }

   #body_RightHand {
     border: none;
     left: 100px;
     position: absolute;
     background: lightblue;
     top: 340px;
   }

   div.figure {
     position: relative;
     display: flex;
     background: pink;
     width: auto;
   }

   div.possessions {
     text-align: left;
   }

   .tooltip {
     border: 1px dotted black;
     cursor: pointer;
     display: inline-block;
     position: relative;
   }

   .tooltipimage {
     position: absolute;
     visibility: hidden;
     z-index: 1;
   }

   .tooltip:hover .tooltipimage {
     margin-top: -75px;
     visibility: visible;
   }

   .zoom_small {
     transition: transform .2s;
     width: 88px;
   }

   .zoom_small:hover {
     transform: scale(3.0);
     z-index: 999;
   }