JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div class='tic'>
  <div class='tic__container'>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class='tic__container'>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class='tic__container'>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

SCSS

$primary-color: #6BBDD4;
$primary-color-hover: #000;

* {
  box-sizing: border-box;
}

.tic {  
  min-width: 350px;
  max-width: 500px;
  
  span {
    display: inline-block;    
    padding: 3em;
    margin: 0.1em;
    
    background-color: $primary-color;    
    border-radius: 8px;  
    
    &:hover {
      position: relative;    
      background-color: $primary-color-hover;
      color: white;      
      
      &:after {        
        position: absolute;
        content: "O";      
        
      }
    }
  }
}