JSFiddle - React, Tailwind, and code Playground

by Chuan Shao

HTML

<div class="console">
<span class="prompt">
~/iwant-tutorial $
</span>
<samp><span class="mark"></span>
<kbd class="cmd">           $EDITOR "as-iwant-tutorial-developer/i-have/wsdefdef/src/main/ja      va/com/example/wsdefdef/IwantTutorialWorkspaceProvider.java"</kbd>
</samp>
</div>

CSS

.console {
  background: black;
  width: 720px;
}
.mark {
  display: inline-block;
  width: 0;
  visibility: hidden;
}
.prompt {
  color: green;
}
.cmd {
  color: white;
  word-break: break-all;
  white-space: pre-wrap;
  display: inline;
}