JSFiddle - React, Tailwind, and code Playground

by Deriv Diggs

HTML

<div class='toggle' data-item='2' id='item2top'>
                	<div class="arrow" id="arrow2"></div>
                    <div class='togholder'>
                    	Splash: <span>Examples of website and application splash pages.</span>
                    </div>
                </div>

CSS

.toggle {
	width:90%;
	height:30px;
	left:0;
	right:0;
	margin-left: auto;
    margin-right: auto;
	margin-bottom:4px;
	text-align:left;
    color:#fff;
	background:black;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	-webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -ms-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.toggle:hover {
	color:#FC0;
	width:91%;
	background:black;
}

.togholder {
	position:absolute;
	padding-left:40px;
	width:87%;
}

.togholder span {
	width:100%;
	color:#FFF;
	color: transparent;
   	text-shadow: 0 0 5px rgba(255,255,255,0.5);
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.togholder span:hover {
	color:#FFF;
	text-shadow: 0 0 5px rgba(255,255,255,0);
}

.togholder:hover {
	color:#FC0;
}