useEffect(() => {
  // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
  const vh = window.innerHeight * 0.01
  // Then we set the value in the --vh custom property to the root of the document
  document.documentElement.style.setProperty('--vh', `${vh}px`)

  window.addEventListener('resize', () => {
    // We execute the same script as before
    const vh = window.innerHeight * 0.01
    document.documentElement.style.setProperty('--vh', `${vh}px`)
  })
}, [])

.min-h-screen {
  min-height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  min-height: calc(var(--vh, 1vh) * 100);
}