JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

SCSS

$items: (
  navy: #001f3f, 
  blue: #0074d9, 
  aqua: #7fdbff, 
  teal: #39cccc, 
  olive: #3d9970, 
  green: #2ecc40, 
  lime: #01ff70, 
  yellow: #ffdc00,
  orange: #ff851b, 
  red: #ff4136, 
  maroon: #85144b, 
  fuchsia: #f012be, 
  purple: #b10dc9, 
  black: #111111, 
  gray: #aaaaaa, 
  silver: #dddddd
);

@each $name, $value in $items {
  .List__item--#{$name} {
    background-color: $value;
  }
}

.List {
  margin: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 60px;
  grid-gap: 16px;
  .List__item {
    line-height: 60px;
    text-align: center;
    color: white;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
    border: 3px solid transparent;
    &.selected {
      border: 3px dashed darkred;
    }
  }
}

// there was a lot of code repeating, so I took this opportunity to refactor using sass.

React

const { Fragment, useState } = React;


const List = ({ items }) => { 
	const [selectedItemsList, setSelectedItemList] = useState([]);

  function onSelectItem(event) {
  	event.persist();
    
    if (event.target.classList.contains('selected')) {
      event.target.classList.remove('selected');
      deleteIndex = selectedItemsList.indexOf(event.target.innerHTML);
      const filteredArray = selectedItemsList.filter((_, i) => i !== deleteIndex);
      setSelectedItemList(filteredArray);
    } else {
      event.target.classList.add('selected');
      setSelectedItemList(list => ([...list, event.target.innerHTML]));
    }
    console.log('###selectedItemsList', selectedItemsList, event);
  }

  return (
    <Fragment>
      <div>
        List of currently selected items:
        {selectedItemsList.map(item => (
         <li key={item}>{item}</li>
        ))}
      </div>
      <ul className="List">
        {items.map(item => (
          <li key={item.name} onClick={onSelectItem} className={`List__item List__item--${item.color}`}>
            {item.name}
          </li>
        ))}
      </ul>
    </Fragment>
  );
}


const sizes = ['tiny', 'small', 'medium', 'large', 'huge'];
const colors = ['navy', 'blue', 'aqua', 'teal', 'olive', 'green', 'lime', 'yellow', 'orange', 'red', 'maroon', 'fuchsia', 'purple', 'silver', 'gray', 'black'];
const fruits = ['apple', 'banana', 'watermelon', 'orange', 'peach', 'tangerine', 'pear', 'kiwi', 'mango', 'pineapple'];

const items = sizes.reduce(
  (items, size) => [
    ...items,
    ...fruits.reduce(
      (acc, fruit) => [
        ...acc,
        ...colors.reduce(
          (acc, color) => [
            ...acc,
            {
              name: `${size} ${color} ${fruit}`,
              color,
            },
          ],
          [],
        ),
      ],
      [],
    ),
  ],
  [],
);

ReactDOM.render(
  <List items={items} />,
  document.getElementById('root')
);