JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="//angularlight.org/bin/alight_0.12.last.min.js"></script>
<body al-app
  al-init="x=5; y=5; map={}"
  @keydown.right="x++"
  @keydown.left="x--"
  @keydown.up="y--"
  @keydown.down="y++"
  @keydown.space="map[x+'+'+y]^=1">
  Use arrows: left, right, up, down (also click) and space.

  <div al-repeat="yy in 12" class="row">
    <div al-repeat="xx in 12" @click="x=xx; y=yy"
      al-class="active: xx==x && yy==y, green: map[xx+'+'+yy]">
    </div>
  </div>

</body>

CSS

.row div {
  width: 15px;
  height: 15px;
  border: 1px solid blue;
  float: left;
}
.row:after {
    content: '';
    display: block;
    clear: both;
}
.green {
  background-color: green;
}
.active {
  background-color: red;
}