JSFiddle - React, Tailwind, and code Playground

by springuper

HTML

<div id="brand" class="sidebar">
    <h3>美团</h3>
    <p>巴拉巴拉</p>
</div>

CSS

.sidebar { width:200px; margin:50px; padding-bottom:10px; font-size:14px; line-height:1.5; border:2px solid #89B4D6; background:#EFF8FF; }
.sidebar h3  { margin-bottom:8px; font-size:16px; text-indent:5px; border-bottom:1px white solid; background:-webkit-gradient(linear,0 0,0 100%,from(white),to(#EAECEC)); }
.sidebar p { padding-left:5px; }

JavaScript

function appendParagraph(elParent) {
    var el = document.createElement('p');
    el.innerHTML = 'this is a new element created by javascript!';
    el.style.color = 'red';
    elParent.appendChild(el);
}
    
var elBrand = document.getElementById('brand');
appendParagraph(elBrand);