JSFiddle - React, Tailwind, and code Playground

HTML

<section class="main">
			<article class="art">
				<div class="imgbox"><img class="ddbtn" src="" title="Code zeigen"></div>
				<div class="name"><span>gallerie.php</span><span>PHP JS Code</span></div>
				<table>
					<td class="row">
						<pre>
						1
						2
						3
						4</pre>
							</td>
							<td class="rowcode"><pre>
						&lt;?php
						if(this){
						  echo "hallo";
						}</pre>
					</td>
				</table>
			</article>
			<article class="art">
				<div class="imgbox"><img class="ddbtn" src="" title="Code zeigen"></div>
				<div class="name"><span>gallerie.php</span><span>PHP JS Code</span></div>
				<table>
					<td class="row">
						<pre>
						1
						2
						3
						4</pre>
							</td>
							<td class="rowcode"><pre>
						&lt;?php
						if(this){
						  echo "hallo";
						}</pre>
					</td>
				</table>
			</article>
			<article class="art">
				<div class="imgbox"><img class="ddbtn" src="" title="Code zeigen"></div>
				<div class="name"><span>gallerie.php</span><span>PHP JS Code</span></div>
				<table>
					<td class="row">
						<pre>
						1
						2
						3
						4</pre>
							</td>
							<td class="rowcode"><pre>
						&lt;?php
						if(this){
						  echo "hallo";
						}</pre>
					</td>
				</table>
			</article>
		</section>

CSS

section.main>p{
	max-width: 800px;
}
section.main .imgbox{
	display: inline-block;
	width: 30px;
	height: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
section.main .imgbox>img{
	height: 10px;
	
	vertical-align: top;
}
section.main article{
	font-size: 14px;
	color: #FFF;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 40px;
	padding-left: 40px;
	overflow: hidden;
	background-color: rgba(28,28,28, 1);
	max-height: 52px;
	/*transition: height 5s;*/
}
section.main article:nth-child(1n+2){
	border-top: 2px solid black;
}
section.main article.docu{
	font-size: 16px;
	margin-top: 0px;
	padding: 40px;
	padding-top: 10px;
	background-color: rgba(255,255,255, .1);
	height: auto;
	position: relative;
}
section.main article p{
	max-width: 800px;
}
section.main article.docu>p{
	margin-top: 10px;

}
section.main article .name{
	display: inline-block;
}
section.main article .name>span{
	display: block;
}
section.main article table{
	margin-top: 20px;
	margin-bottom: 20px;
	width: 100%;
}
section.main article td.rowcode{
	width: calc(100% - 31px);
	padding-left: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
section.main article td.row{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 3px;
	width: 30px;
	text-align: right;
	border-right: 1px solid #FFF;
}
section.main article pre{
	font-size: 14px;
}
.art{
    transition:         max-height 0.2s ease 0.2s; /*geschwindigkeit, verzögerung*/
    -moz-transition:    max-height 0.2s ease 0.2s;
    -webkit-transition: max-height 0.2s ease 0.2s;
    -o-transition:      max-height 0.2s ease 0.2s;
}

JavaScript

window.onload=function(){
// Code toggle Box
    function toggleArt(article,butn){
        if (!article.style.maxHeight /*wenn noch nicht gesetzt*/ || article.style.maxHeight == "52px") {
            article.style.maxHeight = "9999px";
            /*article.style.transition= "height 1s";*/
            butn.style.transform = "rotate(90deg)";
        }
        else{
            article.style.maxHeight = "52px";
            butn.style.transform = "rotate(0deg)";
        }
    }

	var article = document.getElementsByClassName("art");
	var butn = document.getElementsByClassName("ddbtn");
	for (var i = 0; i < butn.length; i++){
		butn[i].setAttribute("data-i", i);
		butn[i].onclick = function(){toggleArt(article[this.getAttribute("data-i")],butn[this.getAttribute("data-i")]);}
    }
}