JSFiddle - React, Tailwind, and code Playground

HTML

<section class="pseudo-menu-top hidden-xs">
             <div class="container">
                 <nav>
                     <ul class="nav navbar-nav pseudo-top-menu">
                        <li><a class="pseudo-link" href="#">link 1</a></li>
                        <li><a class="pseudo-link" href="#">link 2</a></li>
                        <li><a class="pseudo-link" href="#">link 3</a></li>
                        <li><a class="pseudo-link" href="#">link 4</a></li>
                     </ul>
                 </nav>   
             </div>
         </section>
         <section class="teasers hidden-xs">
             <div class="container">
                 <nav>
                     <ul class="nav navbar-nav teasers-menu">
                        <li><span class="teaser t1"></span><span class="spoiler">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></li>
                        <li><span class="teaser t2"></span><span class="spoiler">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></li>
                        <li><span class="teaser t3"></span><span class="spoiler">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></li>
                        <li><span class="teaser t4"></span><span class="spoiler">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip...

CSS

.pseudo-top-menu, .teasers-menu{
    display: table;
    width: 100%;
}

.pseudo-top-menu li, .teasers-menu li{
    display: table-cell;
    float: none;
}

.pseudo-link{
    padding: 10px 5px;
}

.teaser {
  background: url("http://www.styleinter.net/wp-content/uploads/2010/08/2-117-300x238.jpg");
  width: 186px;
  height: 186px;
    display: block;
}

.spoiler{
    display: block;
    width: 186px;
    height: 186px;
}

.content{
    background: yellow;
    width: 100%;
    height: 200px;
}

.teasers-menu li{
position:relative;
}

.teaser, .spoiler { 
 position:absolute;
}

JavaScript

$('.spoiler').hide();
    $('.pseudo-top-menu .pseudo-link').on({
        mouseenter: function() {
            var index = $(this).parent().index() + 1;
            $('.t' +index).fadeOut();
            $('.t' +index+ '+.spoiler').fadeIn();
        },
        mouseleave: function() {
            var index = $(this).parent().index() + 1;
    
            $('.t' +index+ '+.spoiler').fadeOut();	
           $('.t' +index).fadeIn();
        }
    });