JSFiddle - React, Tailwind, and code Playground
HTML
<div class="slide">
<div class="content-switcher" id="Content1">
<img src="http://s2.glbimg.com/NpGhQXJdJdvabAJZK61Tj6mRYQo=/0x0:694x391/695x392/s.glbimg.com/po/tt2/f/original/2015/04/20/windows-10-logo.jpg" />
<div class="logo"></div>
<div class="mostraBox" style="display:none;width:100px;height: 20px; float:right; position: absolute;">Bem vindo ao Windows!</div>
</div>
<div class="content-switcher" id="Content2">
<img src="http://s2.glbimg.com/NpGhQXJdJdvabAJZK61Tj6mRYQo=/0x0:694x391/695x392/s.glbimg.com/po/tt2/f/original/2015/04/20/windows-10-logo.jpg" />
<div class="logo"></div>
<div class="mostraBox" style="display:none;width:100px;height: 20px; float:right; position: absolute;">Bem vindo ao Windows!</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#" class="item-number" onclick="selectStep(1); return false;">1</a>
<a href="#" class="item-number" onclick="selectStep(2); return false;">2</a>
</div>
CSS
.slide {
position: relative;
width: 650px;
height: 500px;
margin: 0 auto;
}
.slide img {
position: absolute;
}
.logo {
width: 130px;
height: 100px;
margin-top:150px;
margin-left: 100px;
border: 5px solid #FF0000;
position: absolute;
display:none;
}
.content-switcher{
display:none;
}
.content-switcher:first-child{
display: block;
}
JavaScript
function selectStep(n) {
$(".content-switcher").hide();
$("#Content"+n).show();
}
$(document).ready(function () {
$('.logo').fadeIn("slow").delay(3000).show();
$('.logo').on('click', function () {
$('.mostraBox').show();
});
});