JSFiddle - React, Tailwind, and code Playground

by osipovngn

HTML

<meta name=viewport content="width=device-width, initial-scale=1, user-scalable=no">
<body>
<div id='slider'>
<ul>
	<li class='pages'>
		<h1>even</h1>
		<div href="#" class="button-menu" id="start">start game</div>
        <div href="#" class="button-menu">about</div>
        <div href="#" class="button-menu">rate</div>
        <div href="#" class="button-menu">remove ads</div>
	</li>
	<li class='pages'>
		<div id='main-space'>
          <div id='upper-space'>
          <div id='left-upper'>
          <img src='img/left1.png' href="#" id='left-arrow'>
          </div>
          <div id='right-upper'>
          <p id='score'>34</p>
          </div>
          </div>
          <div id='num-space'><p id='num'>123</p></div>
          </div>
      </li>
	<li class='pages'>score page</li>
</ul>
</div>
</body>
</html>

CSS

html, body {
	margin: 0px;
	padding: 0px;
	background-color: green;
	width: 100%;
	height: 100%;
}
@font-face {
	font-family: Comfortaa;
	src: url(fonts/Comfortaa_Regular.ttf);
}
@font-face {
	font-family: ComfortaaThin;
	src: url(fonts/Comfortaa_Thin.ttf);
}
@font-face {
	font-family: QuicksandLight;
	src: url(fonts/Quicksand-Light.otf);
}
@font-face {
	font-family: Josefin;
	src: url(fonts/JosefinSans-Thin.ttf);
}
h1 {
  color: #6c7a89;
    font-size: 100px;
}
.button-menu {
    height: 40px;
    width: 200px;
    background-color: ;
    color: #6c7a89;
    border-radius: 5px;
    position: inherit;
    margin: 0 auto;
    text-align: center;
    line-height: 50px;
    font-size: 35px;
}
#slider {
  position: relative;
  overflow: hidden;
  height: 667px;
  width: 375px;
}
#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 667px;
  width: 1125px;
  list-style: none;
}
#slider ul li {
  float: left;
  margin: 0;
  padding: 0;
  height: 667px;
  width: 375px;
  text-align: center;
  background-color: #eCf0f1;
}
#main-space {
	background-color: #eCf0f1;
	height: 667px;
	width: 375px;
}
#upper-space {
	height: 90px;
	width: 375px;
	background-color: #eCf0f1;
	overflow: hidden;

}
#left-upper {
	background-color: #ecf0f1;
	width: 50%;
	float: left;
	height: 100%;
}
#right-upper {
	background-color: #ecf0f1;
	width: 50%;
	float: right;
	height: 100%;
}
#num-space {
	background-color: inherit;
	width: 250px;
	height: 250px;
	position: static;
	margin-left: 62.5px;
}
#num {
	font-size: 100px;
	font-family: Josefin;
	text-align: center;
	font-weight: 700;
	position: inherit;
	line-height: 225px;
	color: #6c7a89;
}
#score {
	font-size: 35px;
	margin-right: 20px;
	margin-top: 30px;
	font-family: ComfortaaThin;
	text-align: right;
	position: inherit;
	color: #6c7a89;
}
#left-arrow {
	margin-top: 27px;
	margin-left: 20px;
	width: 32px;
	height: 32px;
}

JavaScript

var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;
    
    $('#slider').css({ width: slideWidth, height: slideHeight });
    
    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
    
    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('img#left-arrow').click(function () {
        moveLeft();        
    });

    $('div#start').click(function () {
        moveRight();
    });