JSFiddle - React, Tailwind, and code Playground

by andrejkaurin

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<header class="navbar navbar-top" id="top" role="banner">
    <div class="navbar-header"> <a href="/" class="navbar-brand">Start Bootstrap</a>

    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse">
        <ul class="nav navbar-nav">
            <li> <a href="#/about">About</a>

            </li>
            <li> <a href="#/services">Services</a>

            </li>
            <li> <a href="#/concat">Concat</a>

            </li>
        </ul>
    </nav>
</header>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-9 col-md-9 col-lg-9">
            <!-- Splash Jumbotron -->
            <div class="jumbotron home-splash"></div>
            <!-- Grid -->
            <div class="row">
                <div class="col-sm-4 col-md-4 col-lg-4">
                    <div class="thumbnail product">
                        <img src="http://placehold.it/350x300" />
                      <div class="caption">
                          <span class="pull-right price">$34.90</span>
                          <h4><a>First Product</a></h4>
                        <p>
                            This is short description of some non-existing product used only as a sample.  
                        </p>
                        <p class="ratings">
                            <span class="pull-right">15 reviews</span>                            
                            <span class="glyphicon glyphicon-star" aria-hidden="false"></span>
                            <span class="glyphicon glyphicon-star" aria-hidden="false"></span>
                            <span class="glyphicon glyphicon-star" aria-hidden="false"></span>
                            <span class="glyphicon glyphicon-star" aria-hidden="false"></span>
                            <span class="glyphicon glyphicon-star-empty" aria-hidden="false"></span>
                        ...

CSS

/** Color for Stars */
 .ratings {
    color: #D17581;    
}
/** Gradient width is 15%. Color are  rgba(0,0,0,0.5) - rgba(0,0,0,0) **/
 body {
    margin: 0;
    padding: 0;
}
/* top navigation bar */
 .navbar-top {
    background-color: #000000;
    border-radius: 0;
    margin-left: 0;
}
.navbar-top a {
    color: #F4F4F4;
}
.navbar-top a:hover {
    color: #000000;
}
/* container  */
 .container {
    margin-left: 0;
}
.home-splash {
    min-height: 300px;
    background-color: #000000;
    background: linear-gradient(to right,  
        rgba(0,0,0,0.5) 0%, 
        rgba(0,0,0,0.2) 15%, 
        rgba(0,0,0,0.2) 85%, 
        rgba(0,0,0,0.5) 100%);
}

/* Product */
.product h4 {
    margin-top: 0;
}

.product .price {
    font-size: 18px;  
    font-weight: 500;
    line-height: 1.1;
}

.product .ratings {
    margin-top: 22px;    
    margin-bottom: 0;
}

.product.thumbnail {
    padding: 0;
    
}

/* List group */

.list-group-item.selected {
    background-color: #F5F5F5;
}