JSFiddle - React, Tailwind, and code Playground

by Malitta Nan

HTML

<ul>
    <li class="yellow"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

body{
    margin: 5px;
}

ul{
    width: 440px;
    padding: 5px;
    border:1px dashed #444;
}

ul:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

li{
  width: 100px;
  height: 100px;
  display: block;
  background: #FF2780;
  float: left;  
  margin: 5px;
}

li.yellow{
  width: 210px;
  height: 210px;
  background: #FFC000;
  float: right;
}