Untitled

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Grid</title>
	<style>
		div {
			font-family: Arial;
		}

		.tabs {
			width: 250px;
			border-style: solid;
			border-width: 1px;
			border-color: gray;
			border-radius: 5px;
			height: 500px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.tab {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 10px;
			margin-right: 10px;
			padding-top: 5px;
			padding-bottom: 5px;
		}

		.tab-name {
			font-size: 18px;
		}

		.tab-count {
			color: white;
			background-color: rgb(0, 123, 255);
			padding-left: 10px;
			padding-right: 10px;
			padding-top: 2px;
			padding-bottom: 2px;
			border-radius: 10px;
		}
	</style>
</head>
<body>
	<div class="tabs">
		<div class="tab">
			<div class="tab-name">Home</div>
			<div class="tab-count">14</div>
		</div>
		<div class="tab">
			<div class="tab-name">Notifications</div>
			<div class="tab-count">3</div>
		</div>
		<div class="tab">
			<div class="tab-name">Messages</div>
			<div class="tab-count">5</div>
		</div>
		<div class="tab">
			<div class="tab-name">Bongas</div>
			<div class="tab-count">501</div>
		</div>
	</div>
</body>
</html>
Editor is loading...