JSFiddle - React, Tailwind, and code Playground

by bigpopakap

HTML

<div>
  <div class="awesome-class">
    <p>
      <span id="cool-thing">First</span>
      <span>Second</span>
      <span class="awesome-class cool-class">Third</span>
      <span>Fourth</span>
    </p>
    
    <div class="sick-class">
      Fifth (in div!)
    </div>
  </div>
  
  <div class="sick-class">
    Sixth (in div!)
  </div>
</div>

<span>Seventh... the outsider</span>

CSS

/*
* {
  margin: 4px;
  padding: 4px;
}
*/

/*
* {
  border: solid 1px red;
}
*/

/*
div {
  border: solid 1px red;
}
*/

/*
div * {
  border: solid 1px red;
}
*/

/*
div .sick-class {
  border: solid 1px red;
}
*/

/*
.sick-class {
  border: solid 1px red;
}
*/

/*
.awesome-class,
.sick-class {
  border: solid 1px red;
}
*/

/*
.awesome-class .sick-class {
  border: solid 1px red;
}
*/

/* 
.awesome-class .awesome-class {
  border: solid 1px red;
}
*/

/*
p .cool-class {
  border: solid 1px red;
}
*/

/* 
p :first-child {
  border: solid 1px red;
}
*/

/* 
p:first-child {
  border: solid 1px red;
}
*/

/* 
span :last-child {
  border: solid 1px red;
}
*/

/* 
span:last-child {
  border: solid 1px red;
}
*/

/*
span:nth-child(2) {
  border: solid 1px red;
}
*/

/*
span:nth-child(2n) {
  border: solid 1px red;
}
*/

/*
span:nth-child(2n-1) {
  border: solid 1px red;
}
*/

/*
.sick-class:hover {
  border: solid 1px red;
}
*/

/*
.awesome-class:hover .sick-class {
  border: solid 1px red;
}
*/

/*
.awesome-class .sick-class:hover {
  border: solid 1px red;
}
*/