JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<section class="junior__order">
    <div class="j__order__label">
        ДАТА И ВРЕМЯ<br/>
        ДОСТАВКИ<br/>
        ЗАКАЗА
    </div>
    
    <div class="j__order">
        
        <a class="j__order__date" href="#">28.02.2014</a>
        <a class="j__order__time" href="#">c 10:00 до 11:00</a>
        
    </div>
    
    <div class="j__basket">
        
        <a class="j__basket__link" href="#">Заказать</a>
        <div class="j__basket__label">
            <span>или</span>
            <a class="j__another" href="#">
                Заказать еще на другой день
            </a>
        </div>
    </div>
</section>

CSS

.junior__order {
    font-size: 0px;
}

.j__order__label {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    font-family: "ubuntu_lightregular", sans-serif;
    font-size: 18px;
    color: #ddd;
    text-transform: uppercase;
}

.j__order {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    text-align: center;
    background: #ddd;
    width: 350px;
    height: 55px;
    line-height: 55px;
}

.j__order__date, .j__order__time {
    border-bottom: 1px solid #fff;
    padding-right: 20px;
    text-decoration: none;
    font-family: "ubuntu_lightregular", sans-serif;
    font-size: 16px;
    color: #000;
}

.j__order__date {
    margin-right: 20px;
    background: url("http://jf.local/img/cal.png") no-repeat 100% 0px;
}

.j__order__time {
    background: url("http://jf.local/img/time.png") no-repeat 100% 1px;
}

.j__basket {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-family: "ubuntu_lightregular", sans-serif;
    font-size: 18px;
    color: #ddd;
    width: 500px;
    height: 55px;
    border: 1px solid #ddd;
}

.j__basket__link {
    display: inline-block;
    vertical-align: top;
    margin-top: 8px;
    line-height: normal;
    font-family: "ubuntu_lightregular", sans-serif;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
    border-radius: 3px;
    background: #f47e39;
    padding: 8px 25px;
    box-shadow: -2px 2px 3px 0px #ddd;
    transition: all 0.3s 0s;
}

.j__basket__link:hover { box-shadow: -2px 2px 5px 0px #aaa; }
.j__basket__link:active { box-shadow: inset -2px 2px 2px 0px #af5723; }

.j__basket__label {
    display: inline-block;
    vertical-align: top;
    margin-top: 8px;
    height: 20px;
    font-family: "ubuntu_lightregular", sans-serif;
    font-style: italic;
    font-size: 14px;
    color: #aaa;
}

.j__basket__label span {
    padding: 0px 5px;
} 

.j__another {
   ...