JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://oridomi.com/oriDomi.js"></script>
   
    <div class="demo1">
        <h1>Olivier</h1>
        <h4>Petit test d'un effet de pliage</h4>
        <p>nous pourrions utiliser ceci par exemple pour une gallerie, ou le titre et descriptif (et des bouton de partage (like, +1, ect..)) pourront être dans la partie pliée.</p>
        <p>Ou pour autre chose of course ;)</p>
    </div>

CSS

.hidden{
    display: none;
}

.demo1{
    width: 350px;
    margin: 0 auto;
    text-align: center;
    background-color: #b2e2db;
    color: #666;
    padding: 10px 0;
    border: 15px #eee solid;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .1);
    margin-bottom: 40px;
    background-size: 350px;
    cursor: pointer;
}
.demo1 > h1{
    text-transform: uppercase;
    letter-spacing: -2px;
    font-size: 70px;
    line-height: 2;
    margin-bottom : 50px ;
}
.demo1 > h4{
    font-size: 30px;
    line-height: 0;
    margin-bottom: 60px;
}
.demo1 > p{
    padding: 20px;
    text-align:left;
}

.demo{
    cursor: pointer;
}

JavaScript

(function(){
    

var $body,
    $tagline,
    $foldMe,
    $demo1,
    $demo2,
    $demo3,
    $demo4,
    $demo5,
    methodMap = { demo2: 'reveal', demo3: 'stairs', demo4: 'accordion', demo5: 'curl' };

function randomAngle(){
    return Math.random() * 60 * (Math.random() > .5 ? -1 : 1);
}

function init(){
    $body = $(document.body),
    $demo1 = $('.demo1').oriDomi({ hPanels: 3, vPanels: 2, perspective: 4000, speed: 600 }),

        
    clearTimeout( upd );
    
    var upd = setTimeout(function(){
        $demo1.click();
    }, 1);
    
    
    
    

    $body.on('click', '.source-link', function(){
        var $this = $(this);
        if($this.hasClass('open')){
            $this.removeClass('open').html('&larr; view source')
                .parent().find('article').addClass('hidden');
        }else{
            $this.addClass('open').html('&larr; hide source')
                .parent().find('article').removeClass('hidden');
        }
    }).on('click', '.demo', function(){
        var $this = $(this);
        console.lo
       $this.oriDomi(methodMap['demo' + $this.attr('data-id')], randomAngle(), $this.attr('data-anchor'));

    });
    
    $demo1.on('click', function(){
        if($demo1.hasClass('scrunched')){
            $demo1.removeClass('scrunched').oriDomi('reset');
        }else{
            $demo1.addClass('scrunched').oriDomi('reveal', -100, 'top');
        }
    });
    
    $foldMe.on('mouseover', function(){
        $foldMe.oriDomi('accordion', -40, 'top');

    }).on('mouseout', function(){
        $foldMe.oriDomi('reset');

    });
    
}


$(init);


})();