JSFiddle - React, Tailwind, and code Playground

by cespinoza

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div>

  <b id="name" class="white background-black myform">name</b>
  <input type="text">

  <b id="surname" class="green myform background-black">surname</b>
  <input type="text">
  
  <b id="age" class="allInOne">age</b>
  <input type="text">

</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault" style="color: red;">anything</label>
</div>


<div></div>

CSS

/*
#name, .other, {
  color: red;
  background: blue;
}

#surname {
  color: yellow;
  background: lightblue;
}

#name, #surname, #age{
  font-size: 10px;
}
*/

.allInOne {
   font-size: 10px;
   color: red;
   background: #000000;
}

.myform {
   font-size: 10px;
}

.red {
  color: red;
}

.green {
  color: green;
}

.white {
  color: #ffffff;
}

.background-black{
  background: #000000;
}