JSFiddle - React, Tailwind, and code Playground

by cbruen1

HTML

<h1>Basic document flow</h1>

<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>

<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>

<p  class="positioned"><span>like this one</span> and <span>this one</span> sit on the same line as one anotherWe are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>

CSS

body {
  width: 500px;
  margin: 0 auto;
  position: relative;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  top: 10px;
  background: yellow;
}