JSFiddle - React, Tailwind, and code Playground

by Manawe

HTML

<div id="petHelperHolder">
  <div class = "menu"></div>
      <div class = "pair">
        <div class="pet">
            <button class="breed">Feed</button>
            <div class="petPic"></div>
            <div class="hunger"></div>
            <button class="breed">Breed</button>
            <div class="happiness"></div>
        </div>
              <div class="pet">
            <button class="breed">Feed</button>
            <div class="petPic"></div>
            <div class="hunger"></div>
            <button class="breed">Breed</button>
            <div class="happiness"></div>
        </div>
    </div>
  
  
  
</div>

JavaScript

#petHelperHolder {
  width: 500px;
  min-height: 100px;
  height: auto;
  margin: auto;
  background: #2B3336;
  border-style: solid;
  border-color: #2B3336;
}
.pair{
 width:496px;
  position: absolute;

}

.pet{
  position: relative;
  border: 1px solid #3d3d3d;
  float : left;
  margin-top: 4px;
  margin-bottom: 4px;
  background: #666666;
  height:34px;
  width: 48%;
  vertical-align: middle;
  margin-left: 6px;
}
.petPic{
  background: #222;
  height: 34px;
  width: 34px;
  position: absolute;
}
.hunger{
  background: rgb(191, 76, 76);
  height:17px;
  width:80%;
}
.happiness{
  background: #01C763;
  height: 17px;
  width: 80%;
}
.breed{
  color: white;
  float: right;
  position: relative;
  border: none;
  background: #222;
  height: 17px;
  width: 25%;
}

.breed:hover{ 
  background: #3d3d3d;
}
.breed:click{ 
  background: #3d3d3d;
}