Examples

Real, working snippets you can copy into the playground in seconds. Each one is small enough to read in a single sitting — and a great starting point for your own experiments.

• css · animation

  Animated Gradient Button

  A glossy button with a slow-shifting gradient and hover lift.

  View code

  HTML

  <button class="glow">Click me</button>

  CSS

  body { display: grid; place-items: center; min-height: 100vh; background: #0b0b12; }
  .glow {
    padding: 1rem 2rem;
    font-size: 1rem;
    color: white;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #6ee7b7, #3b82f6, #a855f7, #6ee7b7);
    background-size: 300% 100%;
    animation: shift 4s linear infinite;
    cursor: pointer;
    transition: transform .2s;
  }
  .glow:hover { transform: translateY(-2px); }
  @keyframes shift { to { background-position: 300% 0; } }

• css · grid

  Responsive Card Grid

  A card grid that auto-fits to any screen with no media queries.

  View code

  HTML

  <div class="grid">
    <article><h3>One</h3><p>Lorem ipsum dolor sit amet.</p></article>
    <article><h3>Two</h3><p>Consectetur adipiscing elit.</p></article>
    <article><h3>Three</h3><p>Sed do eiusmod tempor incididunt.</p></article>
    <article><h3>Four</h3><p>Ut labore et dolore magna aliqua.</p></article>
  </div>

  CSS

  body { background: #f5f5f7; font-family: system-ui; padding: 2rem; }
  .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  article { background: white; padding: 1rem; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }

• javascript · dom

  Live Clock

  A digital clock that ticks every second using vanilla JS.

  View code

  HTML

  <div id="clock">--:--:--</div>

  CSS

  body { display: grid; place-items: center; min-height: 100vh; background: #111; color: #6ee7b7; font-family: monospace; }
  #clock { font-size: 4rem; letter-spacing: .1em; }

  JS

  function tick() {
    const now = new Date();
    document.getElementById('clock').textContent =
      now.toTimeString().slice(0, 8);
  }
  tick();
  setInterval(tick, 1000);

• javascript · dom

  Vanilla Todo List

  Add, complete, and remove items — no framework required.

  View code

  HTML

  <form id="f"><input id="i" placeholder="What needs doing?" autofocus /></form>
  <ul id="list"></ul>

  CSS

  body { font-family: system-ui; max-width: 400px; margin: 2rem auto; }
  input { width: 100%; padding: .75rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 8px; }
  ul { list-style: none; padding: 0; }
  li { padding: .5rem; border-bottom: 1px solid #eee; cursor: pointer; }
  li.done { text-decoration: line-through; opacity: .5; }

  JS

  const form = document.getElementById('f');
  const input = document.getElementById('i');
  const list = document.getElementById('list');
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    if (!input.value.trim()) return;
    const li = document.createElement('li');
    li.textContent = input.value;
    list.append(li);
    input.value = '';
  });
  list.addEventListener('click', (e) => {
    if (e.target.tagName === 'LI') e.target.classList.toggle('done');
  });

• javascript · css

  Hover Card with Tilt

  A card that tilts toward the cursor for a subtle 3D effect.

  View code

  HTML

  <div class="card">Hover me</div>

  CSS

  body { display: grid; place-items: center; min-height: 100vh; background: #1a1a2e; perspective: 800px; }
  .card { width: 220px; height: 300px; border-radius: 20px; background: linear-gradient(135deg, #3b82f6, #a855f7); color: white; display: grid; place-items: center; font-weight: 600; transition: transform .1s; }

  JS

  const card = document.querySelector('.card');
  card.addEventListener('mousemove', (e) => {
    const r = card.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width - 0.5;
    const y = (e.clientY - r.top) / r.height - 0.5;
    card.style.transform = `rotateY(${x * 20}deg) rotateX(${-y * 20}deg)`;
  });
  card.addEventListener('mouseleave', () => { card.style.transform = ''; });

• html · javascript

  Native <dialog> Modal

  Modern modal built on the native HTML <dialog> element — no library.

  View code

  HTML

  <button id="open">Open dialog</button>
  <dialog id="d">
    <h2>Hello</h2>
    <p>This is a native modal.</p>
    <form method="dialog"><button>Close</button></form>
  </dialog>

  CSS

  body { font-family: system-ui; padding: 2rem; }
  dialog { padding: 2rem; border: 0; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
  dialog::backdrop { background: rgba(0,0,0,.4); }

  JS

  document.getElementById('open').addEventListener('click', () => {
    document.getElementById('d').showModal();
  });

• css · html

  CSS-only Tabs

  Tabs that work without any JavaScript using radio inputs.

  View code

  HTML

  <div class="tabs">
    <input type="radio" name="t" id="t1" checked /><label for="t1">One</label>
    <input type="radio" name="t" id="t2" /><label for="t2">Two</label>
    <input type="radio" name="t" id="t3" /><label for="t3">Three</label>
    <div class="panel p1">Panel one</div>
    <div class="panel p2">Panel two</div>
    <div class="panel p3">Panel three</div>
  </div>

  CSS

  .tabs { font-family: system-ui; padding: 2rem; }
  .tabs input { display: none; }
  .tabs label { padding: .5rem 1rem; cursor: pointer; border-bottom: 2px solid transparent; }
  .tabs input:checked + label { border-color: #3b82f6; color: #3b82f6; }
  .panel { display: none; padding: 1rem 0; }
  #t1:checked ~ .p1, #t2:checked ~ .p2, #t3:checked ~ .p3 { display: block; }

• css · animation

  Loading Spinner

  A clean CSS-only spinner using border tricks.

  View code

  HTML

  <div class="spinner"></div>

  CSS

  body { display: grid; place-items: center; min-height: 100vh; background: #0b0b12; }
  .spinner { width: 48px; height: 48px; border: 4px solid #1a1a2e; border-top-color: #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }