JSFiddle - React, Tailwind, and code Playground

by ksumarine

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>
      EX-4
    </title>
    <style>
    body {
    font-family: arial;
    position:relative;
    }

    #content {
      display:inline-block;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    }

    .bodyblue {
    background: #000;
    color: #fff;
    }

    .fullImage {
      display:inline-block;
    width:200px;
    height:300px;
    border: 1px solid #000;
    }

    h1 {
    transform-origin: 50% 50%;
    font-size: 50px;
    font-family: 'Sigmar One', cursive;
    cursor: pointer;
    z-index: 2;
    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
    }
    </style>
  </head>
  <body>
    <div class="contents" id="content"></div>
    <p>
      <button id="fullscreenButton">Full screen</button>
    </p>
    <div class="fullImage" id="fullImage"></div>
    <script>
        var images = [
          'https://picsum.photos/200/300/?image=1',
          'https://picsum.photos/200/300/?image=2',
          'https://picsum.photos/200/300/?image=3',
          'https://picsum.photos/200/300/?image=4',
          'https://picsum.photos/200/300/?image=5',
          'https://picsum.photos/200/300/?image=6',
          'https://picsum.photos/200/300/?image=7',
          'https://picsum.photos/200/300/?image=8',
          'https://picsum.photos/200/300/?image=9',
          'https://picsum.photos/200/300/?image=10'
        ];
        var currentIndex = 0;
        var content = document.getElementById('content');
        var full = document.getElementById('fullImage');
        var fullButton = document.getElementById('fullscreenButton');

        content.addEventListener('click', function() {
          currentIndex = currentIndex >= images.length - 1 ? 0 : currentIndex + 1;
          content.style.backgroundImage = `url(${images[currentIndex]})`;

        });

        fullButton.addEventListener('click', function() {
          full.style.backgroundImage =...