JSFiddle - React, Tailwind, and code Playground

by bumbay

HTML

<div class="x r"></div><div class="y"></div>
<div><input type="hidden" id="sort" value="0" /><span class="val_sort"></span></div>
<div style="margin-top: 7px;"><input type="hidden" id="sort1" value="0" /></div>
<div style="margin-top: 7px;"><input type="hidden" id="sort2" value="0" /> <input type="hidden" id="sort3" value="0" /> <input type="hidden" id="sort4" value="0" /></div>
<a href="javascript://" onclick="sort.change(1);">1</a>

CSS

.drop-c {
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
}

.drop-title {
    border: 1px solid #ccc;
    white-space: nowrap;
    overflow: hidden;
}

.drop-title div.current_title {
    padding: 3px 5px;
    white-space: nowrap;
}

.drop-title .arrow {
    width: 16px;
    height: 20px;
    background: url('/img/arrow1.png') no-repeat #fff;
}

.drop-title .arrowTo {
    border-left: 1px solid #e0e0e0;
    background-color: #f2f2f2;
}

.drop-title:hover {
    cursor: pointer;
}

.drop-wrapper {
    position: absolute;
    display: none;
}

.drop_ui {
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
}

.drop_ui li {
    list-style: none;
    border-left:1px solid #f0f0f0;
    border-right:1px solid #f0f0f0;
    padding: 3px 25px 3px 10px;
    display: block;
    background: #fff;
    opacity: .9;
    text-decoration: none;
    white-space: nowrap;
}

.drop_ui li:hover {
    border:1px solid #000;
    background-color: #707070;
    padding: 2px 25px 2px 10px;
    color:#FFF;
    background-color: #707070;
    cursor: pointer;
}

.drop_ui li.hover {
    border:1px solid #000;
    background-color: #707070;
    padding: 2px 25px 2px 10px;
    color:#FFF;
    background-color: #707070;
    cursor: pointer;
}

JavaScript

var sort = new drop('sort', [[0, 'По дате обновления'],[1, 'По дате создания'],[2, 'По количеству сообщений']], {width: 200, selectedItem: 0});
new drop('sort1', [[0, 'По дате обновления'],[1, 'По дате создания'],[2, 'По количеству сообщений']], {width: 200, selectedItem: 1});
new drop('sort2', [[0,"Год:"],[1998,"1998"],[1997,"1997"],[1996,"1996"],[1995,"1995"],[1994,"1994"],[1993,"1993"],[1992,"1992"],[1991,"1991"],[1990,"1990"],[1989,"1989"],[1988,"1988"],[1987,"1987"],[1986,"1986"],[1985,"1985"],[1984,"1984"],[1983,"1983"],[1982,"1982"],[1981,"1981"],[1980,"1980"],[1979,"1979"],[1978,"1978"],[1977,"1977"],[1976,"1976"],[1975,"1975"],[1974,"1974"],[1973,"1973"],[1972,"1972"],[1971,"1971"],[1970,"1970"],[1969,"1969"],[1968,"1968"],[1967,"1967"],[1966,"1966"],[1965,"1965"],[1964,"1964"],[1963,"1963"],[1962,"1962"],[1961,"1961"],[1960,"1960"],[1959,"1959"],[1958,"1958"],[1957,"1957"],[1956,"1956"],[1955,"1955"],[1954,"1954"],[1953,"1953"],[1952,"1952"],[1951,"1951"],[1950,"1950"],[1949,"1949"],[1948,"1948"],[1947,"1947"],[1946,"1946"],[1945,"1945"],[1944,"1944"],[1943,"1943"],[1942,"1942"],[1941,"1941"],[1940,"1940"],[1939,"1939"],[1938,"1938"],[1937,"1937"],[1936,"1936"],[1935,"1935"],[1934,"1934"],[1933,"1933"],[1932,"1932"],[1931,"1931"],[1930,"1930"],[1929,"1929"],[1928,"1928"],[1927,"1927"],[1926,"1926"],[1925,"1925"],[1924,"1924"],[1923,"1923"],[1922,"1922"],[1921,"1921"],[1920,"1920"]], {width: 60, selectedItem: 0});
new drop('sort3', [[0,"Месяц:"],[1,"Января"],[2,"Февраля"],[3,"Марта"],[4,"Апреля"],[5,"Мая"],[6,"Июня"],[7,"Июля"],[8,"Августа"],[9,"Сентября"],[10,"Октября"],[11,"Ноября"],[12,"Декабря"]], {width:74, selectedItem: 0});
new drop('sort4',...