JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div id="parent">
  <div id='grid'>
    <input type='text'>
    <div>
      Hello
    </div>
  </div>
  <div id='flex'>
    <div>
      Hello
    </div>
    <div>
      Hello
    </div>
    <div>
      Hello
    </div>
    <div>
      Hello
    </div>
    <div>
      Hello
    </div>
    <div>
      Hello
    </div>
    <div>
      Hello
    </div>
    <div>
      Hello
    </div>
    <div>
      Hello
    </div>
    <div>
      Hello
    </div>
    <div>
      Hello
    </div>
    <div>
      Hello
    </div>
  </div>
</div>

CSS

#parent {
  background-color: blue;
  position: absolute;
}

#grid {
  display: grid;
  grid-template-columns: [name] 1fr [label] 200px;

}

#flex {
  flex-wrap: wrap;
  display: flex;
  width: 100%;
}

#flex>* {
  border-radius: 5px;
  background-color: red;
  padding: 2px;
  margin: 2px;
}