JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <ul class="slider">
        <li rel="sl1">
             <div class="rel">
            <span class="sltitle">Item 1</span>
            <span class="pointer"></span>
                 </div>
        </li>
        <li rel="sl2">
            <div class="rel">
                <span class="sltitle">Item 2</span>
                <span class="pointer"></span>
            </div>
        </li>
        <li rel="sl3">
             <div class="rel">
            <span class="sltitle">Item 3</span>
            <span class="pointer"></span>
            </div>
        </li>
    </ul>
</body>

CSS

* {
    padding: 0;
    margin: 0;
}

html{
  height: 100%;
}

.rel {
    position:relative;
    display:block;
    height: 100%;
    width:100%;
}

body	{
	min-height: 100%;
    height: 1px; /* I don't know why, but for JSFIDDLE it makes body to expand 100% height */
}

.slider	{
	list-style: none;
	display: table;
	width: 100%;
	height: 100%;
	position: relative;
}

.slider	li	{
	display: table-cell;
	border: 1px solid #1C1A1A;
	position: relative;
	overflow: hidden;
}

.slider li span.pointer	{
	display: block;
    border: 1px solid red;
	width: 100%;
	height: 100%;
	cursor: pointer;
	position: absolute;
    top: 0;
    left: 0;
	z-index: 99;
}