JSFiddle - React, Tailwind, and code Playground

by Spencer Smith

HTML

<style>
  * { box-sizing: border-box; }
  .wrap {
    overflow: hidden;
    width: calc(10px * 50);
  }
  .p1, .p0 {
    width: 10px;
    height: 10px;
    float: left;
  }
  .p1 {
    background-color: #333;
  }
  .p1:hover, .p0:hover {
    background-color: dodgerblue;
  }
  /* color: #c21d9b276n */
</style>

<p>What am I missing?</p>

<div class="wrap"><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p1"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div class="p0"></div><div...