JSFiddle - React, Tailwind, and code Playground

by mindplay

HTML

<div class="box">
  <h1>Fox jumps over</h1>
</div>
<div class="space"></div>
<div class="box">
  <h2>The quick brown fox jumps over the lazy dog all day long</h2>
</div>

CSS

/* reset */

body, html {
    height: 100%; 
}

*, *::before, *::after{
    box-sizing: border-box; 
}

*{
    margin: 0; 
    padding: 0; 
}

ul, ol {
    list-style: none; 
}

img, picture, svg, video, canvas{
    max-width: 100%;
    height: auto; 
    vertical-align: middle; 
    background-repeat: no-repeat; 
    background-size: cover;
}

input, button, textarea, select{
    font: inherit; 
}

/* font face */

@font-face {
  font-family: 'Inknut Antiqua';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/inknutantiqua/v14/Y4GSYax7VC4ot_qNB4nYpBdaKUUE4J0.woff2) format('woff2');
}

body {
  margin: 24px;
}

.space {
  height: 24px;
}

.box {
  border: dotted 1px red;
}

h1, h2 {
  font-family: 'Inknut Antiqua';
  font-style: normal;
  font-weight: 400;
}

h1 {
  font-size: 60px;
  margin-bottom: -0.26em;
  margin-top: -0.28em;
  line-height: 1.3;
}

h2 {
  font-size: 36px;
  margin-bottom: -0.16em;
  margin-top: -0.17em;
  line-height: 1.1;
}

/* NOTE: the `lh` unit approach has the same limitation as `em` - it
         appears to account for line-height, but not correctly. that is,
         increasing the line-height does increase the height of the `lh`
         unit, but not at a rate that gives correct results. :-(
*/
/*
h1 {
  font-size: 60px;
  margin-bottom: -0.2lh;
  margin-top: -0.22lh;
  line-height: 1.3;
}

h2 {
  font-size: 36px;
  margin-bottom: -0.14lh;
  margin-top: -0.14lh;
  line-height: 1.1;
}
*/