JSFiddle - React, Tailwind, and code Playground

HTML

<pre data-codetype="HTML"> Selamat datang </pre> <pre data-codetype="CSS"> ... </pre> <pre data-codetype="JavaScript"> ... </pre> <pre data-codetype="JQuery"> ... </pre> <pre data-codetype="PHP"> ... </pre> <pre data-codetype="XML"> ... </pre>

CSS

pre {   background-color:white;   background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);   background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);   background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);   background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);   background-image:linear-gradient(top, #f5f5f5 50%, white 50%);   -webkit-background-size:30px 30px;   -moz-background-size:30px 30px;   -ms-background-size:30px 30px;   -o-background-size:30px 30px;   background-size:30px 30px;   background-repeat:repeat;   font:bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;   color:#333;   border:2px solid #666;   position:relative;   padding:0 7px;   margin:10px 0;   overflow:auto;   word-wrap:normal;   white-space:pre;   -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);   -moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);   box-shadow:0 1px 2px rgba(0,0,0,0.2);   position:relative; }  pre[data-codetype] {   padding:29px 1em 7px 1em; }  pre[data-codetype]:before {   content:attr(data-codetype);   display:block;   position:absolute;   top:0;   right:0;   left:0;   background-color:#666;   padding:0 7px;   font:bold 11px/20px Arial,Sans-Serif;   color:white; }  pre[data-codetype="HTML"] {border-color:#0B7E88;color:#08464B;} pre[data-codetype="CSS"] {border-color:#7B990C;color:#4B5D08;} pre[data-codetype="JavaScript"] {border-color:#545448;color:#1F2E24;} pre[data-codetype="JQuery"] {border-color:#395540;color:#2E2E27;} pre[data-codetype="PHP"] {border-color:#FF9900;color:#865003;} pre[data-codetype="XML"] {border-color:#FF0C39;color:#790015;}  pre[data-codetype="HTML"]:before {background-color:#0B7E88;} pre[data-codetype="CSS"]:before {background-color:#7B990C;} pre[data-codetype="JavaScript"]:before {background-color:#545448;} pre[data-codetype="JQuery"]:before {background-color:#395540;} pre[data-codetype="PHP"]:before {background-color:#FF9900;}...