JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<div id="wrapper">
  <div id="one">
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div id="two">
    <ul>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div id="three">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

CSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  width: 20px;
  height: 20px;
  margin: 2px;
}
#one {
  border: 1px solid blue;
  float: right;
}
#one li {
  background-color: blue;
}
#two {
  border: 1px solid green;
  float: right;
}
#two li {
  background-color: green;
}
#one ul,
#two ul {
  margin: 4px 1px 1px 1px;
}
#three {
  border: 1px solid orange;
}
#three ul {
  margin: 4px;
}
#three li {
  background-color: orange;
  display: inline-block;
  margin: 0;
}
#wrapper {
  width: 105px;
}