Easy to use terminal based on the w3.css framework.
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-2021.css">
<style>
.w3-container::-webkit-scrollbar {
height: 10px;
width: 10px;
}
.w3-container::-webkit-scrollbar-thumb {
background-color: #455A64;
}
.w3-container::-webkit-scrollbar-track {
background-color: #38444f;
}
</style>
<body>
<div class="w3-container w3-margin">
<div class="w3-card-4 w3-bar w3-round-large">
<header class="w3-container w3-bar w3-dark-grey w3-padding">
<span class="w3-badge w3-red w3-circle w3-small w3-text-red"> </span>
<span class="w3-text-dark-grey"> </span>
<span class="w3-badge w3-yellow w3-circle w3-small w3-text-yellow"> </span>
<span class="w3-text-dark-grey"> </span>
<span class="w3-badge w3-green w3-circle w3-small w3-text-green"> </span>
</header>
<div class="w3-container w3-bar w3-2021-inkwell" style="max-width: 100%; max-height: 100%; overflow: auto;">
<pre>
sh$ echo 'Simple Terminal Code'
Simple Terminal code
sh$ echo 'This is a long line to show the horizontal scroll bar that will come up instead of wrapping around ...'
This is a long line to show the horizontal scroll bar that will come up instead of wrapping around ...
</pre>
</div>
</div>
</div>
</body>
</html>