JSFiddle - React, Tailwind, and code Playground

HTML

<div id="conteneur">

        <div id="header">
            <p>header</p>
            <div id="zoom_plus">zoom +</div>
            <div id="zoom_moins">zoom -</div>
            
        </div><!--fin header-->
        
        <div id="main_content">
            
            <div id="conteneur_centre_actu">
              
                 ...

CSS

body {
    margin: 0;
    -moz-transform: scale(1); 
    -moz-transform-origin: 0 0;
}

#conteneur
{
    width: 150px;
    position: relative;
    margin: auto;
}

#conteneur > * {    
    -moz-transform-origin: 0 0;
}

#header
{
    position:fixed;
    top:0;
    z-index:3;
    width:150px;
    height:81px;
    background-color:#ccc;
    padding-bottom:8px;
}

#main_content
{
    padding-left:78px;
}

#conteneur_centre_actu
{
    padding-top:116px;
}

.clear
{
   clear:both;
}

JavaScript

$(document).ready(function() {

    var zoom;
    zoom = 100;
    var scale;
    scale = 1;

    //---- zoom +
    $('#zoom_plus').css('cursor', 'pointer');
    $('#zoom_plus').click(function() {

        if ($.browser.mozilla && zoom < 120) {
            scale += 0.01;

            $('#conteneur > *').css({
                '-moz-transform': 'scale(' + scale + ')'
            });


        } else {
            zoom += 5;
            $('#conteneur > *').css({
                "zoom": zoom + "%"
            });

        }

    });

    //---- zoom -
    $('#zoom_moins').css('cursor', 'pointer');
    $('#zoom_moins').click(function() {

        if ($.browser.mozilla && zoom < 120) {
            scale -= 0.01;

            $('#conteneur > *').css({
                "-moz-transform": "scale(" + scale + ")"
            });


        } else {
            zoom -= 5;
            $('#conteneur > *').css({
                "zoom": zoom + "%"
            });
        }

    });


});