JSFiddle - React, Tailwind, and code Playground

by sstur

HTML

<div class="box a">
  <div class="box b">
    <div class="box c">
      <div class="box d">
        <div class="box e">
          The vertical margins collapse but the horizontal
          margins don't. The vertical margins also collapse
          in IE because the elements don't have a layout.
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.box {
  margin: 10px;
  overflow: auto;
}
.a {
  background: #777;
}
.b {
  background: #999;
}
.c {
  background: #bbb;
}
.d {
  background: #ddd;
}
.e {
  background: #fff;
}