JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class="solo-figure">
  <div class="figure">
    <img src="https://i.stack.imgur.com/r472d.png" height="700">

    <div class="possessions" id="body_Torso">
    </div><!-- class="possessions" id="Torso"-->

    <div class="possessions" id="body_RightShoulder">
    </div><!-- class="possessions" id="RightShoulder"-->

    <div class="possessions" id="body_LeftShoulder">
    </div><!-- class="possessions" id="LeftShoulder"-->

    <div class="possessions" id="body_RightHand">
      <ul>
        <li>
          <div class="tooltip">Plastic Bag<span class="tooltipimage"><img class="zoom_small card" src="img/cards/items/BagPlastic.gif" /></span></div>
          <ul>
            <li>
              <div class="tooltip">Plastic Bag<span class="tooltipimage"><img class="zoom_small card" src="img/cards/items/BagPlastic.gif" /></span></div>
            </li>
            <li>
              <div class="tooltip">Canned Vegetables<span class="tooltipimage"><img class="zoom_small card" src="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="img/cards/items/BottlePlastic.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>
          </ul>
    </div><!-- class="possessions" id="RightHand"-->

    <div class="possessions" id="body_LeftHand">
      <ul>
        <li>
         ...

CSS

#body_Belt { border:none; left:100px; position:absolute; top:340px; }
    #body_Feet { border:none; left:100px; position:absolute; top:100px; }
    #body_LeftHand { border:none; left:500px; position:absolute; top:340px; }
    #body_LeftShoulder { border:none; left:100px; position:absolute; top:100px; }
    #body_RightHand { border:none; left:100px; position:absolute; top:340px; }
    #body_RightShoulder { border:none; left:100px; position:absolute; top:100px; }
    #body_Torso { border:none; left:100px; position:absolute; top:100px; }`

    div.figure { position:relative; width:auto; }
    div.possessions { text-align:left; position:absolute; }
    div.solo-figure { height:710px; margin:auto; }