JSFiddle - React, Tailwind, and code Playground

by Alex Baumgertner

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Calendar</title>
</head>
<body>
    <div class = "popup_calendar popup">
        <div class = "icon">
        </div>
        <div class = "caption">
            <span class = "day">День</span>
            .
            <span class = "month">Месяц</span>
            .
            <span class = "year">Год</span>
        </div>
        <div class = "close">
        </div>
        <div class = "content">
            <div class="box years">
                      <h1>Год</h1>
                      <div class="select select-border select-x25 select-selected">
                          Выбрать
                          <select size="10" class="visible">
                              <option>1980</option>
                              <option>1981</option>
                              <option>1982</option>
                              <option>1983</option>
                              <option>1984</option>
                              <option>1985</option>
                              <option>1987</option>
                              <option>1988</option>
                              <option>1989</option>
                              <option>1990</option>
                              <option>1991</option>
                              <option>1992</option>
                              <option>1993</option>
                              <option>1994</option>
                              <option>1995</option>
                              <option>1997</option>
                              <option>1998</option>
                              <option>1999</option>
                              <option selected="selected">2000</option>
                              <option>2001</option>
                              <option>2002</option>
                              <option>2003</option>
                              <option>2004</option>
                      ...

CSS

.select {
    font-size: 11px;
    background: white;
    border: 1px solid white;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    cursor: pointer;
    border-radius: 1px;
    white-space: nowrap;
}
.select:hover {
    color: #3366ff;
    background: white;
}
.select ul {
    display: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background: white;
    list-style: none;
    color: #666666;
    padding: 0;
    border: 1px solid #e8e8e8;
    height: 325px;
    margin: 6px 0 0 -10px;
    overflow: auto;
    width: 90px;
    border-radius: 1px;
    font-weight: bold;
}
.select-selected ul {
    display: block;
}
.select li {
    height: 20px;
    padding-top: 5px;
    padding-left: 9px;
}
.select li:hover {
    color: #3366ff;
}
.select-border {
    border: 1px solid #cccccc;
}

/* Extended */
.select-x25 {
    height: 25px;
    background: url("../images/select-x25.png") no-repeat right;
    padding: 4px 25px 4px 9px;
    width: 90px;
}
.select-x25:hover {
    background: url("../images/select-x25-a.png") no-repeat right;
}
.select-x35-blue {
    height: 35px;
    background: url("../images/select-x35-blue.png") no-repeat right;
    padding: 10px 34px 10px 13px;
}
.select-x35-blue:hover {
    background: url("../images/select-x35-blue-a.png") no-repeat right;
}

.popup {
    position: absolute;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 40px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border: 1px solid #e5e5e5;
    background: white;
    font-size: 11px;
    font-family: tahoma, sans-serif;
    color: #666666;
}
.popup .close {
    width: 11px;
    height: 11px;
    background: url("../images/close.png");
    cursor: pointer;
    float: right;
    margin: 0 0 -11px -11px;
}
.popup .close:hover {
    background: url("../images/close-a.png");
}
.popup .icon {
    width: 20px;
    height: 20px;
    margin: 0 -20px -20px 0;
    float: left;
}
.popup .caption {
    width: 100%;
    margin: 0...