JSFiddle - React, Tailwind, and code Playground

HTML

<div class="marioHeader" style="background-color: brown">
     <div class="headermario" style="width: 200px;">
    </div>
  </div>

CSS

.marioHeader{
    background-image: url("resources/marioBackground.jpg");
    background-size: 600px;
    height: 500px;
    background-position: bottom;
    display: flex;
    justify-content: center;
    align-items: center;
}
.headermario {
    background-image: url("resources/banner.png");
    background-size: 600px;
    background-repeat: no-repeat;
    background-position: bottom;
    height: 200px;
    width: 200px;
}

.headermario:hover {
  background-color: blue;
}

JavaScript

let updateStateCallback;

// Set this up outside of useEasterEgg, or put it init's own init method, otherwise
// one event will fire for every time you call useEasterEgg
document.addEventListener('keydown', () => {
    // other code
    const data = 'test';
    updateStateCallback(data);
});

function useEasterEgg() {
  function onUpdateState(callback) {
    updateStateCallback = callback;
  }
  
  return {
    onUpdateState,
  }
}


// Put this wherever you want to change
const { onUpdateState } = useEasterEgg();

onUpdateState(data => console.log(data));