JSFiddle - React, Tailwind, and code Playground

by Raven_of_night_

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="0.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="1.css"><link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" />

  </head>
  <body>
    <section id="section0">
<p class="p"><span class="span">THE</span> <span class="span0">MOON</span></p>
<div class="div">
  <aside class="aside">
  <p class="p0">ПОЛЕТЫ НА ЛУНУ <span class="span1">С 40% СКИДКОЙ</span></p>
    <p class="p1">Узнайте первыми об уникальном предложении и получите возможность
  заказать десятидневный тур по цене пятидневного</p>
    <a href="#" >ПРИНЯТЬ УЧАСТИЕ</a>

  </aside>
</div>

    </section>


<section id="section1">
  <div class="slider">
    <div>
      <img src="http://placehold.it/250x250" alt="" />
    </div>
    <div>
      <img src="http://placehold.it/250x250" alt="" />
    </div>
    <div>
      <img src="http://placehold.it/250x250" alt="" />
    </div>

  </div>
  <div id='div'><img src="http://media.lpgenerator.ru/images/245037/bezimeni-10_fPO5E8V.png#size_25x45" alt="" class="left">
    <img src="http://media.lpgenerator.ru/images/245037/bezimeni-9_excx7Mu.png#size_24x45" alt="" class="right"></div>


</section>

<section id="section2">


  <p class="p">ПОЧЕМУ <span>ИМЕННО МЫ?</span></p>
<div class="grid">
<div class="">
  <img src="https://media.lpgenerator.ru/images/57561/i1_SlAtGvo.png#size_45x44" alt="">
  <p>Опишите одно из самых
  выдающихся
  преимуществ вашего
  предложения</p>
</div>
<div class="">
  <img src="https://media.lpgenerator.ru/images/57561/i2_KF1GZb3.png#size_43x34" alt="">
  <p>Сообщите о второй
  по важности черте
  вашего продукта
  или сервиса</p>

</div>
<div class="">
  <img src="https://media.lpgenerator.ru/images/57561/i3_OaFkVCV.png#size_45x45" alt="">

  <p>Обратите внимание
  на еще один факт
 ...

CSS

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body{
  overflow-x: hidden;

  font-weight: 200;
font-family: 'Open Sans', sans-serif;
color: white;
}
span{
  font-weight: 800;
}
a:hover, span:hover{
  background: red !important;
  color: black !important;
}

#section0{
  background: url(https://images.wallpaperscraft.ru/image/luna_noch_zvezdy_134696_3840x2400.jpg) no-repeat center/cover;

background-attachment: fixed ;
overflow-y: hidden;
height: 100vh;
}#section0 .p, #section2 .p, footer .p{
  text-align: center;
  font-size: 34px;
  margin-top: 5%;
}#section0 .span, footer .span{
  border: 3px solid #fff;
  padding:0 5px;
font-weight: 200;
}
  #section0 .span0, footer .span0{
    font-weight: 800;
  }  #section0 .div{
    margin-top: 20px;
    display: flex;
    align-items: center;
justify-content: center;
  }

  #section0 .aside{

text-align: center;
color: black;
padding: 80px 140px ;
padding-bottom: 160px;
background: #fff;
width: 860px;
outline: 3px solid #fff;
outline-offset: 4px;

}#section0 .p0{
font-size: 30px;
margin-bottom: 5%;
  }
  #section0 .span1{
font-weight: 800;
color: orange;
  }  #section0 a{
position: relative;
top: 40px;
  }
   a{
padding: 14px 68px;
background: orange;
color: #fff;
font-weight: 900;
text-decoration: none;
font-size: 20px;
  }

#section1{
  height: 100vh;
  background: silver;
overflow-y: hidden;
}
#section2{
  height: 87vh;
  overflow-y: hidden;

}#section2 .grid{
  text-align: center;
  margin-left: 8%;
  margin-top: 100px;
  display: grid;
grid-template-columns: repeat(4, 1fr);
color: rgb(0, 0, 0);


}

#section2 .p{
color: black ;
margin-top: 100px;
}#section2 span{
  color: orange;

  }#section2 img{
  background: url(https://media.lpgenerator.ru/images/57561/romb_QZQOfXA.png#size_136x136) no-repeat center;
  padding: 52px;

}#section2 img:hover{
  animation: rotation .7s infinite linear;
}



#section3{
  overflow-y: hidden;
  height: 80vh;
  background:...

JavaScript

$('.slider').slick({
  arrows: false
})

$('.left').click(function() {
  $('.slider').slick("slickPrev");
})

$('.right').click(function() {
  $('.slider').slick("slickNext");
})