Home
Indra
Code Editor UI

Code Editor UI

Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

This tailwind example is contributed by Indra, on 31-Aug-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are blog page template, article page template,Email campaign,about me

Header Card Blog post page Breadcrumb Button Pagination Badge Newsletter About us

Author Indra

153

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" class="dark overflow-hidden min-h-screen w-screen max-h-screen select-none">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>app:tailwinds-v3</title>
  <link rel="stylesheet" href="dist/output.css" />
  <link rel="stylesheet" href="scrollbarsoverlay.css" />
  <style>
    .os-scollbar-handle {
      background-color: #fff !important;
    }
  </style>

<body class="min-h-screen max-h-screen overflow-hidden">
  <div id="app" class="max-h-screen w-screen overflow-">
    <div class="flex flex-row justify-start items-start content-start w-full overflow-hidden">
      <div
        class="min-h-screen fixed overflow-hidden min-w-[325px] max-w-[325px] top-0 left-0 bg-[var(--bg-body)] text-[var(--text-body)] order-1 self-auto md:relative md:translate-0 flex flex-col border-r border-r-[var(--border-color)] md:min-w-[380px] md:max-w-full! md:flex-row"
        id="fileDrawer">
        <div
          class="w-full flex items-center shrink-0 flex-row md:flex-col md:items-center min-h-[50px] md:w-[70px] md:border-r md:border-r-[var(--border-color)] md:h-screen text-[var(--text-secondary)] md:justify-start md:pb-4"
          id="drawerHeader">
          <div
            class="w-full md:w-max *:cursor-pointer flex items-center shrink-0 flex-row md:flex-col h-full md:*:h-[4rem] *:relative *:transition-colors *:ease-in-out *:duration-200 *:mx-[0.525rem] *:md:my-0 *:md:mx-0">
            <div
              class="w-[3rem] h-[4rem] md:h-[3rem] md:w-[4rem] text-2xl inline-flex items-center justify-center shrink-0"
              role="button" aria-label="navigasi" data-target="1">
              <i class="icodex-paper-airplane"></i>
            </div>
            <div
              class="w-[3rem] h-[4rem] md:h-[3rem] md:w-[4rem] text-2xl inline-flex items-center justify-center shrink-0 after:content-[''] after:w-full after:h-0.5 after:bg-[var(--text-primary)] after:absolute after:bottom-0 md:after:hidden md:before:content-[''] md:before:absolute md:before:left-0 md:before:top-0 md:before:h-full md:before:w-0.5 md:before:bg-[var(--text-primary)] text-[var(--text-primary)]"
              role="button" aria-label="navigasi" data-target="2">
              <i class="icodex-file-directory"></i>
            </div>
            <div
              class="w-[3rem] h-[4rem] md:h-[3rem] md:w-[4rem] text-2xl inline-flex items-center justify-center shrink-0"
              role="button" aria-label="navigasi" data-target="3">
              <i class="icodex-codescan"></i>
            </div>
            <div
              class="w-[3rem] h-[4rem] md:h-[3rem] md:w-[4rem] text-2xl inline-flex items-center justify-center shrink-0"
              role="button" aria-label="navigasi" data-target="4">
              <i class="icodex-git-branch"></i>
            </div>
            <div
              class="w-[3rem] h-[4rem] md:h-[3rem] md:w-[4rem] text-2xl inline-flex items-center justify-center md:mt-auto shrink-0"
              role="button" aria-label="navigasi" data-target="5">
              <i class="icodex-person"></i>
            </div>
          </div>
        </div>
        <div id="dragHandle"
          class="absolute top-0 right-0 h-full w-1 bg-transparent hover:bg-neutral-800/50 cursor-col-resize hidden md:block">
        </div>
        
        <div class="w-full h-full min-h-0 hidden flex-col shrink" data-content="1">
          <div class="capitalize px-4 text-inherit">
            welcome to search code d
          </div>
        </div>
        <div class="w-full h-[100dvh] min-h-0 fle flex-col shrink flex" id="treeView" data-content="2">
          <div class="*:text-[var(--text-secondary)] flex flex-row w-full items-center min-h-[2.5rem] pl-4 pr-3"
            id="treeviewHeader">
            <span
                class="inline-flex font-medium text-sm uppercase tracking-tight cursor-default"
                >files</span>
            <div class="ml-auto *:cursor-pointer flex items-center shrink-0">
              <div class="w-[2.5rem] h-[2.5rem] inline-flex items-center justify-center" aria-label="search"
                role="button">
                <i class="icodex-search-2 text-xl"></i>
              </div>
              <div class="w-[2.5rem] h-[2.5rem] inline-flex items-center justify-center" aria-label="currunt location"
                role="button">
                <i class="icodex-location text-lg"></i>
              </div>
              <div class="w-[2.5rem] h-[2.5rem] inline-flex items-center justify-center" aria-label="currunt location"
                role="button">
                <i class="icodex-file-added text-lg"></i>
              </div>
              <div class="w-[2.5rem] h-[2.5rem] inline-flex items-center justify-center" aria-label="currunt location"
                role="button">
                <i class="icodex-folder-plus text-xl"></i>
              </div>
              <div class="w-[2.5rem] h-[2.5rem] inline-flex items-center justify-center" aria-label="currunt location"
                role="button">
                <i class="icodex-kebab-horizontal text-2xl"></i>
              </div>
            </div>
          </div>
          <div class="flex-1" id="rootDir">
            <a draggable="true"
              class="w-full min-h-[40px] flex items-center pl-3 pr-3 *:inline-flex *:items-center cursor-pointer hover:bg-white/2 transition-colors ease-in-out duration-150 outline outline-transparent focus:outline-primary outline-offset-[-1px] focus:bg-primary/15"
              tabindex="0">
              <span
                  class="codicon codicon-chevron-up text-base! rotate-90"
                ></span>
              <span
                  class="ml-1 whitespace-nowrap overflow-hidden text-ellipsis font-medium"
                  >HTML
                </span>
              <span
                  class="icodex-kebab-horizontal text-2xl ml-auto shrink-0 basis-8 text-[var(--text-secondary)]"
                ></span>
            </a>
            <div class="flex-1" id="dirContent1">
              <a draggable="true" data-type="folder"
                class="w-full min-h-[40px] flex items-center pl-3 pr-3 *:inline-flex *:items-center cursor-pointer hover:bg-white/2 transition-colors ease-in-out duration-150 outline outline-transparent focus:outline-primary outline-offset-[-1px] focus:bg-primary/15"
                tabindex="0">
                <span
                    class="w-2 min-h-[2.5rem] border-l border-l-[var(--border-color)] ml-[7px]"
                  ></span>
                <span
                    class="codicon codicon-chevron-left text-base! rotate-90"
                  ></span>
                <span
                    class="ml-1 whitespace-nowrap overflow-hidden text-ellipsis font-medium"
                    >assets
                  </span>
                <span
                    class="icodex-kebab-horizontal text-2xl ml-auto shrink-0 basis-8 text-[var(--text-secondary)]"
                  ></span>
              </a>
              <a draggable="true" data-type="file"
                class="w-full min-h-[40px] flex items-center pl-3 pr-3 *:inline-flex *:items-center cursor-pointer hover:bg-white/2 transition-colors ease-in-out duration-150 outline outline-transparent focus:outline-primary outline-offset-[-1px] focus:bg-primary/15"
                tabindex="0">
                <span
                    class="w-2 min-h-[2.5rem] border-l border-l-[var(--border-color)] ml-[7px]"
                  ></span>
                <span class="devicon devicon-html5-plain colored"></span>
                <span
                    class="ml-1.5 whitespace-nowrap overflow-hidden text-ellipsis font-medium"
                    >index.html</span>
                <span
                    class="icodex-kebab-horizontal text-2xl ml-auto shrink-0 basis-8 text-[var(--text-secondary)]"
                  ></span>
              </a>
            </div>
          </div>
        </div>

