JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<div id="plan" class="proto-page"><div><h1>Executive Summary</h1><div><h2>Opportunity</h2><div><h3>Problem</h3><div><p>Voluptate alias aliquid iste voluptatibus sunt aut. Voluptatum harum tempore ratione reprehenderit nam quis consequatur. Ad dolore et labore quam id molestiae. Eum nihil qui quia quia quidem beatae ullam. Ea cumque voluptatem non non odit nostrum repellendus quia. Corporis soluta aut in reiciendis adipisci veniam id et.</p>
  <p>Et doloribus qui nemo quae accusantium tempore eius nam. Quisquam magni doloribus eum ipsam deserunt et odit voluptatibus. Magnam aliquam ducimus cupiditate corrupti recusandae ut nisi incidunt qui. Ad velit et est esse sit odio et. Assumenda consequatur incidunt autem sapiente soluta nihil amet eum nesciunt.</p>
  <p>Sit repellat quas provident expedita in ea maiores. Nihil doloribus voluptas sunt beatae cumque. Fuga facilis expedita amet provident rerum velit officiis.</p></div></div><div><h3>Solution</h3><div><p>A explicabo earum et. Amet dolores voluptatum itaque doloribus. Vero ullam incidunt earum accusantium et et molestiae.</p>
  <p>Est quis eos aut voluptas. Voluptatem laudantium aliquam et in inventore. Ipsa assumenda qui. Odio sed veritatis accusamus incidunt magni unde at consequuntur.</p>
  <p>Odio sapiente non voluptas. Sit laudantium expedita distinctio aut quam odit esse numquam voluptates. Et et saepe rerum eum omnis odit consequatur enim. Eaque similique accusamus. Id nihil praesentium consequatur ut.</p></div></div><div><h3>Market</h3><div><p>Non aut dolor qui perferendis autem consequatur. Tempore natus ullam velit. Non repellendus a itaque enim voluptatem dolor amet voluptas. Dolor quia nostrum reprehenderit libero iste illum dolores accusantium cumque. Optio porro unde et. Veniam minima et.</p>
  <p>Nemo assumenda aperiam. Dignissimos aspernatur qui. Minima et exercitationem et et dolor. Itaque modi et assumenda in cupiditate consequatur. Sunt atque dolore magni sed ipsum sed repudiandae ut.</p>
 ...

CSS

html, body {
  background: lightgray;
  margin: 0;
  padding: 0;
}

.proto-page {
  width: 7.5in;
}

.page {
  background: white;
  height: 11in;
  width: 8.5in;
  padding: 0.5in;
  overflow: hidden;
  box-sizing: border-box;
}

JavaScript

const planEl = document.getElementById('plan');
const documentEl = document.getElementById('document');

for (let i = 0; i < 4; i++) {
  
  const range = document.caretRangeFromPoint(7.5 * 96, 10 * 96);
  range.setStartAfter(planEl);
  const df = range.extractContents();
  
  const newPage = document.createElement('div');
  newPage.className = "page";
  
	documentEl.appendChild(newPage);
  newPage.appendChild(df);
  
}