JSFiddle - React, Tailwind, and code Playground

by rulokc

HTML

<div class="parent">
  <div class="div1">div1</div>
  <div class="div2">w=150px</div>
  <div class="div3">h=150px</div>
  <div class="div4">w/h=150px</div>
  <div class="div5">w=200px</div>
  <div class="div6">w=200px</div>
</div>

CSS

.parent {
  background-color: rgba(150, 0, 150, 0.2);
  margin: 10px;
  padding: 30px;
  display: flex;
}
.div1 {
  background-color: rgba(150, 0, 150, 0.2);
  margin: 5px;
}
.div2 {
  background-color: rgba(150, 0, 150, 0.2);
  margin: 5px;
  width: 150px;
  font-size: 30px;
}
.div3 {
  background-color: rgba(150, 0, 150, 0.2);
  margin: 5px;
  height: 150px;
}
.div4 {
  background-color: rgba(150, 0, 150, 0.2);
  margin: 5px;
  width: 150px;
  height: 150px;
}
.div5 {
  background-color: rgba(150, 0, 150, 0.2);
  margin: 5px;
  width: 200px;
}
.div6 {
  background-color: rgba(150, 0, 150, 0.2);
  margin: 5px;
  width: 200px;
}