JSFiddle - React, Tailwind, and code Playground

by Brenton Strine

HTML

<section class="spans">
  <h2>Span elements</h2>
  <p><code>&lt;span&gt;</code> elements are <b>inline</b> by default.</p>
  <span class="box vowel">a</span>
  <span class="box">b</span>
  <span class="box">c</span>
  <span class="box">d</span>
  <span class="box vowel">e</span>
  <span class="box">f</span>
  <span class="box">g</span>
  <span class="box">h</span>
  <span class="box vowel">i</span>
  <span class="box">j</span>
  <span class="box">k</span>
  <span class="box">l</span>
  <span class="box">m</span>
  <span class="box">n</span>
  <span class="box vowel">o</span>
  <span class="box">p</span>
  <span class="box">q</span>
  <span class="box">r</span>
  <span class="box">s</span>
  <span class="box">t</span>
  <span class="box vowel">u</span>
  <span class="box">v</span>
  <span class="box">w</span>
  <span class="box">x</span>
  <span class="box">y</span>
  <span class="box">z</span>
</section>
<section class="divs">
  <h2>Div elements</h2>
  <p><code>&lt;div&gt;</code> elements are <b>block</b> by default.</p>
  <div class="box">a</div>
  <div class="box">b</div>
  <div class="box">c</div>
  <div class="box">d</div>
  <div class="box">e</div>
  <div class="box">f</div>
  <div class="box">g</div>
  <div class="box">h</div>
  <div class="box">i</div>
  <div class="box">j</div>
  <div class="box">k</div>
  <div class="box">l</div>
  <div class="box">m</div>
  <div class="box">n</div>
  <div class="box">o</div>
  <div class="box">p</div>
  <div class="box">q</div>
  <div class="box">r</div>
  <div class="box">s</div>
  <div class="box">t</div>
  <div class="box">u</div>
  <div class="box">v</div>
  <div class="box">w</div>
  <div class="box">x</div>
  <div class="box">y</div>
  <div class="box">z</div>
</section>

CSS

.box {
  background-color: blue;
  margin: 10px;
  padding: 10px;
  width: 50px;
  height: 50px;
  display: inline;
  display: block;
  display: inline-block;
}

.vowel {
  background-color: red;
}

JavaScript

// add the .box classes one at a time, see the differences
// see that in the span section, there is a class `vowel`. use it to make all letters that are vowels red.
// the divs section doesn't have the classes. add the classes so that vowels are red in the div elements as well.
var word = "";

var addLetter = function (letter) {
	console.log(letter);
};

boxes = document.querySelectorAll(".box");

boxes.forEach(function (box) {
var letter = box.innerHTML;
box.addEventListener("click", function (e){
  word = word + letter;
  console.log(word);
}
)
});