JSFiddle - React, Tailwind, and code Playground

by tonytlwu

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <h2 class="bs-docs-featurette-title">Designed for everyone, everywhere</h2>
  <p class="lead">Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
  <hr class="half-rule">
  <div class="row">
    <div class="col-sm-4"> <img alt="Sass and Less support" src="https://cdn.api.fliplet.com/logo.png" class="img-responsive">
      <h3>Preprocessors</h3>
      <p>Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, <a href="css/#less">Less</a> and <a href="css/#sass">Sass</a>. Quickly get started with precompiled CSS or build on the source.</p>
    </div>
    <div class="col-sm-4"> <img alt="Responsive across devices" src="https://cdn.api.fliplet.com/logo.png" class="img-responsive">
      <h3>One framework, every device.</h3>
      <p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
    </div>
    <div class="col-sm-4"> <img alt="Components" src="https://cdn.api.fliplet.com/logo.png" class="img-responsive">
      <h3>Full of features</h3>
      <p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
    </div>
  </div>
  <hr class="half-rule">
  <p class="lead">Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p> <a...

CSS

h1, h2, h3, h4, h5, h6 {
  color: green;
}

input[type="number"] {
  color: green;
  border-color: green;  
}

/* The following can be used, but it implies that the f1 and f4 labels have the label copy "Fabulous". This could introduce bugs due to human error. A JavaScript-based solution would be more reliable to ensure the label is "Fabulous" */

/*

label[for="f1"], label[for="f4"] {
  color: green;
}

*/

JavaScript

$('.checkbox').filter(function () {
  return $(this).text().trim() === 'Fabulous'
}).css('color', 'green');