Online HTML and CSS Simulator

<link rel="stylesheet" href="styles.css">

<main class="profile-card">
  <span class="status">Available</span>
  <h1>Build directly in the browser</h1>
  <p>Edit the markup and styles, then test the result at different widths.</p>
  <button type="button" id="accent-button">Change accent</button>
</main>

<script>
  const button = document.querySelector("#accent-button");
  button.addEventListener("click", () => {
    document.body.classList.toggle("alternate");
  });
</script>

:root {
  color-scheme: light dark;
  font-family: Inter, system-ui, sans-serif;
}
body {
  display: grid;
  min-height: 100vh;
  margin: 0;
  place-items: center;
  background: #0f172a;
  color: #e2e8f0;
}
.profile-card {
  width: min(32rem, calc(100% - 2rem));
  padding: 2rem;
  border: 1px solid #334155;
  border-radius: 1rem;
  background: #111827;
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 30%);
}
.status {
  color: #67e8f9;
  font-weight: 700;
}
button {
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 0.6rem;
  background: #67e8f9;
  color: #083344;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.alternate button {
  background: #c4b5fd;
}