JSFiddle - React, Tailwind, and code Playground

HTML

<div id="element1">width: 100px;</div>
<div id="element2">width: 100px;</div>
<div id="element3">width: 100px;</div>

CSS

*{
    margin: 0;
    padding: 0;
}
#element1, #element2, #element3{
    padding: 10px;
    border: 4px solid red;
    margin: 10px;
    width: 100px;
}
#element1{
    background: blue;
  /* Padding und Border zur Box dazu rechnen */
}
#element2{
    background: yellow;
  /* Padding mit einberechnen, Border dazu Zählen */ 
     -webkit-box-sizing: padding-box;
     -moz-box-sizing: 	padding-box;
     box-sizing: 		padding-box;
}
#element3{
    background: green;
  /* Padding und Border mit einberechnen: */ 
     -webkit-box-sizing: border-box;
     -moz-box-sizing: 	border-box;
     box-sizing: 		border-box;
}