JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>


<div class="menuspinner">
	<!-- menuspinner -->
    <div class="menu">

	</div>
</div>



<div class="container">
	<div class="row1">
    	<div class="logo">
        <!-- logo -->
        </div>
        
        <div class="login">
        <!-- login -->
        </div>
    </div>
</div>

CSS

body, html {
 height: 93%;
 padding: 0;
 background:#ccc; 
}
.container {
	background:rgba(0,0,0,0.3);
	height:100%;
	width:auto;
	min-width:100%;
	overflow: hidden;
	padding:30px;
}
.logo {
	background:rgba(0,0,0,0.5) url('logo.png') 10px 20px no-repeat;
	padding:10px;
	width:200px;
	height:200px;
	color:#fff;
	border-bottom-left-radius:100px;
	border-top-right-radius:100px;
}
.logo:hover {
	box-shadow:0px 0px 15px 3px #333 inset;
	-webkit-box-shadow:0px 0px 15px 3px #333 inset;
	-moz-box-shadow:0px 0px 15px #333 3px inset;
}
.menuspinner {
	background:rgba(0,0,0,1) url('logo.png') 10px -185px no-repeat;
	padding:10px;
	width:50px;
	height:50px;
	color:#fff;
	position:fixed;
	left:0px;
	top:20px;
	transition: 0.3s all ease-in;
	-webkit-transition: 0.3s all ease-in;
	-moz-transition: 0.3s all ease-in;
}
.menu {
	background:#FF8A8D;
	padding:10px;
	width:50px;
	height:100%;
	color:#fff;
	position:fixed;
	left:-70px;
	top:20px;
	transition: 0.3s all ease-in;
	-webkit-transition: 0.3s all ease-in;
	-moz-transition: 0.3s all ease-in;
}
.menuspinner:hover {
	left:-70px;
}
.menuspinner:hover .menu {
	left:0px;
}

JavaScript

$(function() {

   $("body").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);
    
      event.preventDefault();

   });

});