JSFiddle - React, Tailwind, and code Playground

HTML

<div id="alert">
    Lorum Ipsum Delorum Alert!
</div>

<div  id="example">
    Blah Blah Blah Blah Blah Blah Blah Blah Blah 
    
    <div onclick="document.getElementById('example').className='alerting';document.getElementById('alert').style.display='block';">Go</div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
}

#example {
    background-image: url(https://www.stevefenton.co.uk/wp-content/uploads/2015/07/exploring-octopus-deploy-199x300.jpg);
    width: 100%;
    min-height: 100vh;
}

.alerting {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}

#alert {
    display: none;
    width: 300px;
    height: 100px;
    position: fixed;
    top: 100px;
    left: 0;
    text-align: center;
    width: 100%;
    z-index: 1000;
}