JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <body style="background:#000000;">
    <div>
      <div class="box1">
      </div>
      <div class="box2">
      </div>
    </div>
    <div>
      <div class="box1">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
          <line x1="20" y1="0" x2="0" y2="20" stroke="#D35A5A"></line>
        </svg>
      </div>
      <div class="box2">
      </div>
    </div>
    <div>
      <div class="box1">
      </div>
      <div class="box2">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
          <line x1="20" y1="0" x2="0" y2="20" stroke="#D35A5A"></line>
        </svg>
      </div>
    </div>
    <div>
      <div class="box1">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
          <line x1="20" y1="0" x2="0" y2="20" stroke="#D35A5A"></line>
        </svg>
      </div>
      <div class="box2">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
          <line x1="20" y1="0" x2="0" y2="20" stroke="#D35A5A"></line>
        </svg>
      </div>
    </div>
  </body>

</html>

CSS

.box1 {
  width: 20px;
  height: 20px;
  margin: 8px;
  border: 1px solid #FDFDFD60;
  display: inline-block;
  border-radius: 2px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  background-color: #ffffff;
}

.box2 {
  width: 20px;
  height: 20px;
  margin: 8px;
  border: 1px solid #FDFDFD60;
  display: inline-block;
  border-radius: 2px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  background-color: #333333;
}