JSFiddle - React, Tailwind, and code Playground

by josangel555

HTML

<section id="slider">
			
    <div id="left-button">
        <div id="triangle-left"></div>
    </div>
    
    <section id="central-frame">
        <div id="img-slider">image here</div>
        <div id="title-slider">title here</div>
        <div id="description-slider">text here</div>
    </section>
    
    <div id="right-button">
        <div id="triangle-right"></div>
    </div>
				
</section>

CSS

#slider {
	width: 90%;
	height: 500px;
	margin: 3em auto;
	border: 1px solid rgba(255, 0, 0, 0.2);
}

/* ======CENTRAL FRAME======*/

#central-frame {
	width: calc(100% - 200px);
	height: 500px;
	margin: auto;
	background-color: blue;
	/*-- Vertical Align-- */
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	/*-- Vertical Align end-- */
    
    float: left;
}

#img-slider{
	width: 100%;
	height:350px;
	background-color: red;
}

#title-slider{
	width: 100%;
	height:30px;
	background-color: rgb(255,147,30);
}

#description-slider{
	width: 100%;
	height:120px;
	background-color: pink;
}

/* ==Slider left & Right Buttons== */

/* ==Left button ==*/
#left-button {
	width:100px;
	height: 100%;

	float: left;
	cursor: pointer;
	/*-- Vertical Align-- */
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	/*-- Vertical Align end-- */
}

#left-button:HOVER .slide {
	transform: scale(1.2, 1.2);
	-webkit-transform: scale(1.2, 1.2);
	-moz-transform: scale(1.2, 1.2);
	-o-transform: scale(1.2, 1.2);
	-ms-transform: scale(1.2, 1.2);
	top: 47%;
}

#left-button:HOVER{
	background: rgba(0,0,0, 0.1);
		-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#triangle-left {
	/* --triangle generator--*/
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 20.8px 12px 0;
	border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
	/* --triangle end--*/
	margin: auto;
	margin-left: 25%;
	/*-- Vertical Align-- */
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

/*== Right button ==*/

#right-button {
	width:100px;
	height: 100%;
	float: left;
	cursor: pointer;
	/*-- Vertical Align-- */
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	/*-- Vertical Align end-- */
	
	background: rgba(0,0,0, 0.1);
		-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#right-button:HOVER .slide {
	transform: scale(1.2, 1.2);
	-webkit-transform: scale(1.2, 1.2);
	-moz-transform:...