JSFiddle - React, Tailwind, and code Playground

by format

HTML

<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: 0px; 
      position: absolute; 
      top: 0; 
      left: 0; 
      bottom: 0;
      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; */
    }

JavaScript

$(".content").on("click", function(e) {
  if($(".left-menu").width() == 200) {
    $(".left-menu").width(0);
  } else {
    $(".left-menu").width(200);
  }
});