JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<time>Mandag</time>
<ol>
	<li>
		<time>Kl. 23:58</time>
		<h3>Tysk øksemand er 17-årig afghaner</h3>
		<p>Gergningsmanden bag angrebet på et tysk regionaltog er en 17-årig afghansk mand. Det oplyser den bayerske indenrigsminister Joachim Herrmann ifølge <a href="http://www.tagesschau.de/eilmeldung/eilmeldung-1485.html">ARD</a> og bekræfter, at gerningsmanden er skudt. Motivet er fortsat uklart.</p>
	</li>
	<li>
		<time>Kl. 23:35</time>
		<h3>Fire såret i angreb på tysk regionaltog</h3>
		<p>Flere tyske medier citerer nu tysk politi for, at fire personer er såret i angrebet på et tysk regionaltog, heraf tre kritisk. Yderligere 14 personer skal være i choktilstand.</p>
	</li>
	<li>
		<time>Kl. 23:19</time>
		<h3>Flere i kritisk tilstand efter angreb på tysk tog</h3>
		<p>Ifølge Reuters bekræfter en talsmand for tysk politi, at en mand har angrebet passagerer på et regionaltog. Der er forskellige meldinger om antallet af ofre, men flere skal være i kritisk tilstand.</p>
	</li>
	<li>
		<time>Kl. 22:52</time>
		<h3>Øksemand i tysk tog meldes skudt af politiet</h3>
		<p>Der er stadig meget få oplysninger om økseangrebet på et tysk tog, men gerningsmanden skal ifølge flere tyske medier være blevet skudt af politiet. Det vil politiet dog ikke bekræfte.</p>
	</li>
	<li>
		<time>Kl. 22:52</time>
		<h3>Flere såret af øksebevæbnet mand i tysk tog</h3>
		<p>Mindst 20 personer meldes såret, efter en mand gik amok med en økse i et tog mellem Würzburg-Heidingsfeld og Ochsenfurt i det centrale Tyskland. Det skriver Augsburger Allgemeine.</p>
	</li>
</ol>

CSS

html {
  font-family: Arial, sans-serif;
}
body {
	background-color: #FFF;
}
ol {
	position: relative;
	padding-left: 70px;
}

ol:after {
	content: "";
	display: block;
	background-color: red;
	width: 2px;
	position: absolute;
	top: 0;
	left: 59px;
	bottom: 0;
	z-index: -1;
}

li {
	list-style: none;
}
time {
  text-transform: uppercase;
  font-size: 10px;
  line-height: 12px;
  height: 12px;
  width: 50px;
  display: block;
  background-color: #FFF;
	position: relative;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
  z-index:1000;
}
li time {
	position: relative;
	position: -webkit-sticky;
	position: sticky;
	top: 13px;
  margin-left: -70px;
  width: 50px;
  display: block;
  z-index:999;
}
li time:before {
	content: "";
	display: block;
	border-radius: 50%;
	width: 4px;
	height: 4px;
	background-color: #FFF;
	border: 2px solid red;
	position: absolute;
	right: -14px;
	top: 5px;
}