JSFiddle - React, Tailwind, and code Playground

by Snakehater

HTML

<div class="day_div">
	<!-- monday -->
	<span style="height: 50px; width: 238px;">Måndag</span>
	<ul style="margin-block-start: 25px;">
		<li data-overlappers="0" data-overlapping="0" class="rotatable" style="top: 25px; height: 100px;"><a data-start="08:00" data-end="09:00"><em>Matte</em></a><a data-before="Lärare" class="databefore" style="opacity: 0; left: calc(110px + 0.9375em);"><em>Göran</em></a><a data-before="Klassrum" class="databefore" style="opacity: 0; left: calc(189px + 0.9375em);"><em>Katedralen</em></a><a data-before="Inställd?" class="databefore" style="opacity: 0; left: calc(307px + 0.9375em);"><em>Ja</em></a>
			<div data-fade_invert="1" data-self_sized="1" style="width: 100%; height: 100%; padding: 0px; border-radius: 5px; display: block;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="none">
					<metadata></metadata>
					<g>
						<title>background</title>
						<rect fill="#00000050" id="canvas_background" height="500" width="500" y="0" x="0"></rect>
						<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
							<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"></rect>
						</g>
					</g>
					<g>
						<title>Layer 1</title>
						<line stroke-dasharray="2,2" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="500" x2="0" y1="0" x1="500" stroke-width="34" stroke="#000" fill="none"></line>
					</g>
				</svg></div>
			<div style="opacity: 0; top: calc(72px + 0.46875em);"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa...

CSS

::-webkit-scrollbar {
    display: none;
}
.day_div ul {
	width: 100%;
	position: relative;
}

.day_div li,
#info_holder li {
	position: relative;
	/* background-color: red; */
	color: white;
	transition: transform .2s ease-in-out;
	cursor: pointer;
	transform: scale(1) rotate(0deg);

	border-radius: 5px;
}

.day_div li::after,
#info_holder li::after {
	content: '';
	position: absolute;
	/* z-index: -1; */
	width: 100%;
	height: 100%;
	opacity: 1;
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
	border-radius: 5px;
	/* opacity: 0;
      transition: opacity 0.2s ease-in-out; */
}

.day_div li.no-after::after,
#info_holder li.no-after::after {
	display: none;
	width: 0;
	height: 0;
}

.day_div li::before {
	border-radius: 5px;
}

.day_div li:hover.rotatable {
	/* transform: scale(0.9) rotate(6deg); */
	transform: rotate(6deg);
}


/* .day_div li:hover::after {
      opacity: 1;
    } */

/* skipping 1st child as it is the timeline */
.day_div li {
	background: rgb(60, 225, 226);
	background: linear-gradient(315deg, rgba(60, 225, 226, 1) 0%, rgba(28, 55, 172, 1) 100%);
}

.day_div:nth-child(3) li,
#info_holder li.three {
	background: rgb(60, 226, 124);
	background: linear-gradient(340deg, rgba(60, 226, 124, 1) 0%, rgba(88, 124, 147, 1) 100%);
}

.day_div:nth-child(4) li,
#info_holder li.four {
	background: rgb(122, 168, 91);
	background: linear-gradient(0deg, rgba(122, 168, 91, 1) 0%, rgba(108, 126, 121, 1) 100%);
}

.day_div:nth-child(5) li,
#info_holder li.five {
	background: rgb(246, 176, 101);
	background: linear-gradient(20deg, rgba(246, 176, 101, 1) 0%, rgba(246, 127, 101, 1) 100%);
}

.day_div:nth-child(6) li,
#info_holder li.six {
	background: rgb(156, 87, 151);
	background: linear-gradient(25deg, rgba(156, 87, 151, 1) 0%, rgba(67, 51, 82, 1) 100%);
}

.day_div:nth-child(7) li,
#info_holder li.seben {
	background: rgb(122, 168, 91);
	background: linear-gradient(30deg, rgba(122, 168, 91, 1) 0%, rgba(108, 126, 121, 1) 100%);
}

.day_div:nth-child(8)...