JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<div id="ui-manager" class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 jss3 react-draggable react-draggable-dragged css-100bkux" style="width: fit-content; min-width: 45vw; top: 209px; left: 647px;">
  <div id="ui-manager-header" class="MuiDrawer-root MuiDrawer-docked css-v3syqg border-bottom" style="width: 100%;">
    <div class="jss4 MuiBox-root css-0" draggable="true"><svg class="MuiSvgIcon-root MuiSvgIcon-colorSecondary MuiSvgIcon-fontSizeMedium jss7 css-14r2v8n"></svg>
      <p class="MuiTypography-root MuiTypography-body1 css-m9uj84">Interface Utilities</p><button class="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButtonBase-root jss5 css-4i0fr7">x</button>
    </div>
  </div>
  <div class="MuiCollapse-root MuiTypography-root MuiTypography-body1 MuiListItemText-primary css-1jv9su0">
    <div class="MuiTable-root css-1gurbcj">
      <div class="max-10 liner" id="ui-utilities-liner">test<ul>
          <li>BitNode: 9</li>
          <li>HackNet.Server: true</li>
          <li>Singularity.Api: false</li>
          <li>bruteSSH.exe: true</li>
          <li>FTPCrack.exe: true</li>
          <li>relaySMTP.exe: true</li>
          <li>HTTPWorm.exe: true</li>
          <li>SQLInject.exe: true</li>
          <li>AutoLink.exe: true</li>
          <li>DeepScanV1.exe: true</li>
          <li>DeepScanV2.exe: false</li>
          <li>ServerProfiler.exe: true</li>
          <li>Has4SData: () =&gt; this.#has4SData()</li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS

.jss3 {
  display: flex;
  z-index: 1500;
  flex-direction: column;
  justify-content: flex-end;
}

.css-100bkux {
  color: rgba(0, 0, 0, 0.87);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
  border-radius: 0px;
  background-color: rgb(37, 37, 37);
  border: 1px solid rgb(68, 68, 68);
}

.css-v3syqg {
  flex: 0 0 auto;
  width: 248px;
  white-space: nowrap;
  box-sizing: border-box;
  transition: width 225ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
  overflow-x: hidden;
}

.jss4 {
  cursor: grab;
  display: flex;
  text-align: center;
  align-items: center;
  flex-direction: row;
}

.css-1jv9su0 {
  margin: 0px;
  font-family: "Lucida Console", "Lucida Sans Unicode", "Fira Mono", Consolas, "Courier New", Courier, monospace, "Times New Roman";
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  display: block;
  color: rgb(204, 204, 174);
}

.css-1uk9hdf {
  list-style: none;
  margin: 0px;
  padding: 0px;
  position: relative;
  height: 400px;
  overflow-y: scroll;
}

.css-1f1ab06 {
  color: rgba(0, 0, 0, 0.87);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
  border-radius: 0px;
  background-color: rgb(37, 37, 37);
  border: 1px solid rgb(68, 68, 68);
  padding-top: 8px;
  padding-bottom: 8px;
  max-height: 400px;
  overflow-y: scroll;
}