JSFiddle - React, Tailwind, and code Playground

HTML

<div id="DIV_1">
	<div id="DIV_2">
		 <a href="http://localhost/delete.php?id=22" id="A_3"><i id="I_4"></i></a> 
        <a href="/mark" id="A_5"><img id="IMG_6" src="http://localhost/uploads/kUwFp1IdEdk0TeGHkuFg.png" alt="" /></a>
        <a href="/likes.php?id=22" id="A_7"></a>
		<div id="DIV_8"></div>
		<h1 id="H1_9">Post</h1>
		<p id="P_10"> <a href="/mark" id="A_11">mark</a> - 2 days ago</p>
		<p id="P_12">	1 likes</p>
	</div>
	<!--Comment start-->
<div class="comments">
	<div id="DIV_13">
		<a href="/mark" id="A_14"><img id="IMG_15" src="http://localhost/uploads/kUwFp1IdEdk0TeGHkuFg.png" alt="" /></a>
        <a href="/likes.php?id=22" id="A_16"></a>
		<h1 id="H1_17">Comment</h1>
		<p id="P_18"><a href="/mark" id="A_19">mark</a> - 2 hours ago</p>
	</div>
	<div id="DIV_20">
		<a href="/mark" id="A_21"><img id="IMG_22" src="http://localhost/uploads/kUwFp1IdEdk0TeGHkuFg.png" alt="" /></a>
        <a href="/likes.php?id=22" id="A_23"></a>
		<h1 id="H1_24">Comment</h1>
		<p id="P_25"><a href="/mark" id="A_26">mark</a> - 1 hour ago</p>
	</div>
	<div id="DIV_27">
		 <a href="/mark" id="A_28"><img id="IMG_29" src="http://localhost/uploads/kUwFp1IdEdk0TeGHkuFg.png" alt="" /></a>
        <a href="/likes.php?id=22" id="A_30"></a>
        <h1 id="H1_31">Comment</h1>
		<p id="P_32"><a href="/mark" id="A_33">mark</a> - 1 hour ago</p>
	</div>
	<div id="DIV_34">
		 <a href="/mark" id="A_35"><img id="IMG_36" src="http://localhost/uploads/" alt="" /></a>
        <a href="/likes.php?id=22" id="A_37"></a>
		<h1 id="H1_38">Comment</h1>
		<p id="P_39"> <a href="/mark" id="A_40">mark</a> - 1 hour ago</p>
	</div>
</div>
	<!--Comment end -->

	<div id="DIV_41">
		<div id="DIV_42">
			<form method="post" action="/c.php" id="FORM_43">
				<div id="DIV_44">
					<input type="text" id="INPUT_45" name="comment" placeholder="Keep it short" />
				</div>
				<div id="DIV_46">
					<input type="submit" value="Post" id="INPUT_47" />
				</div>
			</form>
		</div>
	</div>
</div>

CSS

.comments {
    height: 300px;
    overflow: hidden;
}

.comments:hover {
    overflow-y: scroll;
}

#DIV_1 {
    height: 606px;
    min-height: 100px;
    width: 750px;
    background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 1px solid rgb(204, 204, 204);
    border-radius: 15px 15px 15px 15px;
    font: normal normal normal 16px/normal Times;
    margin: 20px 24px 0px;
}/*#DIV_1*/

#DIV_2, #DIV_13, #DIV_20, #DIV_27, #DIV_34 {
    height: 100px;
    width: 750px;
    border-bottom: 1px solid rgb(204, 204, 204);
    font: normal normal normal 16px/normal Times;
}/*#DIV_2, #DIV_13, #DIV_20, #DIV_27, #DIV_34*/

#A_3, #A_7, #A_16, #A_23, #A_30, #A_37 {
    text-decoration: none solid rgb(0, 0, 238);
    font: normal normal normal 16px/normal Times;
    margin: 0px auto;
}/*#A_3, #A_7, #A_16, #A_23, #A_30, #A_37*/

#I_4 {
    color: rgb(171, 169, 169);
    cursor: pointer;
    display: block;
    float: right;
    height: 24px;
    text-decoration: none solid rgb(171, 169, 169);
    width: 19px;
    border: 0px none rgb(171, 169, 169);
    font: normal normal normal 24px/24px FontAwesome;
    margin: 67px 15px 0px 0px;
    outline: rgb(171, 169, 169) none 0px;
    transition: all 0.5s ease 0s;
}/*#I_4*/

#I_4:before {
    color: rgb(171, 169, 169);
    cursor: pointer;
    text-decoration: none solid rgb(171, 169, 169);
    content: '';
    border: 0px none rgb(171, 169, 169);
    font: normal normal normal 24px/24px FontAwesome;
    outline: rgb(171, 169, 169) none 0px;
}/*#I_4:before*/

#A_5, #A_14, #A_21, #A_28, #A_35 {
    cursor: pointer;
    text-decoration: none solid rgb(0, 0, 238);
    font: normal normal normal 16px/normal Times;
    margin: 0px auto;
}/*#A_5, #A_14, #A_21, #A_28, #A_35*/

#IMG_6, #IMG_15, #IMG_22, #IMG_29, #IMG_36 {
    color: rgb(0, 0, 238);
    cursor: default;
    display: block;
    float: left;
    height: 74px;
    text-decoration: none solid rgb(0, 0, 238);
    vertical-align: middle;
 ...