<div class="w-full h-full min-h-0 flex-col shrink hidden" id="searchCode" data-content="3">
          <div
            class="*:text-[var(--text-secondary)] flex flex-row w-full items-center min-h-[51px] pl-4 pr-3 md:border-b-0"
            id="treeviewHeader">
            <span
                class="inline-flex font-medium text-sm uppercase tracking-tight cursor-default"
                >search</span>
            <div class="ml-auto *:cursor-pointer flex items-center shrink-0">
              <div class="w-[2.5rem] h-[3rem] inline-flex items-center justify-center" aria-label="search"
                role="button">
                <i class="codicon codicon-regex text-xl"></i>
              </div>
              <div class="w-[2.5rem] h-[3rem] inline-flex items-center justify-center" aria-label="currunt location"
                role="button">
                <i class="codicon codicon-case-sensitive text-lg"></i>
              </div>
              <div class="w-[2.5rem] h-[3rem] inline-flex items-center justify-center" aria-label="currunt location"
                role="button">
                <i class="codicon codicon-whole-word"></i>
              </div>
              <div class="w-[2.5rem] h-[3rem] inline-flex items-center justify-center" aria-label="currunt location"
                role="button">
                <i class="codicon codicon-list-filter text-lg"></i>
              </div>
              <div class="w-[2.5rem] h-[3rem] inline-flex items-center justify-center" aria-label="currunt location"
                role="button">
                <i class="codicon codicon-arrow-swap text-xl"></i>
              </div>
            </div>
          </div>
          <div class="capitalize px-4">
            <div class="w-full max-w-sm min-w-[200px]">
              <div class="relative flex items-center my-4">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                  class="absolute w-5 h-5 top-2.5 left-2.5 text-[var(--text-secondary)]">
                  <path fill-rule="evenodd"
                    d="M10.5 3.75a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5ZM2.25 10.5a8.25 8.25 0 1 1 14.59 5.28l4.69 4.69a.75.75 0 1 1-1.06 1.06l-4.69-4.69A8.25 8.25 0 0 1 2.25 10.5Z"
                    clip-rule="evenodd" />
                </svg>

