JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<style>
#container{
  display: inline-block;
  width: 500px;
  border: solid 1px;
  text-align: center;
}
#si_but{
  cursor:  pointer;
  padding:  14px 14px;  
  font-size: 14px;
  border: solid 1px;
  margin: 0px;
  display: inline-block;
}
#su_but{
  cursor:  pointer;
  padding:  14px 14px;  
  font-size: 14px;
  border: solid 1px;
  margin: 0px;
  display: inline-block;

}
#hold_button{
  display: inline-block;
  border: solid 1px;
  text-align: center;
  margin: 0 auto;
  padding: 0px;
    font-size: 0;
}
</style>


<div id="container">
  <divi id="hold_button">
    <p id='si_but' class='blue_but   radius_left  medium_white'>SignIn</p>
    <p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
  </div>
</div>

</body>