JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body {background-color: limegreen;}

.rightmenubtn01, .rightmenubtn02, .rightmenubtn03, .rightmenubtn04, .rightmenubtn05{
  border: none;
  cursor: pointer;
  color: white;
  font-family: "focim";
  font-size: 17px;
  width:100%;
  line-height: 38px;
  text-align: left;
  padding-left: 20px !important;
  border-bottom: solid 1px white;
  background-color: transparent;
}

.right_content02, .right_content03 {
  display: none;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  z-index: 1;
}
    .right_content02 a, .right_content03 a {border-bottom: solid 1px #00765a;}

.right_content02 a, .right_content03 a{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.rightmenu01 a:hover, .rightmenu02 a:hover, .rightmenu03 a:hover, .rightmenu04 a:hover, .rightmenu05 a:hover{
    background-color: #ddd;
    }

.show {display: block;}
.right_img button:focus {outline:0; background-color: rgba(0,0,0,0.5);}
    .right_img button:hover {background-color: rgba(255,255,255,0.3);}

    .right_img img {
        float: right;
        padding:6px 16px 6px 0;
    }
    
.right_img button {
    padding: 0;
    padding-left: 10px;
    border-radius: 0;
}

</style>
</head>
<body>
<div class="right_img">
<div class="rightmenu02">
  <button onclick="myFunction1()" class="rightmenubtn02">Button<img...