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();
    });
});