JSFiddle - React, Tailwind, and code Playground

HTML

<dialog id="myDialog">
    <a href="#" id="fadeOut">fade out</a>
</dialog>

<a href="#" id="fadeIn">fade in</a>

CSS

dialog {
    position: absolute;
    left: 0; right: 0;
    margin: auto;
    border: solid;
    padding: 1em;
    background: white;
    color: black;
    display: block;

    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;

    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;
}
    
dialog,
dialog[open]::backdrop {
    visibility:hidden;
    opacity:0;
    transition:visibility 0s linear .5s,opacity .5s linear;
}

dialog[open].in,
dialog[open].in::backdrop {   
    transition-delay:0s;
}

dialog[open].in,
dialog[open].in::backdrop {
    opacity: 1;
    visibility: visible;
}

JavaScript

function closeModal() {
    document.getElementById('myDialog').close();
    document.getElementById('myDialog').removeEventListener('transitionend', closeModal);
}

document.getElementById('fadeOut').addEventListener('click', function() {
    document.getElementById('myDialog').className = '';
    document.getElementById('myDialog').addEventListener('transitionend', closeModal);
});


document.getElementById('fadeIn').addEventListener('click', function() {
    document.getElementById('myDialog').showModal();
    document.getElementById('myDialog').className = 'in';
});