JSFiddle - React, Tailwind, and code Playground

by juna

HTML

<div id='showup'></div>
	<input type='button' value='show' onclick='mj1()'></input>

CSS

#boxpost{
		height: auto;
		border-bottom: 1px dotted #FEBA0E; /*orange*/
	}
	#commentleftside{
		margin-left:10px;
	}
	#bigbox{
		width: auto;
		display: table;
	}
	.colkiri{
		display: table-cell;
		border-left: 1px dotted #FEBA0E; /*orange*/
		z-index: 1;
	}
	.colkirichild{
		width: 20px;
	}
	.colkanan{
		display: table-cell;
		z-index: 1;
	}
	.colkanankedip{
		display: table-cell;
		background-color: yellow;
	}
	.colkananchild{
		border-left: 1px dotted #FEBA0E; /*orange*/
		float: left;
	}
	#username{
		white-space:nowrap;
		padding-top: 5px;
	}
	#username:before{
		content:"\00a0\00a0\00a";
		text-decoration:line-through;
		color: #FEBA0E;
	}
	.usernamechild{
		color: #369; /*biru gelap*/
		font-size: 70%;
		font-weight: bold;
		font-family: verdana; /*nempel tulisannya*/
	}
	.usernamechild a {
		color: #369; /*biru gelap*/
		text-decoration: none;
	}
	.usernamechild a:hover{
		color: #369; /*biru gelap*/
		text-decoration: underline;
		mouse: pointer;
	}
	#comment{
		font-family: normal x-small verdana,arial,helvetica,sans-serif;
		font-weight: 400;
		background: transparent;
		z-index: -1;
	}
	#comment:before{
		text-decoration: none;
		float:left;
	}
	.commentchild{
		display: table;
		padding-left: 10px;
		background: transparent;

        border-left: 1px dotted #FEBA0E;
        margin-left: 20px;
	}
	.countdown{
		color: #888;
		font-size: x-small;
		font: normal x-small verdana,arial,helvetica,sans-serif;
	}
	#reportthis {
		color: #7d7d7c; /*abu-abu gelap*/
		font-size: 70%;
		font-weight: bold;
		font-family: sans-serif; /*nempel tulisannya*/
		word-spacing: 1px;
		cursor: pointer;
		padding-left: 10px;
		padding-bottom: 15px;
		background: transparent;
		z-index: -1;

        border-left: 1px dotted #FEBA0E;
        margin-left: 20px;
	}
	#reportthis a {
		color: #7d7d7c;/*abu-abu gelap*/
		text-decoration: none;
	}
	#reportthis a:hover {
		color: #7d7d7c;/*abu-abu gelap*/
		text-decoration: underline;
	}

JavaScript

var c=2;
		var z;
		function mj1(){
			mj2();
		}
		function mj2(){
			username='michel jackson';
			for(a=1;a<=c;a++){
				z=z+"<div id='bigbox'>";
				for(b=1;b<=a;b++){
					z=z+"<div class='colkiri'>"+
							"<div class='colkirichild'></div>"+
						"</div>";
				}
					z=z+"<div class='colkanan'>"+
							"<div class='colkananchild'>"+
								"<div id='username'>"+
									"<span class='usernamechild'><img src='http://images2.fanpop.com/images/photos/7600000/Bad-michael-jackson-7647469-1787-2560.jpg' width='15' height='15' class='bayangan'></img> username</span> <span class='countdown'>5 minutes ago</span>"+
								"</div>"+
								"<div id='comment'>"+
									"<div class='commentchild'>Michael Joseph Jackson was born on August 29, 1958. He was the eighth of ten children in an African-American working-class family who lived in a two-bedroom house on Jackson Street in Gary, Indiana, an industrial city and a part of the Chicago metropolitan area.[12][13] His mother, Katherine Esther Scruse, was a devout Jehovah's Witness.</div>"+
									"<div id='reportthis'>"+
										"<span id='idreply' onclick='clickreply(this)'>reply</span>"+
									"</div>"+
								"</div>"+
							"</div>"+
						"</div>"+
					"</div>";
			}
			document.getElementById("showup").innerHTML="<p> "+z+" </p>";
		}