JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="accordion" id="accordion">
 
                <li class="bg4">
                    <h2>Nosotros</h2>
                    <div class="bgDescription"></div>
                    <div>
                        <h2>Nosotros</h2>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
                            quae ab illo inventore veritatis et quasi architecto beatae vitae
                            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
                            sit aspernatur aut odit aut fugit, sed quia consequuntur magni
                            dolores eos qui ratione voluptatem sequi nesciunt.</p>
                        <a href="#">more &rarr;</a>
                    </div>

                </li>
                
                <li class="bg2">

                    <h2>Kognitiva</h2>
                    <div class="bgDescription"></div>
                    <div>
                        <h2>Kognitiva</h2>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
                            quae ab illo inventore veritatis et quasi architecto beatae vitae
                            dicta sunt explicabo. </p>
                        <a href="#">more &rarr;</a>
                    </div>
                </li>

                <li class="bg3">

                    <h2>Kuantica</h2>
                    <div class="bgDescription"></div>
                    <div>
                        <h2>Kuantica</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

CSS

ul.accordion {
    font-family: Cambria,serif;
    font-size: 16px;
    font-style: italic;
    height: 500px;
    line-height: 1.5em;
    list-style: none outside none;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px;
    width: 960px;
}
ul.accordion li{
    float:left;
    width:115px;
    height:480px;
    display:block;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
    border: 1px solid #333;
}

ul.accordion li h2{
    background-color:#fff;
    padding:10px 0;
    opacity:0.9;
    top: 50px;
    width: 100%;
    position: absolute;
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:1em;
    color:#444;
    text-align:center;
    text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li div.bgGradient {
    background:transparent url(../images/bgDescription.png) repeat-x bottom center;
    display: block;
    bottom: -340px;
    height: 340px;
}
ul.accordion li div{
    position:absolute;
    bottom:0px;
    left:0px;
    display:none;
}
ul.accordion li div h2 {
    background: none repeat scroll 0 0 transparent;
    color: #FFF;
    font-size: 2em;
    font-style: normal;
    font-weight: bold;
    height: auto;
    letter-spacing: 1px;
    margin: 0 0 15px 20px;
    opacity: 1;
    padding: 0;
    position: static;
    text-align: left;
    text-shadow: 0px -1px 0 #000;
    text-transform: uppercase;
}

ul.accordion li div p{
    line-height:14px;
    margin:10px 22px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.6em;
    color: #FFF;
    text-decoration:...

JavaScript

var
$accordion = $('#accordion > li:nth-child(1n+2)')
    
$('#accordion > li:nth-child(1)').stop().animate({'width':'480px'},500);
$('#accordion > li:nth-child(1) h2').stop(true,true).fadeOut();
$('#accordion > li:nth-child(1) .bgDescription').stop(true,true).slideDown(500);
$('#accordion > li:nth-child(1) div + div').stop(true,true).fadeIn();


$accordion.hover(
                    function () {
                        var $this = $(this);
                        $('#accordion li:nth-child(1)').stop().animate({'width':'115px'},500);
                        $('#accordion li:nth-child(1) h2').stop(true,true).fadeIn();
                        $('#accordion li:nth-child(1) div + div').stop(true,true).fadeOut(500);
                        $('#accordion li:nth-child(1) .bgDescription').stop(true,true).slideUp(700);
                        
                        $this.stop().animate({'width':'480px'},500);
                        $('h2',$this).stop(true,true).fadeOut();
                        $('.bgDescription',$this).stop(true,true).slideDown(500);
                        $('div + div',$this).stop(true,true).fadeIn();
                    },
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'115px'},1000);
                        $('h2',$this).stop(true,true).fadeIn();
                        $('div + div',$this).stop(true,true).fadeOut(500);
                        $('.bgDescription',$this).stop(true,true).slideUp(700);
                        
                        $('#accordion li:nth-child(1)').stop().animate({'width':'480px'},500);
                        $('#accordion li:nth-child(1) h2').stop(true,true).fadeOut();
                        $('#accordion li:nth-child(1) .bgDescription').stop(true,true).slideDown(500)
                        $('#accordion li:nth-child(1) div + div').stop(true,true).fadeIn();
                    }
                );