JSFiddle - React, Tailwind, and code Playground

by Liu ChangFeng

HTML

<div style="width:50%">
width: 50%
</div>

<div style="font-size:22px;width:10em;">
width:  10em == font-size: 22px * 10 == 220px
</div>

<div style="width:10rem">
width:  10rem == html font-size: 16px * 10 == 160px
</div>

<div style="width:100vw">
width: 100vw
</div>

<div style="width:50vw">
width: 50vw
</div>

<div style="width:30vw">
width: 30vw
</div>

CSS

body{
  margin:0;
}

div{
  width:30px;
  height:30px;
  background-color:#F00;
  overflow:visible;
  margin-bottom:8px;
  color:#00F;
  letter-spacing:2px;
  white-space:nowrap;
}