---
title: Demo - Playground
description: Demo and Playground
codepens:
  - title: Counter
    slug: VNVyze
  - title: My Todos
    slug: EJMGJe
  - title: Star Wars Demo
    slug: bJZzGg
assets:
  scripts:
    - url: https://static.codepen.io/assets/embed/ei.js
      attributes: async type="text/javascript"

---

<template>
  <div class="wrapper">
    <header class="header header-dark">
      <div class="container" id="guide-header">
        <h2 class="title">PLAYGROUND</h2>
      </div>
    </header>

    <div class="container">
      {% for pen in page.codepens %}
      <div class="row">
        <div class="column">
          <hr />

          <h3>{{ pen.title }}</h3>
          <p
            class="codepen"
            data-height="500"
            data-theme-id="0"
            data-default-tab="html,result"
            data-user="mardix"
            data-slug-hash="{{ pen.slug }}"
            style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;"
            data-pen-title="{{ pen.slug }}"
          >
            <span
              >See the Pen <a href="https://codepen.io/mardix/pen/{{ pen.slug }}/"> {{ slug }}</a> by Mardix (<a
                href="https://codepen.io/mardix"
                >@mardix</a
              >) on <a href="https://codepen.io">CodePen</a>.</span
            >
          </p>
        </div>
      </div>
      {% endfor %}


    </div>
  </div>
</template>