JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
</head>
<body style="background-color:lightyellow; overflow:hidden;">
<div style="padding:10px;">
<div id="Toolbar1" class="RadToolBar RadToolBar_Horizontal RadToolBar_style RadToolBar_style_Horizontal BorderTop BorderBottom BorderLeft BorderRight" style="z-index:9000;">
<div class="rtbOuter">
<div class="rtbMiddle">
<div class="rtbInner">
<ul class="rtbUL">
<li class="rtbItem rtbBtn "><a class=" rtbWrap" href="#"><span class="rtbOut"><span class="rtbMid"><span class="rtbIn"><img alt="" src="/system/images/16/data.gif" class="rtbIcon" /><span class="rtbText">Button1</span></span></span></span></a></li><li class=" rtbSeparator"><span class="rtbText"></span></li><li class="rtbItem rtbBtn "><a class=" rtbWrap" href="#"><span class="rtbOut"><span class="rtbMid"><span class="rtbIn"><img alt="" src="/system/images/16/data.gif" class="rtbIcon" /><span class="rtbText">Button2</span></span></span></span></a></li><li class=" rtbSeparator"><span class="rtbText"></span></li><li class="rtbItem rtbBtn "><a class=" rtbWrap" href="#"><span class="rtbOut"><span class="rtbMid"><span class="rtbIn"><img alt="" src="/system/images/16/data.gif" class="rtbIcon" /><span class="rtbText">Button3</span></span></span></span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="Toolbar2" class="RadToolBar RadToolBar_Horizontal RadToolBar_style RadToolBar_style_Horizontal BorderTop_Secondary BorderBottom BorderLeft BorderRight" style="z-index:9000;">
...
CSS
html
{
font-family: Tahoma;
font-size: 11px;
}
.RadToolBar
{
margin: 0;
padding: 0;
}
.RadToolBar
{
cursor: default;
text-align: left;
}
.RadToolBar_rtl
{
text-align: right;
float: right;
}
.RadToolBar,
.RadToolBar .rtbUL,
.RadToolBar .rtbItem,
.RadToolBar .rtbTemplate,
.RadToolBar .rtbWrap, .RadToolBar .rtbOut, .RadToolBar .rtbMid, .RadToolBar .rtbIn
{
white-space: nowrap;
vertical-align: top;
display: -moz-inline-box;
display: inline-block;
zoom: 1;
*display: inline;
}
div.RadToolBar .rtbOuter, x:-moz-any-link { display: -moz-inline-box; } /* fix the toolbar borders in FF2 */
div.RadToolBar .rtbOuter, x:-moz-any-link, x:default { display: block; } /* restore for FF3+ (affects set width) */
.RadToolBar .rtbSplBtn .rtbSplBtnActivator, .RadToolBar .rtbChoiceArrow
{
white-space: nowrap;
vertical-align: top;
display: -moz-inline-block;
display: inline-block;
zoom: 1;
*display: inline;
}
.RadToolBar .rtbInner
{
padding: 1px;
}
.RadToolBar .rtbUL,
.RadToolBar .rtbItem
{
list-style-position: outside;
list-style-type: none;
margin: 0;
padding: 0;
vertical-align: middle;
}
* html .RadToolBar .rtbUL,
* html .RadToolBar .rtbItem { }
*+html...