JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="hill2"></div>
<div class="hill1"></div>
<div class="ground"></div>
<div class="tree tree1">
  <div class="trunk">
    <div class="leftbranch"></div>
    <div class="rightbranch"></div>
  </div>
</div>
<div class="tree tree2">
  <div class="trunk">
    <div class="leftbranch"></div>
    <div class="rightbranch"></div>
  </div>
</div>
<div class="tree tree3">
  <div class="trunk">
    <div class="leftbranch"></div>
    <div class="rightbranch"></div>
  </div>
</div>

CSS

body {
  background: #dacd6d;
  overflow-x: hidden;
}
.ground {
  background: #9db56d;
  height: 300px;
  width: 100%;
  position: absolute;
  bottom: 0;
}
.hill1 {
  background: #9db56d;
  width: 330px;
  height: 230px;
  border-radius: 100%;
  position: absolute;
  bottom: 145px;
  left: 7%;
}
.hill2 {
  background: #466e61;
  width: 400px;
  height: 300px;
  border-radius: 100%;
  position: absolute;
  bottom: 110px;
  right: 7%;
}
.tree {
  height: 150px;
  width: 150px;
  background-color: #6a976c;
  border-radius: 100%;
}
.trunk {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 10px 212px 10px;
  border-color: transparent transparent #374544 transparent;
  margin-top: 54px;
  margin-left: 65px;
}
.leftbranch {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 3px 60px 3px;
  border-color: transparent transparent #374544 transparent;
  transform: rotate(-50deg);
  position: absolute;
  margin-top: 12.5px;
  margin-left: -25px;
}
.rightbranch {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 2px 35px 2px;
  border-color: transparent transparent #374544 transparent;
  transform: rotate(36deg);
  position: absolute;
  margin-top: 4px;
  margin-left: 9px;
}
.tree1 {
  position: absolute;
  bottom: 180px;
  left: 11%;
}
.tree2 {
  position: absolute;
  bottom: 160px;
  left: calc(28%);
}
.tree3 {
  position: absolute;
  bottom: 185px;
  right: 11.5%;
}