JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="officeBubble2">
    <div class="left"><span class="glyphicon glyphicon-pencil icon" type="button" onclick="fnEditProperty('PrecedingHeading')"></span><span class="glyphicon glyphicon-bold icon" type="button" onclick="fnSetPrecedingHeadingFontStyle('Bold')"></span><span class="glyphicon glyphicon-italic icon" type="button" onclick="fnSetPrecedingHeadingFontStyle('Italic')"></span><span class="glyphicon glyphicon-text-color icon" type="button" onclick="fnSetPrecedingHeadingFontStyle('Underline')"></span><span class="glyphicon glyphicon-trash icon" type="button" onclick="fnRemoveProperty('PrecedingHeading')"></span>

    </div>
    <div class="center"><span class="glyphicons glyphicons-text-bigger icon" type="button" onclick="fnSetPrecedingHeadingFontStyle('IncreaseFont')"></span><span class="glyphicons glyphicons-text-smaller icon" type="button" onclick="fnSetPrecedingHeadingFontStyle('ReduceFont')"></span>

    </div>
    <div class="right"><span class="glyphicon glyphicon-align-left icon" type="button" onclick="fnSetPrecedingHeadingFontStyle('Left')"></span><span class="glyphicon glyphicon-align-center icon" type="button" onclick="fnSetPrecedingHeadingFontStyle('Centre')"></span><span class="glyphicon glyphicon-align-right icon" type="button" onclick="fnSetPrecedingHeadingFontStyle('Right')"></span><span class="glyphicon glyphicon-object-align-top icon" type="button" onclick="fnSetPrecedingHeadingFontStyle('Top')"></span><span class="glyphicon glyphicon-object-align-horizontal icon" type="button" onclick="fnSetPrecedingHeadingFontStyle('Middle')"></span><span class="glyphicon glyphicon-object-align-bottom icon" type="button" onclick="fnSetPrecedingHeadingFontStyle('Bottom')"></span>

    </div>
</div>

CSS

.officeBubble2 {
    background-color: #fff;
    border: 1px solid #a7abb0;
    padding: 1px;
    height: 50px;
    width: 167px;
    -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);
}
.officeBubble2 .left {
    display: block;
    float: left;
    width: 66px;
}
.officeBubble2 .center {
    display: block;
    float: left;
    width: 25px;
}
.officeBubble2 .right {
    display: block;
    float: right;
    width: 70px;
}