JSFiddle - React, Tailwind, and code Playground

HTML

<div class="headertop"> 
    
    <div class="right1">right 1</div>  
    <div class="right2">right 2</div> 
    <div class="centerblock">Centered</div> 

    

</div>

CSS

.headertop {  width:100%;   background:black; text-align:center; } 

.centerblock {  color:white;  text-align:center;  background:red;  width: 200px; margin:0 auto;} 


.right1, .right2 {  color:white;  float:right;   width:100px;  background:green; }