JSFiddle - React, Tailwind, and code Playground

HTML

<!-- https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
   
  </head>
  <body>
    <h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>

    <p>
      This demo uses the <code>:fullscreen</code> pseudo-class to automatically
      change the style of a button used to toggle fullscreen mode on and off,
      entirely using CSS.
    </p>

    <button id="fs-toggle">Toggle Fullscreen</button>
  </body>
</html>

CSS

#fs-toggle:fullscreen {
        background-color: #faa;
      }

      #fs-toggle:not(:fullscreen) {
        background-color: #afa;
      }