JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<h2>Thème 1</h2>
<a href="#user-manager" class="btn" data-toggle="slide">
    <i class="icon-user"></i> Gérer les utilisateurs
</a>

<!-- The slide -->
<div id="user-manager" class="slide-pane" style="display: none;">
    <div class="modal-header">
        <button class="close">&times;</button>
        <h3>Gestion des utilisateurs</h3>
    </div>
    <div class="modal-body">
        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
        <p>
    </div>
</div>

<!-- The black transparent background -->
<div class="modal-backdrop" style="display: none;"></div>

CSS

/*!
 * Bootstrap v2.1.0
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}a:hover,a:active{outline:0}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{height:auto;max-width:100%;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}#map_canvas img{max-width:none}button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle}button,input{*overflow:visible;line-height:normal}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}textarea{overflow:auto;vertical-align:top}.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{margin:0;font-family:"Helvetica...

JavaScript

$(function() {

    var _config = {
        'effectDuration': 500 // Duration for jQuery UI effects (slide, drop)
    };

    var currentSlide = null;

    // Opens a slide
    $('a[data-toggle="slide"]').click(function (e) {
        e.preventDefault(); 
        
        currentSlide = $(this).attr('href');

        $(currentSlide).show('slide', { direction: 'right' }, _config.effectDuration);
        $('div.modal-backdrop').fadeIn(_config.effectDuration);
    });

    // Closes the current slide
    $('div.modal-backdrop, button.close').click(function () {
        $(currentSlide).hide('drop', { direction: 'right' }, _config.effectDuration);
        $('div.modal-backdrop').fadeOut(_config.effectDuration);
    });
    
});