JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<div id="root"></div>

CSS

$background-color: #fffef1;
$base-font: 'Montserrat', arial, sans-serif;
$base-font-size: 16px;
$base-font-color: #333;
$bracket-color: #444;

.app {
  text-align: center;
  font-family: $base-font;
}

.title {
  background-color: #222;
  text-transform: uppercase;
  font-size: 40px;
  font-weight: 700;
  padding: 15px;
  color: white;
}

.category-selection {
  width: 280px;
  margin: 15px auto 5px;
  display: flex;
  > div {
    padding: 0 10px;
  }
}

.champions-container {
  background: #eee;
  padding: 10px;
  width: 85%;
  margin-left: 10px;
  min-height: 150px;
  box-shadow: 0 0 8px 4px #999;
  position: absolute;
  @media (max-width: 1000px) {
    position: initial;
    margin: 30px auto 15px;
    width: 90%;
    min-height: 150px;
  }
}

.champions-data {
  font-size: 26px;
  text-align: center;

  div {
    margin: 10px;
    padding: 5px 0;
  }

  i {
    color: gold;
    font-size: 50px;
  }

  .champions-team {
    padding: 10px 0;
    font-weight: 700;
    @media (max-width: 1000px) {
      font-size: 30px;
    }
  }
}

.knockout-stage {
  text-align: center;
  width: 25%;
  background: #ececec;
  padding-bottom: 50px;
  border-left: 0.5px dashed #888;
  @media (max-width: 1000px) {
    width: 100%;
    background: initial;
    padding-bottom: 10px;
  }
  &:nth-of-type(1) {
    border-left: none;
  }
  &:nth-of-type(4) {
    border-left: none;
    @media (max-width: 1000px) {
      padding-bottom: 50px;
    }
  }
  &:nth-of-type(2n) {
    background: #f3f3f3;
    @media (max-width: 1000px) {
      background: initial;
    }
  }
  h2 {
    font-size: 26px;
    font-weight: 700;
    padding: 20px 0 10px;
    @media (max-width: 1000px) {
      font-size: 32px;
    }
  }
}

.knockout-container {
  display: flex;
  flex-direction: row;
  padding: 20px;
  justify-content: space-around;
  @media (max-width: 1000px) {
    flex-direction: column;
    width: 70%;
    margin: 0 auto;
  }
  @media (max-width: 600px) {
    width: 90%;
 ...

JavaScript

const categories = [
{
  name: "Football Teams",
  items: ["Arsenal", "Chelsea", "Liverpool", "Man City", "Man United", "Tottenham", "Real Madrid", "Barcelona", "Atletico Madrid", "Bayern Munich", "Borussia Dortmund", "Juventus", "Paris Saint Germain", "AC Milan", "Inter Milan", "Ajax"] },

{
  name: "British Bands",
  items: ["The Beatles", "The Rolling Stones", "The Kinks", "The Who", "Queen", "Led Zeppelin", "The Clash", "The Jam", "New Order", "Oasis", "Blur", "Muse", "Arctic Monkeys", "The Cure", "Black Sabbath", "Radiohead"] },

{
  name: "US Presidents",
  items: ["Washington", "Jefferson", "Lincoln", "T. Roosevelt", "F.D. Roosevelt", "Kennedy", "Nixon", "Clinton", "Reagan", "G.W. Bush", "Obama", "Wilson", "Trump", "Truman", "Carter", "Eisenhower"] }];



const blankRound = [
['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
['', '', '', '', '', '', '', ''],
['', '', '', ''],
['', '']];


function shuffle(a) {
  for (let i = a.length - 1; i > 0; i--) {if (window.CP.shouldStopExecution(0)) break;
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }window.CP.exitedLoop(0);
  return a;
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      categories: categories,
      round: blankRound.map(arr => arr.slice()),
      champion: '' };

    this.onSelect = this.onSelect.bind(this);
    this.changeCategory = this.changeCategory.bind(this);
  }
  componentWillMount() {
    let round = [...this.state.round];
    round[0] = shuffle(this.state.categories[0].items);
    this.setState({
      round: round });

  }

  changeCategory(event) {
    let round = [...blankRound];
    round[0] = shuffle(this.state.categories[event.target.value].items);
    this.setState({
      champion: '',
      round: round });

  }

  onSelect(item, index, roundIndex) {
    let champion = this.state.champion;
    let round = [...this.state.round];
    if (roundIndex === 3) {
      champion...