JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!-- border box-->
<div class="simple elem">
  <span class="label">&lt;div class="simple"&gt;</span>
  <p>
    We're the same size now!
  </p>
  <span class="endlabel">&lt;/div&gt;</span>
</div>
<div class="fancy elem">
  <span class="label">&lt;div class="fancy"&gt;</span>
  <p>
    Hooray!
  </p>
  <span class="endlabel">&lt;/div&gt;</span>
</div>

CSS

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}