JSFiddle - React, Tailwind, and code Playground

HTML

<div>
	<p>Ceci est un texte d'essai.</p>
</div>
<span id="plus">+</span><span id="moins">-</span>

CSS

html, body {overflow:hidden;height:100%;margin:0;}
body {display:table;width:100%;text-align:center;}
div {display:table-cell;vertical-align:middle;font:700 1em sans-serif;transition:transform .4s ease;}
span {position:fixed;width:50%;bottom:0;left:0;font:700 1.2em/45px sans-serif;color:#fff;background:#333;cursor:pointer;transition:all .3s ease;}
span+span {left:auto;right:0;border-left:1px solid #fff;}
span:hover {background:#545454;}

JavaScript

function addEvent(a,b,c,d){a.addEventListener?a.addEventListener(b,c,d||!1):a.attachEvent('on'+b,c);}

function changeZoom(zoom, e){
	
	currentZoom += coefficient * (e.detail < 0 || e.wheelDelta > 0 || zoom > 0 ? 1 : -1);
	
	currentZoom < 0 && (currentZoom = 0);
	
	transform && (zoomArea.style[transform] = "scale("+ (currentZoom) +")");
	
	("zoom" in document.body.style && !transform) && (zoomArea.style.zoom = currentZoom);
	
}

var zoomArea = document.querySelector("div"),
	currentZoom = 1,
	coefficient = .2,
	transform;

if ("transform" in document.body.style) {
	transform = "transform";
}else {
	for (var p in document.body.style) {
		if (/^((Moz|(?:w|W)ebkit|ms|o)Transform)/.exec(p)) {
			transform = RegExp.$1;
			break;
		}
	}
}

addEvent(document, "DOMMouseScroll", function(e){changeZoom(null, e)});
addEvent(document, "mousewheel", function(e){changeZoom(null, e)});
addEvent(document.getElementById("plus"), "click", function(e){changeZoom(1, e)});
addEvent(document.getElementById("moins"), "click", function(e){changeZoom(-1, e)});