JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="http://angularlight.org/bin/alight_0.6.min.js"></script>
<div al-app al-init="items=[{ name:'Первое', price:200, count:1, taken:0 },
                            { name:'Второе', price:100, count:2, taken:0 }]" id="wrapper">
    <div id="items">
        <div class="item-1" al-repeat="it in items">
            <p class="title">{{it.name}}</p>
            <p class="price">{{it.price}}</p>
            <p class="minus" al-click="it.count--">-</p>
            <p class="count">{{it.count}}</p>
            <p class="plus" al-click="it.count++">+</p>
            <p class="add" al-click="it.taken+=it.count; order.total+=it.count*it.price; order.col+=it.count">Добавить</p>
        </div>
    </div>
    <div id="cart" al-init="order={total:0, col:0}">
        <form action="#">
            <input type="text" name="blud" id="blud" placeholder="кол. блюд" al-value="order.col" />
            <input type="text" name="summ" id="summ" placeholder="цена" al-value="order.total" />
        </form>
        <div id="info">
            <div class="cart-item-2" al-repeat="it in items" al-show="it.taken">
                <span class="cart-title">{{it.name}}</span>
                <span class="cart-price">{{it.price}}</span>
                <span class="cart-count">{{it.taken}}</span>
                <div class="spoiler">
                </div>
            </div>            
        </div>
    </div>      
</div>

CSS

#wrapper{
    width: 405px;
    float: left;
}
#items{
    overflow: hidden;
    text-align: center;
}
div[class^=item-]{
    float: left;
    width: 200px;
    margin-right: -1px;
    border: 1px solid #333;
}
.add{
    color: #fff;
    background: #000;
    padding: 10px 0px;
    cursor: pointer;
}
div[class^=cart-item]{
    line-height: 1;
    margin: 20px;
    text-align: center;
}
div[class^=cart-item] span{
    display: block;
}
form{
    width: 270px;
    margin: auto;
    overflow: hidden;
}
input {
    width: 100px;
    border: 1px solid #333;
    padding: 0 6px;
    margin: 10px;
    float: left;
}
.plus, .count, .minus{
    display: inline-block;
    width: 20%;
}
.plus, .minus{
    background: #444;
    color: #FFF;
    border: 2px solid #000;
    cursor: pointer;
}