<div id="root"></div>html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #10375c;
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
justify-content: center;
}
.plus {
font-size: 60px;
color: #ffff;
cursor: pointer;
user-select: none;
}
.minus {
font-size: 60px;
color: #ffff;
cursor: pointer;
user-select: none;
}
.num {
margin: 0 50px 0 50px;
color: rgb(150, 911, 905);
font-size: 60px;
user-select: none;
}
const Counter = () => (
<div className="container" style={{ marginBottom: 40 }}>
<div className="plus">+</div>
<div className="num">0</div>
<div className="minus">-</div>
</div>
);
ReactDOM.render(
<div>
<Counter />
<Counter />
<Counter />
</div>,
document.getElementById("root")
);
External CSS
This Pen doesn't use any external CSS resources.