JSFiddle - React, Tailwind, and code Playground

HTML

<div id="image-slider">
<div id="picture-holder">
<img src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg" alt="micromax canvas A116 HD" width="800px" />
<a href="#">
        <div class="btn ps_next" id="button">
                <img src="http://demo.techglimpse.com/prev-next-buttons/right.png">
        </div>
</a>
<a href="#">
        <div class="btn ps_prev" id="button">
                <img src="http://demo.techglimpse.com/prev-next-buttons/left.png">
        </div>
</a>
</div>
</div>

CSS

#picture-holder {
		        text-align: center;
		}
		#picture-holder:hover .btn{
		        display:block;
		}
		#image-slider{
		    position:relative;
		    margin:0 auto;
		    overflow:hidden;
		    width:100%;
		}
		.ps_prev, .ps_next{
		    width:40px;
		    height:40px;
		    position:absolute;
		    z-index:100;
		    top:180px;
		    line-height:40px;
		    text-align:center;
		    display:none;
		    cursor:pointer;
		}
		.ps_prev{
		    background:#FFF;
		    padding:15px 10px 4px 12px;
		    opacity: 0.8;
		    left:00px;
	
		}
		.ps_next{
		    background:#FFF;
		    padding:15px 10px 4px 12px;
		    opacity: 0.8;
		    right:00px;
		}
		.ps_next img {
		    width:20px;
		}
		.ps_prev img {
		    width:20px;
		}
		#button {
			font-family: "Helvetica Neue", Helvetica Neue, Helvetica, Arial, sans-serif;
			color: #686868;
			font-size: 14px;
			font-weight: bold;
			border: 1px solid #AFAFAF;
			    -webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
			    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
			    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
			    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
			    -webkit-border-radius: 3px;
			border-radius: 3px;
			cursor: pointer;
		}
		.text {
		        margin-left: 200px;
		        margin-top: 20px;
		        font-weight:bold;
		        color:black;
		        font-size:1.2em;
		}