<div id="App"></div>

:root {
	--color-primary: #2bc4bd;
	--color-primary-offWhite: #ebeded;
}
.App{
	height: 20rem;
	display:flex;
	justify-content:center;
}

.BarChart {
	background-color: var(--color-primary);
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	height: inherit;
	width: 4em;
	overflow:hidden;
}

.BarData {
	display: flex;
	align-items: center;
	justify-content: center;
}

.PercentText {
	color: var(--color-primary-offWhite);
	font:700 1.25rem sans-serif;
	
	text-align: center;
	
}

const Bar = ({ data }) => {
	return (
		<div className="BarChart">
			{data &&
				data.map((d) => {
					return (
						<div
							className="BarData"
							style={{ background: `${d.color}`, height: `${d.percent}%` }}
						>
							<p className="PercentText">{d.percent + "%"}</p>
						</div>
					);
				})}
		</div>
	);
};

const App = () => {
	const data = [{color:'#2bc4bd', percent:50}, {color:'#7f58a3', percent:31}, {color:'#ebb860', percent:19}];
	return (
		<div className="App">
		 <Bar data={data}/>
		</div>
	);
};


ReactDOM.render(<App />, document.querySelector("#App"));