JSFiddle - React, Tailwind, and code Playground

by adnank98

HTML

<script src="&lt;link rel=&quot;stylesheet&quot; href=&quot;//netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css&quot;&gt;"></script>
<div class="container"> 
<div class="row">
        <div class="col-md-5 refine-column">
          <div class="refine-search-header">
            <h2>Refine your search</h2>
          </div>
          <p class="refine-section-header">Bands</p>
          <hr />
          <!-- <div class="empty-space-20"></div> -->
          <div class="btn-row">
            <button type="button" class="btn btn-band">6m</button>
            <button type="button" class="btn btn-band">6m</button>
            <button type="button" class="btn btn-band">6m</button>
            <button type="button" class="btn btn-band">6m</button>
          </div>
        </div>
        <div class="col-md-7">7</div>
      </div>
    </div>

CSS

body {
	font-family: 'Source Sans Pro', sans-serif;
}

.refine-column {
	background-color: #B81D01;
	color: white;
}

.refine-search-header h2 {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 200;
	text-align: center;
}

.refine-section-header {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.2em;
	letter-spacing: 3px;
}

hr {
	margin-top: 0px;
}

.empty-space-20 {
	padding: 20px;
}

.btn-band {
	color: white;
  	background-color: #FC8A06;
  	display: inline-block;
	padding: 16px 22px;
	margin-bottom: 0;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.428571429;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	height: 75px;
	width: 75px;
	border-radius: 50%;
	margin-right: 20px;
}