<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;
}
View Compiled
const Counter = () => {
return (
<div className="container">
<div className="plus">+</div>
<div className="num">0</div>
<div className="minus">-</div>
</div>
);
};
ReactDOM.render(<Counter />, document.querySelector("#root"));
View Compiled
This Pen doesn't use any external CSS resources.