JSFiddle - React, Tailwind, and code Playground

HTML

<div id="DIV_1">
	<div id="DIV_8">
		gold sponsor
		<div id="DIV_3">
			<div id="DIV_4">
				<span id="SPAN_5"></span>
				<svg id="svg_6">
					<path id="path_7">
					</path>
				</svg>
			</div>
		</div>
	</div>
	<div id="DIV_8">
		test1
		<div id="DIV_9">
			<div id="DIV_10">
				<span id="SPAN_11"></span>
				<svg id="svg_12">
					<path id="path_13">
					</path>
				</svg>
			</div>
		</div>
	</div>
	<div id="DIV_8">
		test2
		<div id="DIV_15">
			<div id="DIV_16">
				<span id="SPAN_17"></span>
				<svg id="svg_18">
					<path id="path_19">
					</path>
				</svg>
			</div>
		</div>
	</div>
	<div id="DIV_8">
		zach
		<div id="DIV_21">
			<div id="DIV_22">
				<span id="SPAN_23"></span>
				<svg id="svg_24">
					<path id="path_25">
					</path>
				</svg>
			</div>
		</div>
	</div>
	<div id="DIV_8">
		medicare a&amp;B
		<div id="DIV_27">
			<div id="DIV_28">
				<span id="SPAN_29"></span>
				<svg id="svg_30">
					<path id="path_31">
					</path>
				</svg>
			</div>
		</div>
	</div>
	<div id="DIV_8">
		days
		<div id="DIV_33">
			<div id="DIV_34">
				<span id="SPAN_35"></span>
				<svg id="svg_36">
					<path id="path_37">
					</path>
				</svg>
			</div>
		</div>
	</div>
	<div id="DIV_8">
		new tag 1
		<div id="DIV_39">
			<div id="DIV_40">
				<span id="SPAN_41"></span>
				<svg id="svg_42">
					<path id="path_43">
					</path>
				</svg>
			</div>
		</div>
	</div>
	<div id="DIV_8">
		test
		<div id="DIV_45">
			<div id="DIV_46">
				<span id="SPAN_47"></span>
				<svg id="svg_48">
					<path id="path_49">
					</path>
				</svg>
			</div>
		</div>
	</div>
	<input id="INPUT_50" name="TagList" />
	<div id="DIV_51">
		<div id="DIV_52">
			<span id="SPAN_53"></span>
			X
		</div>
	</div>
</div>

CSS

#DIV_1 {
    align-items: center;
    block-size: 52px;
    box-sizing: border-box;
    caret-color: rgb(42, 57, 74);
    color: rgb(42, 57, 74);
    column-rule-color: rgb(42, 57, 74);
    cursor: default;
    display: flex;
    height: 52px;
    justify-content: flex-start;
    perspective-origin: 194px 26px;
    text-align: left;
    text-decoration: none solid rgb(42, 57, 74);
    text-size-adjust: 100%;
    transform-origin: 194px 26px;
    width: 388px;
    background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 1px solid rgb(13, 113, 200);
    border-radius: 1px;
    flex-flow: row wrap;
    font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(42, 57, 74) none 0px;
    padding: 0px 8px 0px 0px;
}/*#DIV_1*/

#DIV_1:after {
    box-sizing: border-box;
    caret-color: rgb(42, 57, 74);
    color: rgb(42, 57, 74);
    column-rule-color: rgb(42, 57, 74);
    cursor: default;
    display: block;
    text-align: left;
    text-decoration: none solid rgb(42, 57, 74);
    text-size-adjust: 100%;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(42, 57, 74) none 0px;
}/*#DIV_1:after*/

#DIV_1:before {
    box-sizing: border-box;
    caret-color: rgb(42, 57, 74);
    color: rgb(42, 57, 74);
    column-rule-color: rgb(42, 57, 74);
    cursor: default;
    display: block;
    text-align: left;
    text-decoration: none solid rgb(42, 57, 74);
    text-size-adjust: 100%;
    border: 0px solid rgba(0, 0, 0, 0);
    font: 600 14px / 16px "Source Sans Pro", Helvetica, Arial, sans-serif;
    outline: rgb(42, 57, 74) none 0px;
}/*#DIV_1:before*/


#DIV_3, #DIV_9, #DIV_15, #DIV_21, #DIV_27, #DIV_33, #DIV_39, #DIV_45 {
    align-items: center;
    block-size: 12px;
    box-sizing: border-box;
    caret-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    column-rule-color: rgb(255, 255, 255);
    cursor:...