JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<div id="ipTable"> 
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
     <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
     <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    
</table>
    
    <table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
     <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
     <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    
</table>
</div>
<nav>
    <input type="button" id="btn_ZoomIn" value="Zoom in" />
    <input type="button" id="btn_ZoomOut" value="Zoom out" />
     <input type="button" id="btn_ZoomReset" value="Zoom Reset" />
</nav>

CSS

table {
    width:200px; height:200px; float:left; margin-top:25px;
}

table td {
    border:1px solid #eee;
    border-radius:5px;
    text-align:center;
}

nav {
    position:fixed;
    top:0px;
}

JavaScript

var currentZoom = 1.0;

    $(document).ready(function () {
        $('#btn_ZoomIn').click(
            function () {
                $('#ipTable').animate({ 'zoom': currentZoom += .1 }, 'slow');
            })
        $('#btn_ZoomOut').click(
            function () {
                $('#ipTable').animate({ 'zoom': currentZoom -= .1 }, 'slow');
            })
        $('#btn_ZoomReset').click(
            function () {
                currentZoom = 1.0
                $('#ipTable').animate({ 'zoom': 1 }, 'slow');
            })
    });