CodePen

HTML

            
              <div id="container">
    <textarea placeholder="try entering some code"></textarea>
    <button>transform</button>
    <div id="result"></div>
</div>
            
          
!
via HTML Inspector

CSS

            
              * { margin:0;padding:0;font:lighter normal 16px 'Monaco', 'Inconsolata', 'Consolas', monospace; }

body {
  background:#5740ED;
}

textarea {
  height:150px;
  width:600px;
  padding:12px;
  box-sizing:border-box;
  outline:0;
  resize:none;
}

#container {
  position:relative;
  margin:20px auto 0;
  height:300px;
  width:600px;
}

button {
  height:100px;
  width:200px;
  font-size:20pt;
  position:absolute;
  left:-250px;
  top:120px;
}

#result {
  background:#333;
  color:#CCE0DA;
  padding:12px;
  min-height:200px;
  border-radius:9px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              function htmlEscape(str) {
    return String(str)
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')            
            .replace(/>/g, '&gt;');
}

$('button').click(function(){
    x = $('textarea').val();
    $('#result').html(htmlEscape(x));
    $('textarea').val('');
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................