JSFiddle - React, Tailwind, and code Playground

by Евгений

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.css">
<script src="http://traveltipz.ru/js/jquery.autocomplete.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>
<nav>
    <ul class="navigation">
        <li><a class="js_dd-link" data-dd="dd_auto" href="/">auto</a>
        <li><a href="/">avia</a>
        <li><a class="js_dd-link" data-dd="dd_water" href="/">water</a>
    </ul>
</nav>
<div class="tt_dd dark-bg">
    <div id="dd_auto">
        <input type="text" placeholder="Набери 'da'">
    </div>
    <div id="dd_water">
        <select>
            <option>1
            <option>2
            <option>3
            <option>4
            <option>5
            <option>6
        </select>
    </div>
</div>

CSS

* {margin: 0;}
nav {
    background: blue;
}
.navigation > li {display: inline-block;}
.navigation > li > a {
    color: white;
    display: block;
    height: 100%;
    padding: 10px;
    border: 1px solid #dbdbdb;
}
.dark-bg {
    background: gray;
    
}
.tt_dd > div {
    display: none;
    padding: 10px;
}
.ac_results {
    background: #dbdbdb;
}
.ac_results li {
    cursor: pointer;
}
.ac_results li:hover {
    background: #cecece
}

JavaScript

$('.js_dd-link').hover(function(){
        $('#' + $(this).data('dd')).show();
}, function () {
        $('#' + $(this).data('dd')).hide();
});

$('.tt_dd > div').hover(function(){
        $(this).show();
}, function() {
        $(this).hide();
});
$('select').select2();
$('input').autocomplete(['da', 'dada', 'tda', 'dbbgs']);