JSFiddle - React, Tailwind, and code Playground

by Rymarovich Vasily

HTML

<script src="https://raw.githubusercontent.com/VRymarovich/connect4/master/dist/connect4.js"></script>
<div id="connect4"></div>

CSS

#content {
  font-size: 18px;
  text-align: center;
  color: #fff;
  font-family: Arial;
}
#field {
  width: 100%;
  height: 100%;
  background-color: #3525b4;
  border-radius: 20px;
  margin: auto;
}
#page {
  width: 300px;
  background-color: #6495ed;
  margin: auto;
  padding: 10px;
}
#cells {
  width: 100%;
  padding: 10px;
}
.flash {
  box-shadow: inset 0 0 10px;
}
.cell {
  width: 35px;
  height: 35px;
  border-radius: 20px;
  margin: auto;
}
.available {
  background-color: #fff;
  cursor: pointer;
}
.na {
  background-color: #b4afaf;
}
.red {
  background-color: #f00;
}
.yellow {
  background-color: #ff0;
}
.button {
  background-color: #4076d6;
  border: none;
  color: #fff;
  padding: 3px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
}
.result {
  text-align: center;
  font-size: 32px;
  color: #fff;
  font-family: Arial;
}

JavaScript

var options = {'horizontal': 7, 'vertical': 6,'players': 
                   [{'name':'Red', 'color':'red'}, {'name':'Yellow', 'color':'yellow'}]};
      var connect4 = new Connect4(options);
      connect4.start();