JSFiddle - React, Tailwind, and code Playground

by Matt_Coughlin

HTML

<div class="container">

<div class="listitem"><div class="wrapper"><div class="layer">I'm a layer</div></div>Some long content here bla bla blaaaaaaa baaaaaaaaaaa</div>
<div class="listitem"><div class="wrapper"><div class="layer">I'm a layer</div></div>Some long content here bla bla blaaaaaaa baaaaaaaaaaa</div>
<div class="listitem"><div class="wrapper"><div class="layer">I'm a layer</div></div>Some long content here bla bla blaaaaaaa baaaaaaaaaaa</div>
<div class="listitem"><div class="wrapper"><div class="layer">I'm a layer</div></div>Some long content here bla bla blaaaaaaa baaaaaaaaaaa</div>
<div class="listitem"><div class="wrapper"><div class="layer">I'm a layer</div></div>Some long content here bla bla blaaaaaaa baaaaaaaaaaa</div>
<div class="listitem"><div class="wrapper"><div class="layer">I'm a layer</div></div>Some long content here bla bla blaaaaaaa baaaaaaaaaaa</div>
<div class="listitem"><div class="wrapper"><div class="layer">I'm a layer</div></div>Some long content here bla bla blaaaaaaa baaaaaaaaaaa</div>
<div class="listitem"><div class="wrapper"><div class="layer">I'm a layer</div></div>Some long content here bla bla blaaaaaaa baaaaaaaaaaa</div>
<div class="listitem"><div class="wrapper"><div class="layer">I'm a layer</div></div>Some long content here bla bla blaaaaaaa baaaaaaaaaaa</div>
<div class="listitem"><div class="wrapper"><div class="layer">I'm a layer</div></div>Some long content here bla bla blaaaaaaa baaaaaaaaaaa</div>
<div class="listitem"><div class="wrapper"><div class="layer">I'm a layer</div></div>Some long content here bla bla blaaaaaaa baaaaaaaaaaa</div>
<div class="listitem"><div class="wrapper"><div class="layer">I'm a layer</div></div>Some long content here bla bla blaaaaaaa baaaaaaaaaaa</div>
<div class="listitem"><div class="wrapper"><div class="layer">I'm a layer</div></div>Some long content here bla bla blaaaaaaa baaaaaaaaaaa</div>
<div class="listitem"><div class="wrapper"><div class="layer">I'm a...

CSS

.container {
	width: 500px;
    margin: 0 auto;
}
.listitem {
    background: #00CC00;
    border-bottom: 1px solid #FFF;
    min-height: 30px;
}
.wrapper {
	position: relative;
    height: 0;
}
.layer {
	position: absolute;
    top: 10px;
    right: 10px;
    padding: 10px;
    background: #993300;
    border: solid 1px #FFF;
	z-index: 100;
    overflow: visible;
}