JSFiddle - React, Tailwind, and code Playground

by johnny000

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<div>
    <div class="product">
        <span class="product__name">
               Nike Air Max das ist ein etwas längerer Text
        </span>
        <img class="product__image" src="http://img.joromo.de/53/53.21678516_340x340.jpg" alt="Nike Air"/>
        <div class="product__price">
            <span class="price">99.99€</span>
            <span class="price__old">124.99€</span>
        </div>
        <div class="product__footer">
            <div class="product__buy">Kaufen</div>
            <div class="product__info">
                <i class="fa fa-ellipsis-v fa-lg"></i>
            </div>
        </div>
    </div>
    <div class="product">
        <span class="product__name">
               Nike Air Max das ist ein etwas längerer Text
        </span>
        <img class="product__image" src="http://img.joromo.de/53/53.21678516_340x340.jpg" alt="Nike Air"/>
        <div class="product__price">
            <span class="price">99.99€</span>
            <span class="price__old">124.99€</span>
        </div>
        <div class="product__footer">
            <div class="product__buy">Kaufen</div>
            <div class="product__info">
                <i class="fa fa-ellipsis-v fa-lg"></i>
            </div>
        </div>
    </div>
    <div class="product">
        <span class="product__name">
               Nike Air Max das ist ein etwas längerer Text
        </span>
        <img class="product__image" src="http://img.joromo.de/53/53.21678516_340x340.jpg" alt="Nike Air"/>
        <div class="product__price">
            <span class="price">99.99€</span>
            <span class="price__old">124.99€</span>
        </div>
        <div class="product__footer">
            <div class="product__buy">Kaufen</div>
            <div class="product__info">
           ...

CSS

* {
    font-family: 'Montserrat', sans-serif;
    font-size:1em;
}
.product {
    width:calc(50% - 40px);
    box-sizing: content-box;
    box-shadow:0 0 2px #999;
    float:left;
    margin:20px;
}
.product__name {
    display:inline-block;
    padding:5px;
}
.product__image {
    width:100%;
}
.product__price {
    text-align:center;
    
}
.price {
    font-weight:bold;
}
.price__old {
    color:red;
    text-decoration:line-through;
}
.product__footer {
    text-align:center;
}
.product__buy {
    display:inline-block;
    border:1px solid #DDD;
    padding:15px 30px;
    border-radius:30px;
    margin:10px;
    cursor:pointer;
}
.product__buy:hover {
    box-shadow:0 2px 3px #888;
    border-color:#CCC;
}
.product__info {
    display:inline-block;
}