JSFiddle - React, Tailwind, and code Playground

by Dinocanid

HTML

<button class='fightbtn'>Fight</button>

<div id='battleholder'>
  <div class='grid-container'>
    <div class='item1'>
      <img src='http://atrocity.mysidiahost.com/picuploads/petinfoiconsmaller.png' style='position:relative; left:-200px;'>
      <p>
        <b>Hit Points</b></br>
        <div id='healthBar' style='margin-left: auto; margin-right: auto;'>
          <div id='healthInner' style='width:100%;'></div>
        </div>
        <b>Magic Points</b></br>
        <div id='magicBar' style='margin-left: auto; margin-right: auto;'>
          <div id='magicInner' style='width:100%;'></div>
        </div>
        <b>Experience Points</b></br>
        <div id='expBar' style='margin-left: auto; margin-right: auto;'>
          <div id='expInner' style='width:100%;'></div>
        </div>
      </p>
    </div>
    <div class='item2'>
      <h2>{$griff->name} - Lv {$griff->currentlevel}</h2>
      <img src='{$griff->imageurl}'>
      <p>
        <div class='dropdown'>
          <span><b><u>Fight!</u></b></span>
          <div class='dropdown-content'>
            <button class='choosemove' data-spell='bite'>{$atk_name}!</button></br>
            <button class='choosemove' data-spell='tackle'>Tackle!</button>
            <button class='choosemove' data-spell='trick'>Trick!</button></br>
            <button id='Taunt'>Taunt!</button>
          </div>
        </div> |
        <div class='dropdown'>
          <span><b><u>Info</u></b></span>
          <div class='dropdown-content'>
            <div id='griffsense'>Sense: {$sense}</div>
            </br>
            <div id='griffspeed'>Speed: {$speed}</div>
            </br>
            <div id='griffstamina'>Stamina: {$stamina}</div>
            </br>
            <div id='griffstrength'>Strength: {$strength}</div>
            </br>
            <div id='griffmagic'>Magic: {$magskill}</div>
            </br>
            <div id='gevade'>Evasion: {$gdodge}</div>
            </br>
            <div id='gstate'>State:...

CSS

#battleholder {
  width: 870px;
  height: 300px;
}

/* battleholder is fixed in centre of screen, empty. 
the battle scene is loaded into it, with BG and relative position, so divs inside can be positioned absolutely */

#healthBar, #enhealthBar {width:200px;height:20px;border:1px solid grey;border-radius:5px;padding:1px;text-align:left;background-color: white;}
#healthInner, #enhealthInner {height:100%;width:100%;border-radius:5px;background-color: red;}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    left: -75px;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'menu header right'
    'menu main right'
    'menu footer right';
  grid-gap: 10px;
  background-color: #c4c4c4;
  padding: 10px;
  border: 5px solid grey;
  border-radius: 10px;
  box-sizing: border-box;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
}

#reports {width:400px;height:100px;padding:10px;margin-top:0px;margin-bottom:0px;margin-left:auto;margin-right:auto;border:2px solid black;border-radius:4px;background-color:white; overflow:auto;}

JavaScript

$('.fightbtn').click(function() {
  $('#battleholder').toggle();
});

$('.dialogue').click(function() {
  $('.statusholder,.moveholder').fadeOut(500);
});
$('.notdialogue').click(function() {
  $('.statusholder,.moveholder').fadeIn(500);
});