JSFiddle - React, Tailwind, and code Playground

by ZEZEME

HTML

<!DOCTYPE HTML>
<html>
<head>
	<title>Slack Logo</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
	<div class="logo"> 
		<div class="green stick"></div>
		<div class="yellow stick"></div>
		<div class="blue stick"></div>
		<div class="red stick"></div>
	</div>
</body>
</html>

CSS

.blue {
	background-color: #72C5CD;
	transform: rotate(74deg);
	right: 350px;
	bottom: 260px;
	opacity: 0.9;
}

.yellow {
	background-color: #DFA22F;
	transform: rotate(-15deg);
	bottom: 210px;
	right: 250px;
}

.green {
	background-color: #3CB187;
	transform: rotate(-15deg);
	bottom: 160px;
	right: 400px;
}

.red {
	background-color: #CE1E5B;
	transform: rotate(74deg);
	right: 310px;
	bottom: 110px;
	opacity: 0.9;
}

.stick {
	height: 400px;
	width: 80px;
	border-radius: 40px;
	position: absolute;
}