Pen Settings



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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


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


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.


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.


                <div class="calculator">
   <div class="calculator__screen">
      <h6 class="calculator__operation">1258 + 963</h6>
      <h5 class="calculator__result">2194</h5>
   <div class="calculator__buttons">
      <button class="btn highlight">C</button>
      <button class="btn highlight">÷</button>
      <button class="btn highlight">x</button>
      <button class="btn">
         <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.141 1.2L1.67588 6L6.141 10.8H18.75V1.2H6.141ZM5.5814 12L0 6L5.5814 0H20V12H5.5814Z" fill="#6B8AFA"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.17574 3.17574C9.41005 2.94142 9.78995 2.94142 10.0243 3.17574L14.8243 7.97574C15.0586 8.21005 15.0586 8.58995 14.8243 8.82426C14.5899 9.05858 14.2101 9.05858 13.9757 8.82426L9.17574 4.02426C8.94142 3.78995 8.94142 3.41005 9.17574 3.17574Z" fill="#6B8AFA"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.8243 3.17574C14.5899 2.94142 14.2101 2.94142 13.9757 3.17574L9.17574 7.97574C8.94142 8.21005 8.94142 8.58995 9.17574 8.82426C9.41005 9.05858 9.78995 9.05858 10.0243 8.82426L14.8243 4.02426C15.0586 3.78995 15.0586 3.41005 14.8243 3.17574Z" fill="#6B8AFA"/>
      <button class="btn">7</button>
      <button class="btn">8</button>
      <button class="btn">9</button>
      <button class="btn highlight">-</button>
      <button class="btn">4</button>
      <button class="btn">5</button>
      <button class="btn">6</button>
      <button class="btn highlight">+</button>
      <button class="btn">1</button>
      <button class="btn">2</button>
      <button class="btn">3</button>
      <button class="btn equal">=</button>
      <button class="btn">%</button>
      <button class="btn">0</button>
      <button class="btn">.</button>


                $text-color: #699AB6
$text-color-highlight: #6B8AFA
$bg: #E8F5FC
$button-size: 44px

$normal-shadow: 6px 6px 10px rgba(darken($bg, 15%), 0.5), -6px -6px 10px rgba(lighten($bg, 50%), 0.6)
$pressed-shadow: inset 6px 6px 10px rgba(darken($bg, 15%), 0.5), inset -6px -6px 10px rgba(lighten($bg, 50%), 0.6)
$active-shadow: 6px 6px 10px rgba(darken($bg, 15%), 0.5), -6px -6px 10px rgba(lighten($bg, 50%), 0.6), inset 6px 6px 10px rgba(darken($bg, 15%), 0.5), inset -6px -6px 10px rgba(lighten($bg, 50%), 0.6)

   display: flex
   justify-content: center
   align-items: center
   min-height: 100vh
   background-color: $bg
   padding: 1rem
   color: $text-color
   padding: 32px 24px
   width: 240px
   background-color: $bg
   box-shadow: $normal-shadow
   border-radius: 16px
      text-align: right
      padding: 12px 8px
      font-family: monospace
      border-radius: 6px
      background-color: darken($bg, 1%)
      box-shadow: $pressed-shadow
      margin-bottom: 24px
      margin: 0 0 8px 0
      font-weight: 500
      font-size: 16px
      letter-spacing: 2px
      font-size: 24px
      margin: 0
      font-weight: 600
      color: $text-color-highlight
      letter-spacing: 2px
      display: grid
      grid-gap: 16px 12px
      grid-template-columns: repeat(4, $button-size)
      grid-template-rows: repeat(5, $button-size)
      justify-content: center
         background-color: $bg
         box-shadow: $normal-shadow
         border: none
         border-radius: 100%
         cursor: pointer
         user-select: none
         outline: none
         color: $text-color
         font-weight: 500
            background-color: darken($bg, 2%)
            box-shadow: $pressed-shadow
            box-shadow: $active-shadow
            background-color: $text-color-highlight
            color: white
            box-shadow: 3px 11px 25px rgba(darken($text-color-highlight, 12%), 0.6), -6px -6px 10px rgba(255, 255, 255, 0.6), inset -3px -3px 14px rgba(255, 255, 255, 0.2), inset 8px 8px 14px rgba(darken($text-color-highlight, 12%), 0.5)
            grid-row-start: span 2
            grid-column-start: 4
            border-radius: 50px
               background-color: darken($text-color-highlight, 5%)
            &:active:focus, &:focus
               box-shadow: 3px 11px 25px rgba(darken($text-color-highlight, 20%), 0.6), -6px -6px 10px rgba(lighten($text-color-highlight, 30%), 0.9), inset 3px 11px 15px rgba(darken($text-color-highlight, 20%), 0.5), inset -6px -6px 8px rgba(lighten($text-color-highlight, 20%), 0.5)
            color: $text-color-highlight