JSFiddle - React, Tailwind, and code Playground

by Evgenii Malikov

HTML

<div class="alert hide" id="alert">
  SOME ANNOYING ALERT HERE!
  <button type="button" id="dismiss">X</button>
</div>

CSS

.alert{
  border: 1px dashed lime;
  font-size: x-large;
  display: inline-block;
}
.hide{ display: none; }

JavaScript

document.addEventListener("DOMContentLoaded", function() {
   let dismissed = sessionStorage.getItem("dismissed");
   let alertDiv = document.getElementById("alert");
   let dismissButton = document.getElementById("dismiss")
   if(!dismissed){
     alertDiv.classList.remove("hide");
   }

  addEventListener("click", function(){
    alertDiv.classList.add("hide");
    sessionStorage.setItem("dismissed", true);
  });
});