JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-print-css/css/bootstrap-print.min.css" media="print">
<h1>
  Page Heading
  <small class="text-muted">Sample</small>
</h1>
<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

<h2>Definitions</h2>
<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

<h2></h2>
<math><msqrt><mi>x</mi></msqrt></math>
<br>
<math>
    <mrow>
      <mrow>
        <msup>
          <mi>a</mi>
          <mn>2</mn>
        </msup>
        <mo>+</mo>
        <msup>
          <mi>b</mi>
          <mn>2</mn>
        </msup>
      </mrow>
      <mo>=</mo>
      <msup>
        <mi>c</mi>
        <mn>2</mn>
      </msup>
    </mrow>
  </math>

<h2>Users</h2>
<table class="table table-sm caption-top">
  <caption>List of users</caption>
  <thead class="table-dark">
    <tr>
      <th scope="col">Column #1</th>
      <th scope="col">Column #2</th>
    </tr>
  </thead>
  <tbody>
   ...

CSS

@media print {
  thead {
    display: table-header-group;
  }

  tfoot {
    /* display: table-footer-group; */
  }

  th {
    break-inside: avoid;
  }

  table {
    page-break-inside: auto;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  table,
  table th,
  table td {
    /* border-width: 1px;
  border-style: solid;
  border-spacing: 10px;
  border-collapse: separate; */
  }

  h2 {
    page-break-before: always;
  }

  h3,
  h4 {
    page-break-after: avoid;
  }

  pre,
  blockquote {
    page-break-inside: avoid;
  }

  @page {
    size: letter landscape;
  }


  @page :left {
    margin-left: 30cm;
  }

  @page :right {
    margin-left: 40cm;
  }

  @page :first {
    background-color: silver;
  }


  @page :blank {
    @top-center {
      content: "This page is intentionally left blank."
    }
  }


  @page: right {
    @bottom-left {
      margin: 10pt 0 30pt 0;
      border-top: .25pt solid #666;
      content: "My book";
      font-size: 9pt;
      color: #333;
    }
  }


  @page: left {
    @bottom-left {
      content: "Page "counter(page) " of "counter(pages);
    }
  }



}