JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<h1>
OSX Terminal Cheatsheet
</h1>
<table>
<thead>
<tr>
<th>Key/Command</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><kbd>Ctrl</kbd> + <kbd>A</kbd></td>
<td>Move carat to the beginning of the current line.</td>
</tr>
<tr>
<td><kbd>Ctrl</kbd> + <kbd>E</kbd></td>
<td>Move carat to the end of the current line.</td>
</tr>
<tr>
<td><kbd>Ctrl</kbd> + <kbd>Q</kbd></td>
<td>Clear current line.</td>
</tr>
<tr>
<td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
<td>Clear Terminal window.</td>
</tr>
<tr>
<td><kbd>Ctrl</kbd> + <kbd>K</kbd></td>
<td>Clear Terminal window.</td>
</tr>
<tr>
<td><kbd>Ctrl</kbd> + <kbd>U</kbd></td>
<td>Cut everything from the carat position to beginning of line.</td>
</tr>
<tr>
<td><kbd>Ctrl</kbd> + <kbd>K</kbd></td>
<td>Cut everything from the carat position to end of line</td>
</tr>
<tr>
<td>Ctrl + W</td>
<td>Cut one word backwards using white space as delimiter</td>
</tr>
<tr>
<td>Ctrl + Y</td>
<td>Paste whatever was cut by the last cut command</td>
</tr>
<tr>
<td>Ctrl + H</td>
<td>Same as backspace</td>
</tr>
<tr>
<td>Ctrl + C</td>
<td>Kill whatever you are running</td>
</tr>
<tr>
<td>Ctrl + D</td>
<td>Exit the current shell when no process is running, or send EOF to a the running process</td>
</tr>
<tr>
<td>Ctrl + Z</td>
<td>Puts whatever you are running into a suspended background process. fg restores it.</td>
</tr>
<tr>
<td>Ctrl + _</td>
<td>Undo the last command. (Underscore.  So it's actually Ctrl + Shift + minus)</td>
</tr>
<tr>
<td>Ctrl + T</td>
<td>Swap the last two characters before the cursor</td>
</tr>
<tr>
<td>Ctrl + F</td>
<td>Move cursor one character forward</td>
</tr>
<tr>
<td>Ctrl + B</td>
<td>Move cursor one character backward</td>
</tr>
<tr>
<td>Option + →</td>
<td>Move cursor one word forward</td>
</tr>
<tr>
<td>Option + ←</td>
<td>Move cursor one word backward</td>
</tr>
<tr>
<td>Esc + T</td>
<td>Swap the last two words before the cursor</td>
</tr>
<tr>
<td>Tab</td>
<td>Auto-complete files and folder...

CSS

body {
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  margin:30px;
}
table {
  border-spacing:0;
  border-collapse:collapse;
}
table th, table td {
    padding: 6px 18px;
    border: 1px solid #dfe2e5;
}
table tr:nth-child(2n) {
    background-color: #f6f8fa;
}
kbd {
  border-radius: 3px;
  padding:.5em;
  line-height:1em;
  min-width:1em;
  border: 1px solid rgba(0,0,0,0.3);
  background:#eee;
  display:inline-block;
  text-align:center;
  vertical-align:middle;
}
code {
  padding:.5em 0;
  line-height:1em;
  min-width:1em;  
  display:inline-block;
  text-align:center;
  vertical-align:middle;
}
code:before {
  content:"";
}
code:after {
  content:"";
  height:1.5em;
  width:.6em;
  display:inline-block;
  background:rgba(0,0,0,0.1);
  vertical-align:middle;
}