JSFiddle - React, Tailwind, and code Playground

by anothernick

HTML

<div class="cloud"></div>
<div class="tree">
  <div class="leaves"></div>
  <div class="trunk"></div>
</div>

CSS

html {
  background-color: #FFF;
}

.cloud {
  background: #EEE;
  margin: 0 1em 1em 0;
  height: 45px;
  width: 90px;
  border-top-left-radius: 90px;
  border-top-right-radius: 90px;
  margin-left: 40px;
}

.cloud:before {
  background-color: #EEE;
  content: " ";
  height: 20px;
  width: 40px;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  margin-left: -25px;
  display: block;
  margin-top: 25px;
  position: absolute;
}

.tree {
  position: absolute;
  bottom: 100px;
  right: 100px;
}

.tree .leaves {
  height: 60px;
  width: 60px;
  background: green;
  border-radius: 100px;
}