<div
        class="min-h-screen max-h-screen overflow-hidden w-full flex-1 order-3 basis-0 grow shrink-1 self-auto bg-[var(--bg-body)] text-[var(--text-body)]"
        id="contentRight">
        <div
          class="min-h-[50px] border-b border-b-[var(--border-color)] w-full flex items-center pl-2.5 md:px-0 text-[var(--text-secondary)]">
          <div class="flex flex-row flex-nowrap justify-start items-center content-start w-full min-h-[50px]">
            <div class="min-h-full min-w-max flex-1 order-1 basis-0 grow-0 shrink-0 self-auto items-center">
              <div aria-label="menu" role="button" class="min-w-max cursor-pointer md:hidden">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                  stroke="currentColor" class="size-6">
                  <path stroke-linecap="round" stroke-linejoin="round"
                    d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                </svg>
              </div>
            </div>
            <div
              class="min-h-[50px] min-w-[100px] flex-1 order-2 basis-60 grow shrink-0 self-auto px-2.5 flex items-center">
              <div style="
                    overflow-x: scroll;
                    max-width: min-content;
                    scrollbar-width: none;
                  ">
                <nav class="text-sm font-medium w-full" aria-label="breadcrumb">
                  <ol class="flex flex-nowrap items-center gap-1 shrink-0 leading-4">
                    <li class="flex items-center gap-1">
                      <a draggable="false" href="#" class="select-none inline-flex items-center font-[600]">dist</a>
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true"
                        stroke-width="2" stroke="currentColor" class="size-4 mt-0.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                      </svg>
                    </li>
                    <li class="flex items-center gap-1">
                      <a draggable="false" href="#" class="select-none inline-flex items-center font-[600]">public</a>
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true"
                        stroke-width="2" stroke="currentColor" class="size-4 mt-0.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                      </svg>
                    </li>
                    <li class="flex items-center leading-4 gap-1 font-medium select-none" aria-current="page">
                      <i class="devicon-html5-plain colored mt-0.5"></i>
                      index.html
                    </li>
                  </ol>
                </nav>
              </div>
            </div>
            <div
              class="min-h-[50px] min-w-min justify-center flex-1 order-3 basis-24 grow-0 shrink-0 self-auto cursor-default">
              <div class="inline-flex items-center w-[2.5rem] h-[3rem] justify-center cursor-pointer" aria-label="run"
                role="button">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
                  <path fill-rule="evenodd"
                    d="M10.5 3.75a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5ZM2.25 10.5a8.25 8.25 0 1 1 14.59 5.28l4.69 4.69a.75.75 0 1 1-1.06 1.06l-4.69-4.69A8.25 8.25 0 0 1 2.25 10.5Z"
                    clip-rule="evenodd" />
                </svg>
              </div>
              <div class="inline-flex items-center min-w-[2.5rem] h-[3rem] justify-center cursor-pointer"
                aria-label="run" role="button">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                  class="size-5 text-emerald-500">
                  <path fill-rule="evenodd"
                    d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z"
                    clip-rule="evenodd" />
                </svg>
              </div>
            </div>
          </div>
        </div>
        s
      </div>
      
    </div>
  </div>

