JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="officeBubble">
 <div class="left">
     <span class="glyphicon glyphicon-pencil icon" title="Edit"></span>  <span class="glyphicons glyphicons-copy icon" title="Copy"></span>
 <span class="glyphicons glyphicons-paste icon" title="Paste"></span>
 <span class="glyphicon glyphicon-bold icon" title="Bold"></span>
 <span class="glyphicon glyphicon-italic icon" title="Italic"></span>
 <span class="glyphicon glyphicon-text-color icon" title="Underline"></span>
 
    </div>    
  <div class="center">   
     <span class="glyphicons glyphicons-text-smaller icon" title="Decrease Font"></span>
   <span class="glyphicons glyphicons-text-bigger icon" title="Encrease Font"></span>    
      
     <span class="glyphicons glyphicons-table icon" title="Merge Down"></span>
   <span class="glyphicons glyphicons-table icon" title="Merge Right"></span>   
    </div>  
    <div class="right"> <span class="glyphicon glyphicon-align-left icon" title="Align Left"></span>  
        <span class="glyphicon glyphicon-align-center icon" title="Align Center"></span>
 <span class="glyphicon glyphicon-align-right icon" title="Align Right"></span>
 <span class="glyphicon glyphicon-object-align-top icon" title="Align Top"></span>
 <span class="glyphicon glyphicon-object-align-horizontal icon" title="Align Middle"></span>  <span class="glyphicon glyphicon-object-align-bottom icon" title="Align Bottom"></span> 
    </div>
</div>

CSS

.officeBubble {
    background-color:#fff;
    border: 1px solid #a7abb0;
    padding:1px;
    height:50px;
    width:191px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.22);
    -moz-box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.22);
    box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.22);
}
.officeBubble .icon{
    padding:5px;
}
.officeBubble .right {
    display:block;
    float:right;
     width: 70px;
}
.officeBubble .left {
    display:block;
    float:left;
     width: 70px;
}
.officeBubble .center {
    display:block;
    float:left;
     width: 46px;
}
.officeBubble .icon:hover{
    padding:4px;
    background-color:#fde795;
      -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border:1px solid #f1ca58;
}