JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="row">
	<div class="col-md-12">
		<div id="service-type-filter-buttons">
		   
		    <div data-toggle="buttons" id="filter-block" class="pull-left">
		
			    <label class="btn btn-sm marginbottom10" id="All" onclick="javascript:filterClick(&quot;ALL&quot;); $(&quot;#filter-block2 label&quot;).removeClass(&quot;active&quot;);"><input type="radio" name="options">All</label>

			    <div class="display-inline-block separator ticket-filter-separator"> </div>
			    
				<label class="btn btn-sm marginbottom10" id="Broadband" onclick="javascript:filterClick(&quot;BROADBAND&quot;);" style="display: inline-block;"><input type="radio" name="options">Broadband</label>
				<label class="btn btn-sm marginbottom10" id="FTTCP" onclick="javascript:filterClick(&quot;FTTC&quot;);"><input type="radio" name="options">FTTC/P</label>
				<label class="btn btn-sm marginbottom10 active" id="Ethernet" onclick="javascript:filterClick(&quot;ETHERNET&quot;);" style="display: inline-block;"><input type="radio" name="options">Ethernet</label>

			</div>
			
			<div class="pull-left separator ticket-filter-separator"> </div>
			
			<div data-toggle="buttons" id="filter-block2" class="pull-left">
				  <label class="btn btn-sm marginbottom10" id="MPLS" onclick="javascript:filterClick(&quot;MPLS&quot;);" style="display: inline-block;"><input type="radio" name="options2">MPLS</label>
				  <label class="btn btn-sm marginbottom10 active" id="Internet" onclick="javascript:filterClick(&quot;INTERNET&quot;);" style="display: inline-block;"><input type="radio" name="options2">Internet</label>
			</div>
		</div>
	</div>
</div>

CSS

body {
  font-family: Arial, 'Helvetica Neue', Helvetica, 'Trebuchet MS', sans-serif;
  font-size: 13px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Segoe UI", "Helvetica Neue", Frutiger, "Frutiger Linotype", "Dejavu Sans", Helvetica, Arial, sans-serif;
  font-weight: 400;
}
h1 {
  font-size: 2.2em;
  margin-top: 0;
  margin-bottom: 20px;
}
h2 {
  font-size: 2em;
  margin-top: 0;
  margin-bottom: 20px;
}
h3 {
  font-size: 1.8em;
  margin-top: 0;
}
h4 {
  font-size: 1.3em;
}
h5 {
  font-size: 1.2em;
}
h6 {
  font-size: 1em;
  margin-top: 4px;
  line-height: 1.3;
}
p {
  font-size: 1em;
}
.text-danger {
  color: #E11B22;
}
.text-black {
  color: #000;
}
.text-grey {
  color: #333;
}
.text-grey-light {
  color: #999;
}
.text-grey-blue-light {
  color: #d4d9dd;
}
.zf-green {
  color: #5cb85c;
}
.text-bold {
  font-weight: bold;
}
.text-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.break-word {
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
}
.text-wrap {
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
::selection {
  color: #fff;
  background: #666;
}
.container {
  max-width: 960px !important;
}
#content {
  min-height: 494px;
  padding: 30px 20px 30px 20px;
}
.feature-bg-image {
  background-color: #f5f5f5;
}
.search-modules-container {
  max-width: 330px;
  margin: 0 auto 10px auto;
}
#chart_container {
  width: 800px;
  height: 200px;
  border: 1px solid #000;
}
a {
  color: #E11B22;
  text-decoration: none !important;
  -webkit-transition: color .2s;
  -moz-transition: color .2s;
  transition: color .2s;
  cursor: pointer;
}
a:hover {
  color: #FF3300;
  text-decoration: underline !important;
  background: none;
}
a:focus {
  color: #E11B22;
}
a,
a:focus,
a img,
a:active,
a:hover {
  outline: none;
  -moz-outline-style: none;
}
a.btn.danger:focus,
a.btn:focus {
  color:...

JavaScript

if(
    ($('#Ethernet').hasClass('active')) && ($('#Internet').hasClass('active')) 
)

{
 alert('bum bum');
}