JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <title>Panel
    </title>

    <style>
      body{
        background-image: url("main.jpg");
        opacity:40%;
        font-family: AlphaMaleModern;
        text-align:center;
        color:#fff;
        font-size: 26px;
      }
      .a{
        height:90%;
        width:45%;
      }
      .img{
        margin-top:20%;
        position:relative;
      }
      .list{
        float:right;
        position:absolute;
        border:lime solid;
        width:50%;
        z-index:-1;
        position:static;
        top:10%;
        height:90%;
      }
      #userlist{
        width:100%;
        opacity: 0.8;
        font-family:AlphaMaleModern;
        text-align:center;
        font-size:28px;
        height:100%;
      }
      .img:hover,#userlist:hover{
        opacity: 1;
      }
    </style>
    <script>
		function printr(ss)
		{
			switch (ss)
			{
				case "aa":
				alert("AA");
				break;
				case "b":
				alert("B");
				break;
				case "c":
				alert("C");
				break;
				case "d":
				alert("D");
				break;
			}
		}
    </script>
  </head>
  <body>
    <fieldset name="Users" class="a" style="float:right;">
      <legend>USERS
      </legend>
      <div id="user" class="user"  style="">
        <img src="https://i.stack.imgur.com/7A0Ky.png" class="img" alt="" usemap="#Map1" />
        <map name="Map1" id="Map1">
          <area alt="" title="" href="#" id="aa" onclick="printr('aa')" shape="poly" coords="200,8,16,10,104,108" />
          <area alt="" title="" href="#" id="b" onclick="printr('b')" shape="poly" coords="205,14,108,109,204,197" />
          <area alt="" title="" href="#" id="c" onclick="printr('c')" shape="poly" coords="8,201,98,110,8,15" />
          <area alt="" title="" href="#" id="d" onclick="printr('d')" shape="poly" coords="104,113,16,208,204,207" />
        </map>
        <div class="list"  >
          <select id="userlist" size="20">
            <option>
              
            </option>   
           ...