JSFiddle - React, Tailwind, and code Playground

http://www.linkexchanger.su/forum/viewtopic.php?f=20&p=10782

by Alexey Demin

HTML

<form action="" method="get">
  <input type="text" name="inAir" id="auto2" value="" />
  <input type="text" name="dstApt" id="dstApt" value="" />
  <input type="submit" name="Find" value="Найти" class="extButton" />
</form>
<div id="openairTSE" class="cityContainer extButton"> 
  <div class="city">Имя1</div>
</div>
<div id="openairGYD" class="cityContainer extButton">
  <div class="city">Имя2</div>
</div>

CSS

form {
 margin:10px;
}
.cityContainer {
 margin:10px;
 cursor:pointer;
}
.extButton {
 -moz-box-shadow:inset 0px 1px 0px 0px #dcecfb;
 -webkit-box-shadow:inset 0px 1px 0px 0px #dcecfb;
 box-shadow:inset 0px 1px 0px 0px #dcecfb;
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #70d3ef), color-stop(1, #19b7f1));
 background:-moz-linear-gradient(top, #70d3ef 5%, #19b7f1 100%);
 background:-webkit-linear-gradient(top, #70d3ef 5%, #19b7f1 100%);
 background:-o-linear-gradient(top, #70d3ef 5%, #19b7f1 100%);
 background:-ms-linear-gradient(top, #70d3ef 5%, #19b7f1 100%);
 background:linear-gradient(to bottom, #70d3ef 5%, #19b7f1 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#70d3ef', endColorstr='#19b7f1',GradientType=0);
 background-color:#70d3ef;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #65a2b8;
 display:inline-block;
 color:#ffffff;
 font-family:arial;
 font-size:15px;
 font-weight:bold;
 padding:5px 24px;
 text-decoration:none;
 text-shadow:0px 1px 0px #1a4c7d;
}
.extButton:hover {
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #19b7f1), color-stop(1, #70d3ef));
 background:-moz-linear-gradient(top, #19b7f1 5%, #70d3ef 100%);
 background:-webkit-linear-gradient(top, #19b7f1 5%, #70d3ef 100%);
 background:-o-linear-gradient(top, #19b7f1 5%, #70d3ef 100%);
 background:-ms-linear-gradient(top, #19b7f1 5%, #70d3ef 100%);
 background:linear-gradient(to bottom, #19b7f1 5%, #70d3ef 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#19b7f1', endColorstr='#70d3ef',GradientType=0);
 background-color:#19b7f1;
}
.extButton:active {
 position:relative;
 top:1px;
}

JavaScript

$("div.cityContainer").on("click", function() {
    $("#auto2").val($(this).children().html());
    $('#dstApt').val($(this).attr("id").replace("openair", ""));
});