JSFiddle - React, Tailwind, and code Playground

by sanjeevks121

HTML

Simple float left:
<div class="container">
  <div class="">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="clear"></div>
  </div>
</div>
<br>
I want the result looks like:
<div class="container">
  <div class="inner">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="clear"></div>
  </div>
</div>
<br>
More width:
<div class="container wider">
  <div class="inner4">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="clear"></div>
  </div>
</div>
<br>
And when there is only 1 or 2 boxes, looks like this:
<div class="container">
  <div class="inner2">
    <div class="box">1</div>
    <div class="clear"></div>
  </div>
</div>
<br>
<div class="container">
  <div class="inner3">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="clear"></div>
  </div>
</div>

CSS

.container {
  border: 1px solid red;
  width: 480px; text-align:center;
}

.container.wider {
  width: 530px;
}

.box {
  float: none;
  width: 80px;
  height: 80px;
  margin: 10px;
  background-color: #ddd;
  display:inline-block;
}

.clear {
  clear: both;
}

.inner {
  margin-left: 35px;
}

.inner2 {
  margin-left: 190px;
}

.inner3 {
  margin-left: 140px;
}

.inner4 {
  margin-left: 15px;
}