JSFiddle - React, Tailwind, and code Playground

by karimkhan

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="item">
					<img class="media-object" src="http://www.menucool.com/slider/prod/image-slider-4.jpg" height="35">
					<div class="descriptionContainer">
						<h6>Small description</h6>
					</div>
					<a class="pillBtn" href="#">78</a>
					<a class="moreBtn" href="#">want more?...</a>
				</div>
			</div>
		</div>
	</div>

CSS

.container{margin-top:50px;}

.item{background:#F3F3F3;height: 35px;-webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;}

.item img {-webkit-border-radius: 5px 0 0 5px;border-radius: 5px 0 0 5px;float: left;}

.item .descriptionContainer{float: left;margin-left:45px;}

.item a {float: right;}

.item .pillBtn{-webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;background:#7CDD97;padding: 5.5px 40px 5.5px 40px;color: #FFF;font-weight: bold;font-size: 17px;text-decoration: none;}

.item .moreBtn{position: relative;font-size: 12px;margin-right: 15px;margin-top: 15px;}