JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/siema@1.5.1/dist/siema.min.js" integrity="sha256-o/z6kPkEdOiAuBTgTdUaFN/F+srDaF3EbsJbkeAboXk=" crossorigin="anonymous"></script>


<header>
  <section class="siema">
    <div>Hi, I'm slide 1</div>
    <div>Hi, I'm slide 2</div>
    <div>Hi, I'm slide 3</div>
    <div>Hi, I'm slide 4</div>
  </section>
  
  <nav>
    <a href="">uno</a>
    <a href="">dos</a>
    <a href="">tres</a>
    <a href="cuatro"></a>
  </nav>
</header>

CSS

*{margin: 0;padding: 0;}
body, html{
  background-color: #edeef0;
}
header{
  position: relative;
  width: 100%;
  height: 100vh;
}

nav{
  display: block;
  position: absolute;
  left: 50%;
  top: 1em;
  transform: translate(-50%, 0);
  color: #fff;
  text-align: center;
  font-size: 1em;
  font-family: sans-serif;
  text-decoration: none;
}
a{color: inherit;font-weight: bolder}
.siema{
  width: 100%;
  height: 100%;
}
.siema div{
  width: 100%;
  height: 100%;
  
}
.siema div div{
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  color: #fff;
  text-align: center;
  font-size: 2em;
  font-family: sans-serif;
  background-image: url(https://source.unsplash.com/500x300/?girl);
}

JavaScript

new Siema();