JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/cupertino/jquery-ui.css">
<fieldset id="toolbar" class="ui-widget-header ui-corner-all">
    <legend><img src="images/icons/funnel.png" width="16" height="16" alt="" style="border: none; vertical-align: middle; margin-right: 5px;">Filter</legend>
    <button type="submit" id="FilterSubmit" name="FilterSubmit" style="float: right;">Filtern</button>
    <ul id="ToolbarFilter">
        <li>
        <input type="number" id="FilterEingangsjahr" name="FilterEingangsjahr" class="text ui-corner-all">
        <label for="FilterEingangsjahr">Eingang</label>
        </li>
        <li>
        <select id="FilterBenutzer" name="FilterBenutzer">
            <option value="0" selected>&nbsp;</option>

        </select>
        <label for="FilterBenutzer">Benutzer</label>
        </li>
        <li>
        <input type="text" id="FilterUrlaubVon" name="FilterUrlaubVon" class="text ui-corner-all">
        <input type="text" id="FilterUrlaubBis" name="FilterUrlaubBis" class="text ui-corner-all">
        <label for="FilterUrlaubVon">Von-Bis</label>
        </li>
        <li>
        <div id="FilterStatusButtonset">
            <input type="radio" id="FilterStatus1" name="FilterStatus" title="Offen" value="2"><label for="FilterStatus1" class="FilterStatusButtonsetLabel"><img src="images/icons/hourglass.png" width="16" height="16" alt="" title="Offen" style="border: none; vertical-align: middle"></label>
            <input type="radio" id="FilterStatus2" name="FilterStatus" title="Angenommen" value="1"><label for="FilterStatus2" class="FilterStatusButtonsetLabel"><img src="images/icons/okay.png" width="16" height="16" alt="" title="Angenommen" style="border: none; vertical-align: middle"></label>
            <input type="radio" id="FilterStatus3" name="FilterStatus" title="Abgelehnt" value="0"><label for="FilterStatus3"...

CSS

html, body, .ui-widget
{
    font-family: Arial !important;
    font-size: 10pt !important;
}

/* Toolbars */
ul#ToolbarFilter
{
    list-style: none;
    padding: 0;
    margin: 0;
}
 
ul#ToolbarFilter li
{
    display: inline-block;
    margin-top: 0;
    margin-right: 16px;
    padding: 0;
}
 
#toolbar label:not(.FilterStatusButtonsetLabel):not(.FilterSortierungButtonsetLabel)
{
    display: block;
    font-size: 8pt;
    text-align: center;
}
 
#toolbar input[type="number"]
{
    width: 60px;
}
 
#toolbar #FilterBenutzer-button
{
   margin-bottom: -3px !important
}
 
#toolbar #FilterUrlaubVon, #toolbar #FilterUrlaubBis
{
    width: 130px;
}
 
#toolbar div#FilterStatusButtonset, #toolbar div#FilterStatusButtonset .ui-widget, #toolbar div#FilterSortierungButtonset, #toolbar div#FilterSortierungButtonset .ui-widget
{
    padding: 0 !important;
    font-size: 8pt !important;
    margin-bottom: 0;
}

JavaScript

$(function(){
    $("#FilterStatusButtonset").buttonset();
    $("button").button();
    $("select").selectmenu(); 
});