JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<ul class="agency-diagram">
		<li class="univer" style="width:35.64%"></li>
		<li class="academy" style="width:9.65%"></li>
		<li class="inst" style="width:13.51%"></li>
		<li class="science" style="width:9.13%"></li>
		<li class="spo" style="width:5.14%"></li>
		<li class="tehnic" style="width:6.43%"></li>
		<li class="ou" style="width:8.36%"></li>
		<li class="dpo" style="width:12.09%"></li>
	</ul>

CSS

.agency-diagram {
			width: 777px;
			display: block;
			margin: 10px 0 15px 0; 
		}	

			.agency-diagram > li {
			    display: inline-block;
				float: left;
				height: 18px;
			}

				.univer { background: #3e454c; }
				.academy { background: #268cd5; }
				.inst { background: #26d58f; }
				.science { background: #67df28; }
				.spo { background: #ffd05f; }
				.tehnic { background: #ff972e; }
				.ou { background: #ff592e; }
				.dpo { background: #eb2a4a; }