JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<button toggle>Kill downsampling</button>

<div class="page">
  <div downsampled="1x">
    <spacer>
      <h1>Nominal</h1>
      <p>This is regular text.</p>
      <button>Button</button>
    </spacer>
    <render>
      <h1>Nominal</h1>
      <p>This is regular text.</p>
      <button>Button</button>
    </render>    
  </div>
</div>
<div class="page">
  <div downsampled="2x">
    <spacer>
      <h1>Downsampled 2x</h1>
      <p>This is regular text.</p>
      <button>Button</button>
    </spacer>
    <render>
      <h1>Downsampled 2x</h1>
      <p>This is regular text.</p>
      <button>Button</button>
    </render>    
  </div>
</div>
<div class="page">
  <div downsampled="4x">
    <spacer>
      <h1>Downsampled 4x</h1>
      <p>This is regular text.</p>
      <button>Button</button>
    </spacer>
    <render>
      <h1>Downsampled 4x</h1>
      <p>This is regular text.</p>
      <button>Button</button>
    </render>    
  </div>
</div>
<div class="page">
  <div downsampled="16x">
    <spacer>
      <h1>Downsampled 16x</h1>
      <p>This is regular text.</p>
      <button>Button</button>
    </spacer>
    <render>
      <h1>Downsampled 16x</h1>
      <p>This is regular text.</p>
      <button>Button</button>
    </render>    
  </div>
</div>

CSS

body {
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0 1em;
  background: #eee;
  font-size: 1em;
  box-sizing: border-box;
  font-family: Avenir, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
}

* {
  font-size: 1em;
  font-family: inherit;
  box-sizing: inherit;
}

button {
  padding: .6em .8em;
  border-radius: .1875em;
  border: 0;
  cursor: pointer;
}

.page {
  background: #fff;
  width: 400px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1px;
  padding-bottom: 1px;
}

.page {
  padding: 1em;
}

.page:not(:last-child) {
  margin-bottom: 1em;
}

spacer > *:first-child, render > *:first-child {
  margin-top: 0
}

spacer > *:last-child, render > *:last-child {
  margin-bottom: 0
}

[downsampled] {
  position: relative;
}

[downsampled] spacer {
  display: block;
  font-size: 1em;
  opacity: 0;
}

[downsampled] render {
  display: block;
  position: absolute;
  pointer-events: none;
  transform-origin: 0 0;
  top: 0;
  left: 0;
}

[downsampled="1x"] render {
  font-size: 1em;
  transform: scale(1);
}

[downsampled="2x"] render {
  font-size: 2em;
  transform: scale(.5);
  width: 200%;
}

[downsampled="4x"] render {
  font-size: 4em;
  width: 400%;
  transform: scale(.25);
}

[downsampled="16x"] render {
  font-size: 16em;
  width: 1600%;
  transform: scale(.0625);
}

button[toggle] {
  margin: 2em auto 1em;
  width: 10em;
  display: block;
}

button[toggle]:focus {
  outline: none;
  background: black;
  color: #ccc;
}

button[toggle]:focus ~ .page [downsampled] spacer {
  opacity: 1;
}

button[toggle]:focus ~ .page [downsampled] render {
  display: none;
}

[downsampled] button {
  box-shadow: 0 .25em .75em rgba(0, 0, 0, .3), 0 .5em 2em rgba(0, 0, 0, .08);
  text-shadow: 0 .03125em rgba(255, 255, 255, .3);
  border: 5px solid #4a4a4a;
}