JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<div class="sidebar">
  <label>
    <input type="checkbox">
    Diagonal movement
  </label>
  <label>
    Algorithm
    <select>
      <option>A* search</option>
      <option selected>Breadth-first search</option>
      <option>Depth-first search</option>
    </select>
  </label>
  <label>
    Heuristic
    <select>
      <option>Euclidean distance</option>
      <option>Manhattan distance</option>
    </select>
  </label>
  <label>
    Preset
    <select>
      <option>Empty</option>
      <option>Fortress</option>
      <option>Maze</option>
    </select>
  </label>
</div>
<div class="map">map</div>

CSS

html, input, select, textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body {
  align-items: stretch;
  display: flex;
  height: 100vh;
  margin: 0;
}

.sidebar {
  background: #1C2128;
  color: #FFF;
  display: flex;
  flex-direction: column;
  flex: 0 200px;
  order: 2;
  padding: 1em;
}

.sidebar label {
  line-height: 2;
  margin: 0 0 0.5em;
}

.sidebar label select {
  display: block;
  width: 100%;
}

.map {
  background: #eee;
  flex: 1;
  order: 1;
}