html css template for programming code show as like vs code

There are several templates available online for showcasing programming code in HTML and CSS. Here's one example that resembles the VS Code editor:

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Code Showcase</title>
</head>

<body>
  <div class="editor">
    <div class="editor-header">
      <div class="editor-buttons">
        <button class="editor-button"></button>
        <button class="editor-button"></button>
        <button class="editor-button"></button>
      </div>
      <div class="editor-tabs">
        <button class="editor-tab active">index.html</button>
        <button class="editor-tab">style.css</button>
        <button class="editor-tab">script.js</button>
      </div>
    </div>
    <div class="editor-content">
      <div class="code-wrapper">
        <pre class="code html">
          &lt;!DOCTYPE html&gt;
          &lt;html lang="en"&gt;
          
          &lt;head&gt;
            &lt;meta charset="UTF-8"&gt;
            &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
            &lt;title&gt;Code Showcase&lt;/title&gt;
          &lt;/head&gt;
          
          &lt;body&gt;
            &lt;h1&gt;Hello World!&lt;/h1&gt;
            &lt;p&gt;This is a code showcase.&lt;/p&gt;
          &lt;/body&gt;
          
          &lt;/html&gt;
        </pre>
        <pre class="code css">
          body {
            background-color: #1e1e1e;
            color: #d4d4d4;
            font-family: consolas, monospace;
          }
          
          h1 {
            color: #71d7ff;
          }
          
          p {
            font-size: 1.2rem;
          }
        </pre>
        <pre class="code javascript">
          console.log("Hello World!");
        </pre>
      </div>
    </div>
  </div>
</body>

</html>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #1e1e1e;
}

.editor {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 80%;
  border-radius: 5px;
  overflow: hidden;
  background-color: #2d2d2d;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  background-color: #3b3b3b;
}

.editor-buttons {
  display: flex;
  gap: 10px;
  margin-left: 10px;
}

.editor-button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #f04747;
}

.editor-tabs {
  display: flex;
  gap: 10px;
  margin-right: 10px;
}

.editor-tab {
  padding: 5px;
  font-size: 1rem;
  font-family: consolas, monospace;
  color: #d4d4d4;
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.editor-tab.active {
  color: #71d7ff;
  border-bottom: 2px solid #71d7ff;
}

.editor-content {
  height: calc(100% - 40px);
  padding: 10px;
  overflow-y: auto;
}

.code-wrapper {
  display: flex;
}

pre.code {
  flex: 1;
  margin: 0 10px;
  padding: 10px;
  font-size: 1rem;
  font-family: consolas, monospace;
  color: #d4d4d4;
  background-color: #1e1e1e;
  border-radius: 5px;
  overflow-x: auto;
  white-space: pre-wrap;
}

pre.code.html::-webkit-scrollbar,
pre.code.css::-webkit-scrollbar,
pre.code.javascript::-webkit-scrollbar {
  width: 8px;
}

pre.code.html::-webkit-scrollbar-thumb,
pre.code.css::-webkit-scrollbar-thumb,
pre.code.javascript::-webkit-scrollbar-thumb {
  background-color: #71d7ff;
  border-radius: 5px;
}

pre.code.html::-webkit-scrollbar-track,
pre.code.css::-webkit-scrollbar-track,
pre.code.javascript::-webkit-scrollbar-track {
  background-color: #2d2d2d;
}

This template includes an editor header with buttons and tabs, as well as a code wrapper with HTML, CSS, and JavaScript code blocks. The CSS also includes some styling for the scrollbar.

html css template for programming code show as like vs code