JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

* {
    padding: 0;
    margin: 0;
}

html,
body {
  height: 100%;
}

.slider,
.table {
	width: 100%;
	height: 100%;
}
.table {display:table;}
.slider {
	list-style: none;
	display: table-row;
}
.slider	li	{
	display: table-cell;
	border: 1px solid #1C1A1A;
	overflow: hidden;
}

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

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