JSFiddle - React, Tailwind, and code Playground

by format

HTML

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.js'></script>
<div class="container">
    <div class="left-menu">
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
      <p>做菜单内容</p>
    </div>
    <div class="content">
      <div style="margin-top: 200px;">
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
        <p>正文内容===================</p>
      </div>
    </div>
  </div>

CSS

body {
      background-color: yellow; 
      padding: 0;
      margin: 0;
    }
    .container {

    }
    .left-menu {
      background-color: yellowgreen; 
      width: 200px; 
      position: absolute; 
      top: 0; 
      left: 0; 
      bottom: 0;
      right: auto;
      transition: width .2s ease;
      overflow: auto;
      z-index: 1;
    }
    .content {
      position: absolute; 
      top: 0;
      bottom:0; 
      left:0; 
      right: 0;
      overflow: auto;
      z-index: 2;
      transform: translate3d(0, 0, 0);
      width: auto;
      height: auto;
      background-color: yellow;
    }

JavaScript

$(".content").on("click", function(e) {
  
  if($(".content").css("transform") == "matrix(1, 0, 0, 1, 0, 0)") {
    $(".content").transition({ 
      transform: 'translateX(200px)' 
    });  
  } else {
    $(".content").transition({ 
      transform: 'translateX(0px)' 
    });
  }

});