JSFiddle - React, Tailwind, and code Playground

by josekerekes

HTML

<div id="wrap">
    <ul class="zoom-list">	
        <li class="small"><a href="javascript:void(0)">A</a></li>
        <li class="medium active"><a href="javascript:void(0)">A</a></li>
        <li class="large"><a href="javascript:void(0)">A</a></li>
    </ul>

    <p>Lorem ipsum dolor sec tu amet Lorem ipsum dolor sec tu amet Lorem ipsum dolor sec tu amet Lorem ipsum dolor sec tu amet Lorem ipsum dolor sec tu amet Lorem ipsum dolor sec tu amet Lorem ipsum dolor sec tu amet</p>
</div>

CSS

body {padding:0;margin:0}
.zoom-list li { display:inline;font-size:15px }
.zoom-list li a {text-decoration:none}
.zoom-list .medium {font-size:19px}
.zoom-list .large {font-size:23px}

p {background:#ccc;border:2px solid red;width:120%}

JavaScript

$('.zoom-list a').click(function(i){
	 $('body').css({zoom:'',transform:''});
     var amount = $('.zoom-list li').index($(this).parent()), zoom;
    
     if(amount == 0) {  zoom = .5 }
     else if(amount == 1) { zoomAmount = $(window).width()/$("p").outerWidth()*100;;   zoom = zoomAmount/100 }  
     else { zoom = 1.5 }  
      
    
             
     document.body.style.transform = 'scale('+ zoom + ')' 
      document.body.style.transformOrigin = '0 0'
            
});