JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<h1>Hello, world</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia deleniti repudiandae provident. Perferendis molestias quam ea, dolores quae maxime illum perspiciatis officia quos eos aspernatur totam optio, asperiores. Ut, iure!
</p>
<h2>
Sub header
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto beatae rem nihil quisquam? Reprehenderit odio alias, aspernatur recusandae doloribus in facere consequuntur eum magnam ullam velit pariatur, temporibus perspiciatis tempora.</p>

<table>
  <tbody>
    <tr>
      <td>foo</td>
      <td>bar</td>
      <td>baz</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>bar</td>
      <td>baz</td>
    </tr>
  </tbody>
</table>

CSS

* {font-family: sans }

h1, h2, h3 {
  font-weight: 500;
  color: #444444;
}

h1:before {
   content: '<h1>';
   color: skyblue;
}
h1:after {
   content: '</h1>';
   color: skyblue;
}

h2:before {
   content: '<h2>';
   color: limegreen;
}
h2:after {
   content: '</h2>';
   color: limegreen;
}

p:before {
   content: '<p>';
   color: hotpink;
}
p:after {
   content: '</p>';
   color: hotpink;
}

table:before {
   content: '<table>';
   color: gray;
}
table:after {
   content: '</table>';
   color: gray;
}

td:before {
   content: '<td>';
   color: gray;
}
td:after {
   content: '</td>';
   color: gray;
}
tr:before {
   content: '<tr>';
   color: gray;
}
tr:after {
   content: '</tr>';
   color: gray;
}