JSFiddle - React, Tailwind, and code Playground

by milenig

HTML

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<div class="main">

  <section id="page1">
    <div class="menu">
      <ul>
        <li><img src="https://data3.origin.com/content/dam/originx/web/app/games/madden/madden-19/madden_19_GDP_logo_800x400_en_WW.png" href="#home"></li>
        <li><a href="#home">Ultimate Team</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#community">Community</a></li>
        <li><a href="#mobile">Mobile</a></li>
        <li style="float:right"><a href="#about"><i class="fab fa-instagram"></i></a></li>
        <li style="float:right"><a href="#about"><i class="fab fa-facebook-f"></i></a></li>
        <li style="float:right"><a href="#about"><i class="fab fa-twitter"></i></a></li>
      </ul>
    </div>


    <div class="left-side">
      <h2>
        It's Madden season!
      </h2>
      <h4>
        This season delivers a new level of realism as the most authentic NFL simulation to date. Dominate the field and get Madden NFL 19 on Xbox One, PlayStation 4, or PC today.
      </h4>

      <div class="buy">
        <h5>
          Buy now
        </h5>
        <button style="float:left;margin-left:0">
    <img src="https://media.playstation.com/is/image/SCEA/playstation-4-pro-ps4-pro-white-logo-us-17april17?$native$">
    </button>
        <button>
    <img src="https://streamcoimg-a.akamaihd.net/cms/2016/4/XboxLogo-Medium.png">
    </button>
        <button style="float:right;margin-right:0">
    <img src="https://cdn.freebiesupply.com/logos/large/2x/origin-4-logo-black-and-white.png">
    </button>

        <div class="scroll">
          <img src="https://static.thenounproject.com/png/486805-200.png">
        </div>

      </div>

    </div>

    <div class="right-side">
      <img...

SCSS

body {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: 'Roboto';
}

.main {
  section {
    margin: 0;
    height: 100vh;
  }
}

#page1 {
  background: #f4b60e;
  width: 100vw;
  height: 100vh;
  display: block;
}

#page2 {
  margin-top: -21px;
  background: #fdadb9;
  width: 100vw;
  height: 100vh;
  text-align: center;
  display: block;
}

.menu {
  padding: 50px;
  z-index: 1;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li img {
  width: 130px;
  padding-top: -10px;
  cursor: pointer;
}

li a {
  display: block;
  color: black;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
}

li a:hover:not(.active) {
  text-decoration: underline;
}

.left-side {
  width: 400px;
  margin-top: -30px;
  float: left;
  margin-left: 10%;
  position: relative;
  z-index: 1;
}

h2 {
  font-size: 40px;
}

h4 {
  font-weight: 500;
}

.buy {
  text-align: center;
}

h5 {
  font-size: 15px;
  text-shadow: 0.5px 0 0 currentColor;
}

button {
  background: black;
  border: none;
  color: white;
  padding: 7px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0px 5px;
  cursor: pointer;
}

button img {
  width: 100px;
  height: 25px;
  object-fit: contain;
}

.scroll img {
  margin-top: 60px;
  width: 70px;
}

.right-side {
  float: right;
  position: absolute;
  z-index: 0;
  top: -40vh;
  right: 0;
}

.right-side img {
  width: 140vh;
}

#pagination {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  transform: rotate(90deg);
  left: 0;
  list-style: none;
}

#pagination li:not(#active) {
  position: relative;
  margin-left: 20px;
  background: #fff;
  border-radius: 100%;
  width: 8px;
  height: 8px;
  transition: all .2s ease;
}

#active {
  position: relative;
  margin-left: 20px;
  background: #000;
  border-radius: 100%;
  width: 8px;
  height: 8px;
  transition: all .2s ease;
}

#pagination a {
 ...