JSFiddle - React, Tailwind, and code Playground

HTML

<dl class="tabs" id="Overview-pane"><dt id="Description"><span>Descrizione</span></dt><dd><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero nibh; accumsan a viverra non, commodo at eros. Nulla blandit tellus sit amet ipsum commodo id rhoncus enim cursus. Sed sed sapien nunc, eu rhoncus magna. Proin eget sapien non mi mollis feugiat! Proin pretium lacus a ipsum accumsan vestibulum? In hac habitasse platea dictumst. Cras ac magna sit amet dui iaculis commodo. In hac habitasse platea dictumst. Fusce a orci ut libero viverra ultricies ac sed sapien. Ut sed nisl justo. Maecenas mollis dapibus tincidunt. Mauris vitae orci ut sapien pharetra feugiat. Aliquam nisl est, commodo ac tristique vitae, tincidunt non neque.<br />  </p></dd><dt id="Vani"><span>Vani</span></dt><dd>accumsan a viverra non, commodo at eros. Nulla blandit tellus sit amet  ipsum commodo id rhoncus enim cursus. Sed sed sapien nunc, eu rhoncus  magna. Proin eget sapien non mi mollis feugiat! Proin pretium lacus a  ipsum accumsan vestibulum?<table><tr><td>Camera matrimoniale</td><td>17.12&#160;m&#178;</td></tr><tr><td>Cucina</td><td>15&#160;m&#178;</td></tr><tr><td>Soggiorno</td><td>25&#160;m&#178;</td></tr><tr><td>Bagno finestrato</td><td>12.12&#160;m&#178;</td></tr></table></dd></dl>

CSS

dl.tabs {
    float: left;
    margin: 10px 0 -1px 0;
    z-index: 50;
}

dl.tabs dt {
    float: left;
    padding: 4px 10px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    margin-left: 3px;
    background: #f0f0f0;
    color: #666;
}

dl.tabs dt.open {
    background: #F9F9F9;
    border-bottom: 1px solid #F9F9F9;
    z-index: 100;
    color: #000;
}

div.current {
    clear: both;
    border: 1px solid #ccc;
    padding: 10px 10px;
}

div.current dd {
    padding: 0;
    margin: 0;
}

JavaScript

var JTabs = new Class({

    getOptions: function(){
        return {

            display: 0,

            onActive: function(title, description){
                description.setStyle('display', 'block');
                title.addClass('open').removeClass('closed');
            },

            onBackground: function(title, description){
                description.setStyle('display', 'none');
                title.addClass('closed').removeClass('open');
            }
        };
    },

    initialize: function(dlist, options){
        this.dlist = $(dlist);
        this.setOptions(this.getOptions(), options);
        this.titles = this.dlist.getElements('dt');
        this.descriptions = this.dlist.getElements('dd');
        this.content = new Element('div').injectAfter(this.dlist).addClass('current');

        for (var i = 0, l = this.titles.length; i < l; i++){
            var title = this.titles[i];
            var description = this.descriptions[i];
            title.setStyle('cursor', 'pointer');
            title.addEvent('click', this.display.bind(this, i));
            description.injectInside(this.content);
        }

        if ($chk(this.options.display)) this.display(this.options.display);

        if (this.options.initialize) this.options.initialize.call(this);
    },

    hideAllBut: function(but){
        for (var i = 0, l = this.titles.length; i < l; i++){
            if (i != but) this.fireEvent('onBackground', [this.titles[i], this.descriptions[i]])
        }
    },

    display: function(i){
        this.hideAllBut(i);
        this.fireEvent('onActive', [this.titles[i], this.descriptions[i]])
    }
});

JTabs.implement(new Events);
JTabs.implement(new Options);
window.addEvent('domready', function(){ $$('dl.tabs').each(function(tabs){ new JTabs(tabs, {}); }); });