JSFiddle - React, Tailwind, and code Playground

by michananya

HTML

<div class="sidebar">
  <button type="button" id="IN">Zoom in</button>
  <button type="button" id="OUT">Zoom out</button>
<br/>

  <div class="graph"></div>
  <div class="graph"></div>
  <div class="graph"></div>
  <div class="graph"></div>
</div>

CSS

body {
  margin: 0;
}
.sidebar {
  width: 400px;
  border-right: 1px solid #ddd;
  height: 100%;
  padding-bottom: 80px; 
}

.graph {
  width: 230px;
  height: 150px;
  background-color: #eeeeee;
  border: 1px solid #ddd;
  margin: 5px;
  display: inline-block;
}

.in-1 {
  zoom: 1.25;
}
.in-2 {
  zoom: 1.5;
}

.out-1 {
  zoom: 0.75;
}
.out-5 {
  zoom: 0.5;
}

JavaScript

$( "#IN" ).click(function() {
  $( ".graph" ).addClass( "in-1");
  $( this ).addClass( "x1");
});

$( "#OUT" ).click(function() {
  $( ".graph" ).addClass( "out-1");
  $( this ).addClass( "x75");
});