try {
          if (typeof interact !== 'function') {
            const lang = navigator.language.toLowerCase();
            if (lang.startsWith('id')) {
              throw 'interact belum didefinisikan sebelum digunakan.\nPastikan link CDN / path lokal benar.\nhttps://interactjs.io/';
            } else if (lang.startsWith('en')) {
              throw 'interact has not been defined before use.\nCheck CDN/local path.\nhttps://interactjs.io/';
            }
          }

function query() {
            return window.matchMedia('(min-width: 768px)').matches;
          }

function disableInteract() {
            if (!interactInstance) return;
            interact('#fileDrawer').unset(); // hapus semua listener resizable
            interactInstance = null;
            console.log('Interact dimatikan');
          }

// pertama kali jalan
          if (query()) {
            enableInteract();
          } else {
            disableInteract();
          }

// saat resize
          window.addEventListener('resize', () => {
            if (query()) {
              enableInteract();
            } else {
              disableInteract();
            }
          });
        } catch (e) {
          console.warn(e);
        }
      };

resizeDrawer();
  </script>

tabsBtn.forEach(btn => {
        btn.addEventListener('click', () => {
          // ambil target id dari tombol
          const tabId = btn.dataset.target;

// sembunyikan semua konten
          contents.forEach(content => {
            content.classList.add('hidden'); // atau remove "flex"
          });

// tampilkan konten sesuai target
          const targetContent = document.querySelector(
            `[data-content="${tabId}"]`,
          );
          if (targetContent) {
            targetContent.classList.remove('hidden');
            targetContent.classList.add('flex'); // kalau memang mau pakai flex
          }

// (opsional) aktifkan tombol tab
          tabsBtn.forEach(b => {
            b.classList.remove(
              "after:content-['']",
              'after:w-full',
              'after:h-0.5',
              'after:bg-[var(--text-primary)]',
              'after:absolute',
              'after:bottom-0',
              'md:after:hidden',
              "md:before:content-['']",
              'md:before:absolute',
              'md:before:left-0',
              'md:before:top-0',
              'md:before:h-full',
              'md:before:w-0.5',
              'md:before:bg-[var(--text-primary)]',
              'text-[var(--text-primary)]',
            );
          });
          btn.classList.add(
            "after:content-['']",
            'after:w-full',
            'after:h-0.5',
            'after:bg-[var(--text-primary)]',
            'after:absolute',
            'after:bottom-0',
            'md:after:hidden',
            "md:before:content-['']",
            'md:before:absolute',
            'md:before:left-0',
            'md:before:top-0',
            'md:before:h-full',
            'md:before:w-0.5',
            'md:before:bg-[var(--text-primary)]',
            'text-[var(--text-primary)]',
          );
        });
      });
  </script>
</body>

</html>

Related Examples