JSFiddle - React, Tailwind, and code Playground
by Rahul Desai
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="btn-group-vertical">
<button type="button" class="btn btn-default disabled">All Departments</button>
<button type="button" class="btn btn-default">Baby<i class="fa fa-chevron-right"></i></button>
<button type="button" class="btn btn-default">Beauty<i class="fa fa-chevron-right"></i></button>
<button type="button" class="btn btn-default">Books<i class="fa fa-chevron-right"></i></button>
<button type="button" class="btn btn-default">Clothing & Accesories<i class="fa fa-chevron-right"></i></button>
<button type="button" class="btn btn-default">Computers & Accesories<i class="fa fa-chevron-right"></i></button>
<button type="button" class="btn btn-default">Electronics<i class="fa fa-chevron-right"></i></button>
<button type="button" class="btn btn-default">Fashion Jewellery<i class="fa fa-chevron-right"></i></button>
<button type="button" class="btn btn-default">Gift Cards<i class="fa fa-chevron-right"></i></button>
<button type="button" class="btn btn-default">Health & Personal Care<i class="fa fa-chevron-right"></i></button>
<button type="button" class="btn btn-default">Home & Kitchen<i class="fa fa-chevron-right"></i></button>
<button type="button" class="btn btn-default">Kindle Store<i class="fa fa-chevron-right"></i></button>
<button type="button" class="btn btn-default">Luggage & Bags<i class="fa fa-chevron-right"></i></button>
<button type="button" class="btn btn-default">Movies & TV Shows<i class="fa fa-chevron-right"></i></button>
<button type="button" class="btn btn-default">Music<i class="fa fa-chevron-right"></i></button>
<button type="button" class="btn btn-default">Pet Supplies<i class="fa fa-chevron-right"></i></button>
<button type="button"...
CSS
div.btn-group-vertical{
padding: 10px;
width: 60%;
}
.btn{
text-align: left;
}
button.btn.btn-default{
color: black;
border: 0.1rem solid #E7E7E7;
}
button.btn.btn-default.disabled{
background: #F6F6F6;
color: black;
border: 0.2rem solid #dddddd;
}
div.btn-group-vertical button.btn i.fa-chevron-right:before {
content: "";
color: #AEAEAE;
margin-right: 10px;
padding: 0;
position: absolute;
right: 0;
text-align: right;
top: 1rem;
}