JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<div class="console">
  <header>
    <span>Command Prompt</span><span class="cmdbx">×</span><span class="cmdb">□</span><span class="cmdb">–</span>
  </header>
  <div class="consolebody">
    <p> type help to see a list of commands</p>
    <p></p>
  </div>
</div>

CSS

.console {
  width: 700px;
  height: auto;
  box-sizing: border-box;
  margin: auto;
border: 0.1px solid #000;
}

.console header {
  background-color: #fff;
  text-align:left;
  line-height: 30px;
  color: #000;
  padding-left: 20px;
}

.console .consolebody {

  box-sizing: border-box;
  padding: 20px;
  height: calc(100% - 40px);
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
  background-color: #000;
  color: #ccc;
}

.cmdb{
  font-size: 23px;
  padding-right:23px;
  float:right;
}
.cmdbx{
  font-size: 23px;
  padding-right:10px;
  float:right;
}