JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<div class="scroll-wrap">
<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 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_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_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...

CSS

.scroll-wrap{
    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;
    border:1px solid green;
    position:relative;
    width: 750px;
    height: 606px;
    overflow:hidden;
}
#DIV_1 {
    bottom: -17px;
    height: 606px;
    min-height: 100px;
    overflow-y: scroll;
    position: absolute;
    right: -16px;
    width: 750px;
}/*#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;
   ...