JSFiddle - React, Tailwind, and code Playground

SCSS

.alphabet {
  display: flex;
  
  .letter {
    background-color: red;
    padding: 3px 5px;
    margin: 0 1px;
    cursor: pointer;
    color: white;
    
    &.active {
      background-color: blue;
    }
  }
}

React

const {useState} = React;

const Alphabet = () => {
	const [active, setActive] = useState();
  return (
    <div className='alphabet'>
      {'ABCEDEFGHIJKLMNOPQRSTUVWXYZ'.split('').map(char => (
        <div 
          className={`letter ${char === active ? 'active' : ''}`}
          onClick={() => setActive(char)}>{char}</div>
      ))}
    </div>
  );
};

const App = () => {

  return (<Alphabet/>);
};

ReactDOM.render(<App/>, document.body);