JSFiddle - React, Tailwind, and code Playground

by Alex Baumgertner

HTML

<form class="booking-form" action="#" method="post">
    <!--форма -->
    <div class="booking-form-dates clearfix">
        <label for="booking-form-date-in">дата заезда:</label>
       
        <input type="date" name="booking-form-date-in" id="booking-form-date-in" value="2014-04-24">
    </div>
    <div class="booking-form-dates clearfix">
        <label for="booking-form-date-out">дата выезда:</label>
     
        <input type="date" name="booking-form-date-out" id="booking-form-date-out" value="2014-04-07">
    </div>
    <div class="booking-form-counters adults">
        <label for="number-adult">взрослые:</label>
        <div class="input-counter">
            <button class="booking-form-minus minus minus-adult"><i class="icon-minus"></i>
            </button>
            <input type="number" class="booking-form-counter-input number-adult" name="number-adult" id="number-adult" value="2" min="1" max="9">
            <button class="booking-form-plus plus plus-adult"><i class="icon-plus"></i>

            </button>
        </div>
    </div>
    <!-- -->
    <div class="booking-form-counters kids">
        <label for="number-kids">дети:</label>
        
         <div class="input-counter">
        <button class="booking-form-minus minus-kids minus"><i class="icon-minus"></i></button>
        <input type="number" class="booking-form-counter-input number-kids" name="number-kids" id="number-kids" value="0" min="0" max="9">
        <button class="booking-form-plus plus-kids plus"><i class="icon-plus"></i></button>
            </div>
    </div>
    <div>
        <button type="submit" class="booking-form-submit">найти</button>
    </div>
</form>

CSS

.booking-form {
    background: lightgrey;
    padding: 40px;
}
.booking-form-dates {
    margin-bottom: 20px;
}
.booking-form-dates label {
    width: 100px;
    display: inline-block;
    vertical-align: middle;
    background: lightyellow;
    margin-right: 20px;
}
.booking-form-dates input {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    background: #f2f2f2;
    border: 0;
    padding: 5px 3px;
    /* надо переопределять заданные в браузере */
}
.booking-form-counters {
    display: inline-block;
    vertical-align: top;
}
.booking-form-counters label {
    display: inline-block;
    vertical-align: middle;
}
.booking-form-counters.kids {
    margin-left: 40px;
}
.booking-form-submit {
    margin-top: 20px;
}

.input-counter {
    position: relative;
       display: inline-block;
    vertical-align: middle;
}

.input-counter input {
    padding: 3px 30px;
}

.input-counter button {
    position: absolute;
    height: 100%;
    border: 0;
    background: white;
    width: 20px;
    background: red;
}

.input-counter button.minus {
    left: 0;
}


.input-counter button.plus {
    right: 0;
}