JSFiddle - React, Tailwind, and code Playground

by maxell4o

HTML

<button>Click me</button>

<div class='popover'>
<span class='close'>X</span>
<div class="body"></div>
</div>

SCSS

.popover{
  position: absolute;
  width: 60%;
  height: 80%;
  left: 20%;
  top: 10%;
  background: #ddd;
  display: none;
  &.open{
    display: block;
  }
  .close {
    position: absolute;
    top: 15px;
    right: 15px;
    display: block;
    color: black;
    font-size: 30px;
    z-index: 1;
    cursor: pointer;
    &:hover {
      color: red;
    }
  }
}

Babel + JSX

let btn = document.querySelector('button');
let popover = document.querySelector('.popover');
let close = popover.querySelector('.close');
let body = popover.querySelector('.body');



let onOpen = (e) => {
  popover.classList.add('open');
  loadData();
}

let onClose = () => {
  popover.classList.remove('open');
}

let loadData = () => {
	fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => {
  	body.innerHTML = JSON.stringify(json);
  })
}

btn.addEventListener('click', onOpen);
close.addEventListener('click', onClose);