JSFiddle - React, Tailwind, and code Playground

by simati

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<div id="ele-grid">
  <div class="ele-card" v-for="ele in elements" :key="ele.name">
    <div class="element">{{ele.name}}</div>
    <div class="children">
      <div class="child" v-for="child in ele.children" :key="child.name">{{child.name}}</div>
    </div>
  </div>
</div>
<script>
const theElements = [{
  name: "ele1",
  children: [{
    name: 1
  }, {
    name: 2
  }, {
    name: 3
  }, {
    name: 4
  }, {
    name: 5
  }]
}, {
  name: "ele2",
  children: [{
    name: 1
  }, {
    name: 2
  }, {
    name: 3
  }, {
    name: 4
  }]
}, {
  name: "ele3",
  children: [{
    name: 1
  }, {
    name: 2
  }, {
    name: 3
  }]
}, {
  name: "ele4",
  children: [{
    name: 1
  }, {
    name: 2
  }, {
    name: 3
  }]
}, {
  name: "ele5",
  children: [{
    name: 1
  }, {
    name: 2
  }, {
    name: 3
  }, {
    name: 4
  }, {
    name: 5
  }, {
    name: 6
  }]
}, {
  name: "ele6",
  children: [{
    name: 1
  }, {
    name: 2
  }, {
    name: 3
  }]
}, {
  name: "ele7",
  children: [{
    name: 1
  }, {
    name: 2
  }, {
    name: 3
  }, {
    name: 4
  }]
}, {
  name: "ele8",
  children: [{
    name: 1
  }, {
    name: 2
  }, {
    name: 3
  }]
}, {
  name: "ele9",
  children: [{
    name: 1
  }, {
    name: 2
  }, {
    name: 3
  }]
}, {
  name: "ele10",
  children: [{
    name: 1
  }, {
    name: 2
  }, {
    name: 3
  }]
}, {
  name: "ele11",
  children: [{
    name: 1
  }, {
    name: 2
  }, {
    name: 3
  }, {
    name: 4
  }, {
    name: 5
  }]
}, {
  name: "ele12",
  children: [{
    name: 1
  }, {
    name: 2
  }, {
    name: 3
  }]
}];

new Vue({
  el: '#ele-grid',
  data: {
    elements: theElements
  }
});
</script>

CSS

#ele-grid {
  display: flex;
  flex-wrap: wrap;
  width: 750px;
  border: 1px solid red
}
.ele-card {
  border: 1px solid black;
  background: cyan;
  margin: 5px 3px;
}
.ele-card .children {
  display: flex;
  flex-wrap: nowrap;
  padding: 5px;
}
.ele-card .child {
  margin: 0 5px;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border: 1px solid black;
  background: magenta;
}
/**/
.ele-card:nth-child(2) {
  margin-left: 40px;
}
/**/
.ele-card:nth-child(7) {
  margin-left: 40px;
}
/**/
.ele-card:nth-child(4) {
  margin-left: 44px;
}
/**/