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\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;
		padding-bottom: 5px;
		background: transparent;
		z-index: -1;
	}
	#comment:before{
		text-decoration: none;
		float:left;
	}
	.commentchild{
		display: table;
		padding-left: 38px;
		background: transparent;
	}
	.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: 38px;
		background: transparent;
		z-index: -1;
	}
	#reportthis a {
		color: #7d7d7c;/*abu-abu gelap*/
		text-decoration: none;
	}
	#reportthis a:hover {
		color: #7d7d7c;/*abu-abu gelap*/
		text-decoration: underline;
	}

JavaScript

var c=[1,2];
	var z,y,x,w,a,b;
	function mj1(){
		mj2();
		document.getElementById("showup").innerHTML='';
	}
	function mj2(){
		username='michel jackson';
		for(a=1;a<=c.length;a++){
			console.log('a='+a);
			z="<div id='bigbox'>"+
			for(b=1;b<=c.length;b++){
				console.log('b='+b);
				y[b]="<div class='colkiri'>"+
					"<div class='colkirichild'></div>"+
				"</div>";
			}
			x="<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>";
			z+="</div>";
		}
	}