JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card">
  <div class="card-header">
    <h2>배열의 합</h2>
  </div>
  <div id="target" class="card-content">
    <code>
      <pre>
var testArr = [
  10, 87, 52, 48, 52
];
      </pre>
    </code>
  </div>
</div>

CSS

html, html > * {padding: 0; margin: 0;}
.card {width: 200px; height: 300px; margin: 20px auto; padding: 10px; background: white; border: 1px silver solid;}
.card-header h2 {font-size: 14px; font-weight: bolder;}
.card-content code {display: block; padding: 6px; background: #f3f5f6; color: #8a8a8a; border: 1px #c0c0c0 solid; border-radius: 4px;}
#child {width: 100%; height: 150px; margin-top: 10px; text-align: center; font-size: 55px; color: #333;}
#child:before {content: '합계 : '}

JavaScript

var testArr = [1,2,3];
var sum = testArr.reduce(addFnc, 0);
function addFnc(a, b){
  return a * b;
}
var divNode = document.createElement('DIV');
divNode.setAttribute('id','child');
var textNode = document.createTextNode(sum);
divNode.appendChild(textNode);
document.getElementById('target').appendChild(divNode);