JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box_meteo">
    <div class="box_meteo_pulsanti">
        <a href="javascript:void(0);" class="box_meteo_pulsante" id="meteoButton1">Link</a>
    </div>
    
    <div class="meteo_content">
       Text
    </div>        
</div>

CSS

.box_meteo
{
    width:600px;
    position:relative;
    height:200px;
}

.box_meteo_pulsanti
{
    position:absolute;
    bottom:0px;
    left:0px;
}

a.box_meteo_pulsante
{
    float:left;
    color:#ffffff;    
}

#meteoButton1
{
    width:150px;
    height:24px;
    position:relative;
    z-index:10;
    color:red;
}

.meteo_content
{
    position:absolute;
    bottom:0px;
    width:300px;
    height:180px;
    display:none;
    background-color:#2c2c2c;
    color:#ffffff;
}

JavaScript

$('#meteoButton1').click(function() {
        if ($(".meteo_content").is(":hidden")) {
            $('.meteo_content').slideDown('slow', function() {
                return true;
            });
        } else {
            $('.meteo_content').slideUp('slow', function() {
                return true;
            });
        }
    });