JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<h1 class="header">blah</h1>
<h2 class="alt-header">jljjlj</h2>
<p class="para">

A loose selector in CSS might be very much like the $name we used previously; whilst this is accurate, it is not explicit or sandboxed enough. We might initially have .name{} to style up a form field. Then, six months later, another developer might come along and need to style up a user’s profile page, where he
</p>

CSS

.header {
  font-size: 20px;
  color: blue;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 10px;
  background: pink;
}
.alt-header {
  
  margin: 0;
  margin: 20px 0;
  color: orange;
  line-height: 1.7;
}

.para {
  margin: 0;
  margin-top: 30px;
  background: yellow;
  
}