JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <nav>
        <ul>
            <li>Sekce 1</li>
            <li>Sekce 2</li>
            <li>Sekce 3</li>
        </ul>
    </nav>
</header>
<section>
    <div>
        <p id="change">dddd</p>
    </div>
</section>

<div id="red"></div>
   <div id="blue"></div>

CSS

nav {
    background-color: black;
    color: white;
    position: fixed;
	top: 0;
	width: 100%;
    
}

#change {
    background-color: white;
    opacity: 0;
    
}

#red{position:absolute; left:150px; top:150px; height:150px; width:150px;background-color:red;border-radius:50%;opacity: 0;z-index:-1}
#blue{position:absolute; left:175px; top:175px; height:100px; width:100px;background-color:blue;border-radius:50%;z-index:1}

JavaScript

$('#change').animate({opacity: 1}, 10000); 
setTimeout("$('#change').animate({opacity: 0}, 10000)",12000);

$('#red').animate({opacity: 1}, 10000); 
setTimeout("$('#red').animate({opacity: 0}, 10000)",12000);