JSFiddle - React, Tailwind, and code Playground

by Margus Martsepp

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.js"></script>
<div style="width: 500px;">
    <div class="box">
        <div class="topbox-lexicon" xmlns:albertext="urn:albertExt">
            <div class="headerbox">Leksikon</div>
            
            <div class="input-group-lexicon-parent">
                <p id="toggle-lexicon">
                    <span class="description selected">isikud</span>
                    <span class="description">ettevõtted</span>
                </p>                
                <div id="infoDivPersons" class="input-group-lexicon">
                    <input type="text" class="find-lexicon" placeholder="Otsi isikuid">
                    <div class="btn-lexicon">
                        <img class="searchButtonDiv" src="http://nugakala.aripaev.ee:8983/solr/veeb/ver8/img/searchButton.gif">
                    </div>
                </div>
                <div id="infoDivBusinesses" class="input-group-lexicon" style="display:none">
                    <input type="text" class="find-lexicon" placeholder="Otsi ettevõtteid">
                    <div class="btn-lexicon">
                        <img class="searchButtonDiv" src="http://nugakala.aripaev.ee:8983/solr/veeb/ver8/img/searchButton.gif">
                    </div>
                </div>
            </div>
                
            <div id="pageHeader">                
                <a id="logoContainer" href="http://infopank.aripaev.ee" target="_blank">
                    <div>
                        <img id="logo-lexicon" src="http://nugakala.aripaev.ee:8983/solr/veeb/ver8/img/Aripaev_Infopank_logo_mv.jpg" alt="Äripäev">
                    </div>
                </a>
                <a id="headline-lexicon" href="http://nugakala.aripaev.ee:8983/solr/veeb/ver8/index.html" target="_blank">
                	Maamajanduse võtmeisikud
           ...

CSS

.headerbox {
position:absolute;
top:0;
left:0;
background-color: rgb(7, 144, 52);
border-collapse: collapse;
color: rgb(255, 255, 255);
display: block;
font-family: GuardianSansBold, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
height: 15px;
padding-bottom: 5px;
padding-left: 9px;
padding-right: 0px;
padding-top: 5px;
text-transform: uppercase;
width: 189px;
}
.box {
    position: relative;
    float: left;
    background-color: rgb(255, 255, 255);
    border-bottom-color: rgb(7, 144, 52);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-collapse: collapse;
    border-left-color: rgb(7, 144, 52);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: rgb(7, 144, 52);
    border-right-style: solid;
    border-right-width: 1px;

    display: block;
    font-family: Arial;
    font-size: 12px;
    height: 212px;
    margin-bottom: 6px;
    margin-left: 0px;
    margin-right: 6px;
    margin-top: 0px;
    padding:7px;
    width: 176px;
}

#pageHeader {
    background-color: rgb(178, 4, 41);
    box-sizing: border-box;
    color: rgb(34, 34, 34);
    cursor: default;
    display: block;
    height: 40px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    width: 100%;
}

#logo-lexicon {
    float: right;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    width: 55px;
    padding-right: 6px;
}
#headline-lexicon {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: auto;
    direction: ltr;
    display: block;
    font-family: 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    height: 10px;
    padding-top: 6px;
    padding-left: 6px;
    text-rendering: optimizelegibility;
}
#headline-lexicon:link {text-decoration:none;}
#headline-lexicon:visited {text-decoration:none;}
#headline-lexicon:hover...

JavaScript

$('#toggle-lexicon > span').click(function() {
    var ix = $(this).index();
    
    $('#infoDivPersons').toggle( ix === 0 );
    $('#infoDivBusinesses').toggle( ix === 1 );
});
$('#search-btn-lexicon').click(function (e) {
    var url = "";
    if ($('#find-search-lexicon').val().length > 0)
        url += "search.html?find=" + $('#find-search-lexicon').val();
    else
        url += "index.html";
    window.open(url, '_blank');
});
$('#find-search-lexicon').keydown(function (e) {
    var url = "";
    if (e.keyCode == 13) {
        if ($('#find-search-lexicon').val().length > 0)
            url += "search.html?find=" + $('#find-search-lexicon').val();
        else
            url += "index.html";
        window.open(url, '_blank');
    }
});