JSFiddle - React, Tailwind, and code Playground

HTML

<div id="html"></div>

CSS

div { border:1px solid black }

JavaScript

var items = [{
  "type": "child1",
  "name": "1 "
}, {
  "type": "child1",
  "name": "1 "
}, {
  "type": "child1",
  "name": "1 "
}, {
  "type": "child2",
  "name": "2 "
}, {
  "type": "child2",
  "name": "2"
}, {
  "type": "child3",
  "name": "3 "
}, {
  "type": "child3",
  "name": "3 "
}, {
  "type": "child3",
  "name": "3"
}]
var child = items[0].type;
var html = '<div>'

items.forEach(function(item) {
 if(child != item.type){
    html += '</div>';
    html += '<div>';
 }
 html += '<div>' + item.name + ' </div>';
 child = item.type;
})

document.getElementById('html').innerHTML = html;