JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<div id="Font">
    <div class="Row">
        <div class="Button"><div id="Bold"><p>B</p></div></div>
        <div class="Button"><div id="Italic"><p>I</p></div></div>
        <div class="Button"><div id="Underline"><p>U</p></div></div>
        <div class="Button"><div id="Strikethrough"><p>abc</p></div></div>
        <div class="SupOrSubButton"><div id="Superscript"><p>A<span>ab</span></p></div></div>
        <div class="SupOrSubButton"><div id="Subscript"><p>A<span>ab</span></p></div></div>
    </div>
</div>

CSS

* {
    outline : none;
}
	
#Font {
	width:238px;
	height:87px;
}
#Font .Row {
	float:left;
	width:226px;
	margin:11px 0 0 6px;
}
#Font .Button, #Font .SupOrSubButton, #Font .BasicButton {
	float:left;
	height:18px;
	margin-right:2px;
	border-width:1px;
	border-style:solid;
	border-color:#FFF;
	outline-width:1px;
	outline-style:solid;
	outline-color:#FFF;
	cursor:pointer;
}
#Font .DropButton {
	float:left;
	height:18px;
	margin-right:2px;
	border-width:1px;
	border-style:solid;
	border-color:#FFF;
	outline-width:1px;
	outline-style:solid;
	outline-color:#d3d6d9;
	cursor:pointer;
}
#Font .Button:hover, #Font .SupOrSubButton:hover, #Font .BasicButton:hover, #Font .DropButton:hover {
	background:#309;
	background: url(https://tornhq.com/WorkingOn/Images/TextEditor/DropDownBtnHvr.png);
	width: 12pxk;
	outline-width:1px;
	outline-style:solid;
	outline-color: #f2cb56;
}
#Font .Button:active, #Font .SupOrSubButton:active, #Font .BasicButton:active, #Font .DropButton:active {
	background:#309;
	background:url(https://tornhq.com/WorkingOn/Images/TextEditor/DropDownBtnActive.png);
	width: 12pxk;
	outline-width:1px;
	outline-style:solid;
	outline-color: #c27a2d;
	border-color: #f6c867;
}
#Font .ButtonActive {
	background:#309;
	background:url(https://tornhq.com/WorkingOn/Images/TextEditor/DropDownBtnActive.png);
	width: 12pxk;
	outline-width:1px;
	outline-style:solid;
	outline-color: #c27a2d;
	border-color: #f6c867;
}

.BasicButton #Grow p { height:18px; width:19px; margin:0; padding:0; text-align:center; font-size: 15px; }
.BasicButton #Grow p span { margin:0; padding:0; position:absolute; margin-left:-3px; margin-top:2px; font-size:5px; }
.BasicButton #Shrink p { height:18px; width:19px; margin:0; padding:0; padding-top:2px; text-align:center; font-size: 13px; }
.BasicButton #Shrink p span { margin:0; padding:0; position:absolute; margin-left:-3px; margin-top:2px; font-size:5px; }
.DropButton #ChangeCase p { height:18px; width:28px; margin:0; margin-left:-5px; padding:0;...

JavaScript

$(".SupOrSubButton").click(function(e) {
    var child = $(this).children().attr('id');
	$(this).toggleClass('ButtonActive');
	$(".SupOrSubButton:not(:has(#" + child +"))").removeClass('ButtonActive');
});