JSFiddle - React, Tailwind, and code Playground

by samc

HTML

<div class="slide-container">
  <div class="slide" id="side-1">
    <h1>Slide 1</h1>
    
    <a href="#side-2" title="Next slide">
      <svg viewBox="4 4 16 16"><use href="#arrow-down" /></svg>
    </a>
  </div>
  
  <div class="slide" id="side-2">
    <h1>Slide 2</h1>
    
    <a href="#side-1" title="Previous slide">
      <svg viewBox="4 4 16 16"><use href="#arrow-up" /></svg>
    </a>
    <a href="#side-3" title="Next slide">
      <svg viewBox="4 4 16 16"><use href="#arrow-down" /></svg>
    </a>
  </div>
  
  <div class="slide" id="side-3">
    <h1>Slide 3</h1>
    
    <a href="#side-2" title="Previous slide">
      <svg viewBox="4 4 16 16"><use href="#arrow-up" /></svg>
    </a>
    <a href="#side-4" title="Next slide">
      <svg viewBox="4 4 16 16"><use href="#arrow-down" /></svg>
    </a>
  </div>
  
  <div class="slide" id="side-4">
    <h1>Slide 4</h1>
    
    <a href="#side-3" title="Previous slide">
      <svg viewBox="4 4 16 16"><use href="#arrow-up" /></svg>
    </a>
    <a href="#side-5" title="Next slide">
      <svg viewBox="4 4 16 16"><use href="#arrow-down" /></svg>
    </a>
  </div>
  
  <div class="slide" id="side-5">
    <h1>Slide 5</h1>
    
    <a href="#side-4" title="Previous slide">
      <svg viewBox="4 4 16 16"><use href="#arrow-up" /></svg>
    </a>
    <a href="#side-1">Back to start</a>
  </div>
</div>

<svg style="display: none">
  <defs>
    <path id="arrow-up" d="M14,20H10V11L6.5,14.5L4.08,12.08L12,4.16L19.92,12.08L17.5,14.5L14,11V20Z" />
    <path id="arrow-down" d="M10,4H14V13L17.5,9.5L19.92,11.92L12,19.84L4.08,11.92L6.5,9.5L10,13V4Z" />
  </defs>
</svg>

CSS

body, html {
  height: 100%;
  min-height: 100%;
  margin: 0;
  scroll-behavior: smooth;
  font: 100%/1.5 sans-serif;
}

.slide-container {
  height: 100%;
}

.slide {
  display: flex;
  align-items: center;
  flex-direction: column;
  background: #6d5fbc;
  color: #fff;
  height: 100%;
  padding: 1em;
  box-sizing: border-box;
  overflow: auto;
}
.slide:nth-child(even) {
  background: #5fbc91;
}

.slide h1:first-of-type {
  margin-top: 0;
}

.slide a {
  display: block;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
.slide a:hover {
  text-decoration: underline;
}
.slide a:first-of-type {
  margin-top: auto;
}

.slide svg {
  width: 1.25em;
  fill: #fff;
}