JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

* {
    padding: 0;
    margin: 0;
}

html{
  height: 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: 70%;
	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;
}
.sltitle1{
  margin-left:30px;
}
.pointer1{
 padding-top:60px;
}