JSFiddle - React, Tailwind, and code Playground

by Travis Almand

HTML

<main>
  <button data-console="clear">clear()</button>
  <section id="title">
    <h1>this is the title</h1>
  </section>
  <div class="slide current">
    <div class="desc"></div>
    <div class="button"></div>
  </div>
  <div class="slide">
    <div class="desc"></div>
    <div class="button"></div>
  </div>
  <section id="panel">
    <button id="prev" type="button" disabled>prev</button>
    <button id="next" type="button">next</button>
  </section>
</main>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap');

html {
  box-sizing: border-box;
  font-size: 10px;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html,
body {
  contain: content;
  height: 100%;
  margin: 0;
  padding: 0;
}

main {
  align-items: center;
  background-color: rgb(240, 240, 240);
  color: #333;
  display: flex;
  flex-direction: column;
  font-family: 'Open Sans', sans-serif;
  height: 100%;
  justify-content: space-between;
}
main section {
  width: 100%;
}

#title h1 {
  font-family: 'Open Sans', cursive;
  font-size: 3rem;
  margin: 1.6rem 0;
  text-align: center;
}

.slide {
  background-color: white;
  border: 3px solid rebeccapurple;
  box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.5);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  font-size: 2rem;
  font-weight: 700;
  height: calc(100% - 10rem);
  justify-content: center;
  opacity: 0;
  padding: 2rem;
  position: absolute;
  transition: opacity 1000ms;
  width: calc(100% - 5rem);
  z-index: -1;
}
.slide.current {
  opacity: 1;
  position: static;
  z-index: 1;
}
.slide pre {
  background-color: #333;
  color: white;
  line-height: 1.5em;
  padding: 1rem;
}
.slide .button {
  margin-top: 2rem;
  text-align: center;
}
.slide .button button {
  font-size: 2rem;
}

#panel {
  align-items: stretch;
  display: flex;
  justify-content: center;
}

#panel button {
  font-size: 2rem;
  margin: 2rem;
  padding: 1rem 0;
  width: 50%;
}
[data-console="clear"] {
  font-size: 1.4rem;
  margin: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}

button {
  background-color: white;
  border: 2px solid rebeccapurple;
  cursor: pointer;
  font-family: 'Open Sans', cursive;
  font-weight: 700;
  padding: 0.5rem 2rem;
  transition: transform 100ms;
  user-select: none;
}
button:active {
  transform: scale3d(0.95, 0.95, 1);
}
button[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

JavaScript

let main = document.querySelector('main');
let title = document.querySelector('#title h1');
let panel = document.querySelector('#panel');
let slides = document.querySelectorAll('.slide');

let currentSlide = 0;

let consoles = {
	clear: () => {
  	console.clear();
  },
  console: () =>{
  	console.log(console);
  },
  common: () => {
    console.debug('console.debug()');
    console.error('console.error()');
    console.info('console.info()');
    console.log('console.log()');
    console.warn('console.warn()');
  }
};

let data = [
	{
  	title: 'The Console Object',
    button: '<button data-console="console">log the console object</button>',
    desc: `<p>The developer’s debugging console has been available in one form or another in web browsers for many years now. Starting out as a means for errors to be reported to the developer, its capabilities have increased in many different ways. Useful features of the console are automatically logging information such as network requests, network responses, security errors or warnings, and more.</p><p>There is also a way for the website’s JavaScript to trigger various commands that output to the console for debugging purposes. These commands are contained in a console object available in almost every browser.</p><pre><code>console.log(console);</code></pre>`
  },
  {
  	title: 'Common Usage',
    button: '<button data-console="common">common usage</button>',
    desc: `<p>We shall start with five commands that at first glance do much the same thing. Which, technically, they do. But the browsers provide additional features tied to the five commands to give each their own distinct benefit.</p><pre><code>console.debug('console.debug()');\nconsole.error('console.error()');\nconsole.info('console.info()');\nconsole.log('console.log()');\nconsole.warn('console.warn()');</code></pre>`
  }
];

main.addEventListener('click', e => {
	if (e.target.dataset.console) {
	  consoles[e.target.dataset.console](e);
 ...