JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<h2>TYPE_1_NAME</h2>
<div class="type"></div>
<div class="number"></div>
<div class="name"></div>

CSS

div {
  width: 250px;
  height: 250px;
  margin: 5px;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
  color: white;
  font-weight: bold;
  font-size: 30px;
  
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

h2 {
  text-align: center;
}

.type {
  background-color: #adadad;
}

.number {
  background-color: #7fc2b4;
}

.name {
  background-color: #de8b01;
}

JavaScript

$(document).ready(function() {
	var str = $("h2").text();
  var [type, number, name] = str.split('_');
  
  $(".type").text(type);
  $(".number").text(number);
  $(".name").text(name);
});