JSFiddle - React, Tailwind, and code Playground

by Paco86

HTML

<div class="parent">
  <p>Parent div with 50% width.</p>
  <div class="child">
    <p>Child div with 90% width, 4px black border, and 20% padding </p>
  </div>
  <div class="twins">
    <p>Child div with 50% width, 4px black border, and 1em padding</p>
  </div>
  <div class="twins">
    <p>Child div with 50% width, 4px black border, and 1em padding</p>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}
.parent {
  width: 300px;
  border: 5px solid #E18728;
  float: left;
}

.child {
  width: 90%;
  padding: 20%;
  border: 4px solid black;
  margin: .5em auto;
}

.twins {
  width: 50%;
  padding: 1em;
  border: 4px solid black;
  float: left;
}


p:not(.intro) {
  text-align: center;
}