JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<script src="http://theconfluencegroup.com/new_site5/jquery.zoomooz.js"></script>
<link rel="stylesheet" href="http://janne.aukia.com/zoomooz/website-assets/website.css">
<a class="button">Retour</a>

<a class="button1">Retour</a>

<div class="content">This will be shown when zoomed into.</div>
<div class="content1">This will be shown when zoomed into.</div>

CSS

.button {
    display:block;
    background-color:black;
    padding:20px;
    margin:20px;
    position:fixed;
    float:left;
    top:100px;
    cursor:pointer;
}
.button1 {
    display:block;
    background-color:black;
    padding:20px;
    margin:20px;
    position:fixed;
    float:left;
    cursor:pointer;
}
.content {
    display:block;
    background-color:black;
    padding:20px;
    margin:20px;
    color:red;
    float:right;
}
.content1 {
    display:block;
    background-color:black;
    padding:20px;
    margin:20px;
    color:red;
    float:right;
}

JavaScript

$(".button").click(function (evt) {
        $(".content").zoomTo({
            targetsize: 0.75,
            duration: 100
        });
        evt.stopPropagation();
    });
    $(".button1").click(function (evt) {
        $(".content1").zoomTo({
            targetsize: 1,
            duration: 100
        });
        evt.stopPropagation();
       
    });

$("body").zoomTo();