JSFiddle - React, Tailwind, and code Playground

by Dejan Munjiza

HTML

<div id="hidealert" class="container">
    <p>Be the first to hear about Apollo. <button class="alert-link" onclick="mySecondFunction()">Sign up to our mailing list</button></p>
    <div class="xbutton">
        <button class="xbutton-inner" onclick="myFunction()"></button><br>
    </div>
</div>
<div id="showbox">Testiranje prikazivanja</div>
    
    
<script>
function myFunction() { document.getElementById("hidealert").style.display = "none"; }
function mySecondFunction() {
    document.getElementById("showbox").style.display = "block";
    document.getElementById("hidealert").style.display = "none";
    }
</script>

CSS

.xbutton-inner { 
    width: 33px; 
    height: 33px; 
    background: url('https://cdn1.iconfinder.com/data/icons/nuove/128x128/actions/fileclose.png') no-repeat;
    background-size: contain;
}

.xbutton-inner:hover {
    animation: spin 0.5s ease forwards;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

#showbox { display: none;  background: red; }