JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="progress">
	  <div class="progress-bar progress-bar-padding" style="width: 33.312%">
		<span class="sr-only">35% Complete (success)</span>
	  </div>
	  <div class="progress-bar progress-bar-success" style="width: 18.738%">
		<span class="sr-only">20% Complete (warning)</span>
	  </div>
	  <div class="progress-bar progress-bar-padding" style="width: 10.41%">
		<span class="sr-only">35% Complete (success)</span>
	  </div>
	  <div class="progress-bar progress-bar-success" style="width: 12.492%">
		<span class="sr-only">10% Complete (danger)</span>
	  </div>
	  <div class="progress-bar progress-bar-padding" style="width: 24.984%">
		<span class="sr-only">10% Complete (danger)</span>
	  </div>
	</div>

CSS

.progress {
			background:transparent !important;
			box-shadow:none !important;
			border: none !important;
			width: 100%;
			margin-left: 0px;
			bottom: -1px;
			border-radius:0px !important;

		}
		.progress {
			margin-bottom: 0;
			border: none !important;
		}
		.progress-bar {
			border-radius:0px !important;
			border: none !important;
		}
		.progress-bar-padding {
			background: transparent !important;
			border: 0px solid transparent !important;
		}