JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

HTML

<body>
  <div class="container">
    <div class="item" id="accueil">
      <nav>
        <div class="logo" data-aos="fade-up">
          <img src="elements/illustrations/head.svg" height="100px" width="100px" alt="">
        </div>
        <ul class="nav-links" data-aos="fade-up">
          <li><a class="smoothScroll current" href="#accueil">Accueil</a></li>
          <li><a class="smoothScroll" href="#covid19">Covid-19</a></li>
          <li><a class="smoothScroll" href="#cyberharcelement">Cyberharcèlement</a></li>
          <li><a class="smoothScroll" href="#anticovid">Anti-Covid</a></li>
          <li><a class="smoothScroll" href="#galerie">Galerie Saint Germain</a></li>
        </ul>
      </nav>

      <div class="header">
        <section class="left">
          <div data-aos="fade-up" class="heading">
            <h1>Bonjour &#x1F44B; <br> je m'appelle <span id='jules'>Jules</span>, <br> </h1>
            <div class="typewriter">
              <h1>ravi de vous rencontrer</h1>
            </div>
          </div>
          <a class="button" class="smoothScroll" data-aos="zoom-in-right" href="#covid19">Découvrir</a>
        </section>

        <section class="right" data-aos="fade-left">
          <div class="illustration">
            <img src="elements/illustrations/illustration.svg" alt="">
          </div>
        </section>
      </div>



    </div>
    <div class="item" id="covid19">Covid-19</div>
    <div class="item" id="cyberharcelement">Cyberharcèlement</div>
    <div class="item" id="anticovid">Anti-Covid</div>
    <div class="item" id="galerie">Galerie Saint Germain</div>
  </div>

CSS

body {
  font-family: var(--inter);
}

.container {
  max-height: 100vh;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.item {
  color: black;
  /* background: #f5f5f5; */
  height: 100vh;
  scroll-snap-align: start;
}