JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<div class="nav">

    <a class='nav-title' href="#">big.js</a>

    <b> CONSTRUCTOR </b>
    <ul>
      <li><a href="#big">Big</a></li>
    </ul>

    <a href="#constructor-properties">Properties</a>
    <ul>
      <li><a href="#dp">DP</a></li>
      <li><a href="#rm">RM</a></li>
    </ul>

    <b> INSTANCE </b>

    <a href="#prototype-methods">Methods</a>
    <ul>
      <li><a href="#abs"    >abs</a></li>
      <li><a href="#cmp"    >cmp</a></li>
      <li><a href="#div"    >div</a></li>
      <li><a href="#eq"     >eq</a></li>
      <li><a href="#gt"     >gt</a></li>
      <li><a href="#gte"    >gte</a></li>
      <li><a href="#lt"     >lt</a></li>
      <li><a href="#lte"    >lte</a></li>
      <li><a href="#minus"  >minus</a></li>
      <li><a href="#mod"    >mod</a></li>
      <li><a href="#plus"   >plus</a></li>
      <li><a href="#pow"    >pow</a></li>
      <li><a href="#round"  >round</a></li>
      <li><a href="#sqrt"   >sqrt</a></li>
      <li><a href="#times"  >times</a></li>
      <li><a href="#toE"    >toExponential</a></li>
      <li><a href="#toF"    >toFixed</a></li>
      <li><a href="#toP"    >toPrecision</a></li>
      <li><a href="#toS"    >toString</a></li>
      <li><a href="#valueOf">valueOf</a></li>
      <li><a href="#toJSON" >toJSON</a></li>
    </ul>

    <a href="#instance-properties">Properties</a>
    <ul>
      <li><a href="#coefficient">c : coefficient</a></li>
      <li><a href="#exponent"   >e : exponent</a></li>
      <li><a href="#sign"       >s : sign</a></li>
    </ul>

    <a href="#Errors">Errors</a>

    <a class='end' href="#faq">FAQ</a>

  </div>

  <div class="container">

    <h1>big.js</h1>

    <p>
      A small, fast, easy-to-use library for arbitrary-precision decimal
      arithmetic.
    </p>

    <p>
      <a href="https://github.com/MikeMcl/big.js/">Hosted on GitHub</a>.
    </p>


    <h2>API</h2>

    <p>
      In all examples below, <code>var</code> and semicolons are not shown, and
      if a...

CSS

html{font-family:sans-serif;font-size:100%}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;
  line-height:1.65em;background:#fefff5;color:#000;min-height:100%;margin:0}
.nav{background:#fff;position:fixed;top:0;bottom:0;left:0;width:130px;
  overflow-y:auto;padding:15px 0 30px 20px; border-right: 1px solid #69d2e7}
div.container{width:700px;margin:30px 0 50px 190px}
p{margin:0 0 1em;width:700px}
pre,ul{margin:1em 0}
h1,h2,h3,h4,h5{margin:0;padding:1.5em 0 0}
h1,h2{padding:.75em 0 1em}
h1{font-size:2.75em;color:#fa6900}
h2{font-size:2.25em;color:#fa6900}
h3{font-size:1.75em;color:#69d2e7}
h4{font-size:1.75em;color:#fa6900;padding-bottom:.75em}
h5{font-size:1.2em;padding-bottom:.3em}
h6{font-size:1.1em;margin:0;padding:0.5em 0}
dd dt{font-size:1.2em}
dt{padding-top:.5em}
dd{padding-top:.35em}
b{font-weight:700}
a,a:visited{color:#444;text-decoration:none}
a:active,a:hover{outline:0;color:#000}
a:hover{text-decoration:underline}
.nav a,.nav b,.nav a:visited{display:block;color:#fa6900;font-weight:700;
  margin-top:15px}
.nav b{color:#69d2e7;margin-top:20px;cursor:default;width:auto}
ul{list-style-type:none;padding:0 0 0 20px}
.nav ul{line-height:14px;padding-left:0;margin:5px 0 0}
.nav ul a,.nav ul a:visited{display:inline;color:#000;font-family:Verdana,
  Geneva,sans-serif;font-size:11px;font-weight:400;margin:0}
.inset,ul.inset{margin-left:20px}
code.inset{font-size:.9em}
.nav li{cursor:pointer;width:auto;margin:0 0 3px}
span.alias{font-style:italic;margin-left:20px}
table{border-collapse:collapse;border-spacing:0;border:2px solid #a7dbd8;
  margin:1.75em 0;padding:0}
td,th{text-align:left;margin:0;padding:2px 10px;border:1px dotted #a7dbd8}
th{border-top:2px solid #a7dbd8;border-bottom:2px solid #a7dbd8;color:#f38630}
pre{background:#fff;white-space:pre-wrap;word-wrap:break-word;
  border-left:5px solid #a7dbd8;padding:1px 0 1px 15px;margin:1.2em 0}
code,pre{font-family:Monaco,Consolas,"Lucida Console",monospace;
 ...