Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header>
  <button onclick="setFocusOnMain()">Focus main</button>
  <a href="#main">Link to #main</a>
  <button style="display: flex">a redundant tab stop</button>
</header>
<h1 id="page_heading">set main[display="contents"] as the activeElement</h1>
<main role="main" id="main" tabindex="0" aria-labelledby="page_heading">
  <section>
    <h2>section 1</h2>
    <button>section 1 button</button>
    <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus illo, alias esse natus iusto tempora quam incidunt hic debitis expedita sint deserunt, possimus aut porro aliquid rem earum? Officiis quam porro inventore nisi animi aliquid officia ducimus illum praesentium omnis quo culpa ad repudiandae eum quos facere sunt unde, voluptatum eos, non delectus. Quos odio enim, iusto unde doloremque similique dolores iste esse placeat voluptas velit vel odit fuga eligendi, maiores libero numquam ex. Consequuntur ipsa, autem velit voluptatem necessitatibus tenetur accusantium temporibus et, placeat, aspernatur sequi. Hic nobis laborum excepturi optio quisquam, alias, sunt suscipit tempora ipsum voluptatibus praesentium.
    </div>
  </section>
  <section>
    <h2>section 2</h2>
    <button>section 2 button</button>
    <div>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus veniam iusto nam quaerat aperiam minus? Excepturi alias obcaecati suscipit sint dolores odit reiciendis veniam! Aut saepe doloremque dolor sit a laudantium distinctio veniam blanditiis cumque nam minima quisquam voluptas expedita earum quo dolorem aspernatur, alias cum, minus eius laborum laboriosam inventore repudiandae. Eos praesentium nemo molestias nesciunt voluptatibus distinctio, eaque quod repellendus laborum atque esse earum placeat sunt possimus tempore temporibus laudantium, ducimus fugit dolores! Accusantium quo minus perspiciatis, cupiditate minima asperiores necessitatibus qui a ut! Fugit nisi ut asperiores atque totam accusantium voluptatum iusto. Provident hic facilis rem maiores.
    </div>
  </section>
  <section>
    <h2>section 3</h2>
    <button>section 3 button</button>
    <div>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae cumque cum dolor odit rerum adipisci eius reiciendis sunt eligendi, reprehenderit inventore, animi non aliquid temporibus nisi pariatur enim, voluptas dolorum ratione modi! Magnam adipisci nam, odio possimus, aut id minus, repudiandae quae suscipit distinctio reiciendis voluptatibus tempore. Consequuntur rem, quisquam optio expedita vel laudantium, qui unde doloremque laboriosam officia temporibus! Doloremque quod doloribus sunt laudantium nesciunt velit voluptas assumenda soluta beatae aspernatur, dolorum repudiandae odio ipsam molestias quos laborum minima ex voluptatibus rerum facere ducimus, dignissimos modi, praesentium accusamus. Soluta nisi odio provident expedita veritatis cum nesciunt ratione modi quidem?
    </div>
  </section>
  <section>
    <h2>section 4</h2>
    <button>section 4 button</button>
    <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores quibusdam cumque atque commodi sit, quos fugiat perferendis fuga sapiente molestias unde officia architecto dolor ratione eaque! Consequuntur, at adipisci unde perspiciatis, enim non, porro voluptas sint saepe quas vitae amet reprehenderit quos aperiam. Ipsam, a excepturi ab enim neque laboriosam mollitia doloremque deleniti alias, dolor itaque corporis est exercitationem at ea voluptas repellendus tenetur? Nobis voluptatibus dicta aliquid? Eius excepturi voluptas ipsa inventore magni sunt a asperiores perspiciatis? Repellendus eum voluptatem suscipit magnam id atque sunt aperiam fugiat, aliquid, totam harum iste nostrum voluptatibus quisquam quod. Amet labore suscipit voluptatum?
      </div>
  </section>
  <section>
    <h2>section 5</h2>
    <button>section 5 button</button>
    <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam tempore similique molestias dignissimos dicta aspernatur ducimus in doloribus iure ullam, cumque recusandae, voluptates vel saepe doloremque obcaecati! Debitis voluptas, amet et minus vitae temporibus consectetur aut dicta sed quae, delectus similique officiis quod corrupti, fugiat tempore? Cum inventore sit dicta, modi blanditiis non dolor nihil totam quae culpa provident nostrum unde ab voluptas ipsum perspiciatis reprehenderit vitae doloribus libero quaerat odio. Neque consequatur quibusdam laudantium mollitia quam? Autem sed voluptas nisi sit reprehenderit. Nisi possimus provident quidem ipsa ducimus ipsam maiores corporis quia necessitatibus assumenda! Maxime error asperiores eos tenetur.
      </div>
  </section>
</main>
<div id="my_console">document.activeElement</div>

              
            
!

CSS

              
                body {
  padding: 3rem;
  display: grid;
  gap: 3rem;
}
header {
  background-color: lightblue;
  padding: 3rem;
  margin-bottom: 3rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}
header > button {
  padding: 1rem;
}
header > a[href] {
  color: black;
  display: inline-block;
  line-height: 3;
}
#my_console {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 1rem;
  background-color: black;
  color: greenyellow;
  font-family: monospace;
  min-height: 2rem;
  line-height: 2;
}
main {
  display: contents;
}
main:focus {
  border-color: red;
}
section {
  background-color: #fff;
  line-height: 1.5;
  padding: 0;
}
section > div {
  max-width: 70ch;
}
section > button {
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: lightblue;
  border: solid 1px darkblue;
}
*:focus {
  outline-color: red;
  outline-offset: 2px;
  outline-style: dotted;
  outline-width: 4px;
}

              
            
!

JS

              
                function setFocusOnMain(e) {
  const main = document.getElementById("main");
  main.focus();
}
function printActiveElement(e) {
  const my_console = document.getElementById("my_console");
  my_console.textContent = document.activeElement.localName + " -'" + document.activeElement.innerText +"'";
}
document.addEventListener("keyup", (e)=> {
  if (e.keyCode == 9) printActiveElement(e);
})
              
            
!
999px

Console