.container {
  width: 150px;
  height: 100px;
  margin: 0px auto;
}
.card {
  float: left;
  width: 130px;
  height: 100%;
  border: 1px solid;
  border-radius: 5px;
  margin-right: 10px;
  background: #F9F9F9;
  position: relative;
  box-shadow: 0px 0px 3px #ddd;
}
.card .inner {
  background: #F9F9F9;
  border: 1px solid #E3E3E3;
  border-radius: 0px 0px 5px 5px;
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: -1px;
  left: -1px;
  font-family: arial;
  text-align: center;
  box-shadow: inset 0px 0px 1px #FFF;
}
.card .inner .title {
  display: block;
  font-size: 9px;
  color: #fff;
  margin-top: -10px;
}
.card .inner .title .text {
  display: inline-block;
  padding: 5px 15px;
  border-radius: 50px;
  font-weight: bold;
}
.card .inner .number {
  color: #313A3E;
  font-size: 50px;
  font-weight: bold;
  display: block;
  margin-top: 5px;
}
.card .inner .measure {
  color: #676767;
  font-size: 10px;
  display: block;
  margin-top: -10px;
}
.temp {
  background: #EC6F69;
  border: 1px solid #DE3932;
}
.temp .inner {
  border-top: 1px solid #DE3932;
}
.temp .inner .text {
  border: 1px solid #DE3932;
  background: #EC6F69;
  text-shadow: 1px 1px 0px #DE3932;
}
.temp .inner .icon {
  display: block;
  position: absolute;
  top: -65px;
  left: 75px;
  width: 17px;
  height: 17px;
  background: #fff;
  border-radius: 17px;
  border: 4px solid #EC6F69;
  box-shadow: 0 0 0 4px #fff, 1px 1px 0 4px #DE3932;
}
.temp .inner .icon:before {
  content: '';
  display: block;
  width: 7px;
  height: 25px;
  background: #fff;
  position: absolute;
  top: -30px;
  left: 0px;
  border: 5px solid #EC6F69;
  border-radius: 10px 10px 0px 0px;
  border-bottom: 0px none;
  box-shadow: 0 -4px 0 4px #fff, 4px -3px 0 1px #DE3932;
}
.energy {
  background: #A6C659;
  border: 1px solid #7DAD0A;
}
.energy .inner {
  border-top: 1px solid #7DAD0A;
}
.energy .inner .icon {
  width: 53px;
  height: 53px;
  position: absolute;
  top: -100px;
  left: 60px;
  border: 5px solid #fff;
  border-radius: 65px;
  box-shadow: 1px 1px 0px #7DAD0A;
}
.energy .inner .icon:before {
  content: '';
  display: block;
  border-right: 15px solid #fff;
  border-top: 40px solid transparent;
  transform: skew(-30deg, 0);
  position: absolute;
  top: -10px;
  right: 15px;
  box-shadow: 5px -10px #A6C659;
}
.energy .inner .icon:after {
  content: '';
  display: block;
  border-right: 15px solid #fff;
  border-bottom: 40px solid transparent;
  transform: skew(-40deg, 0);
  position: absolute;
  top: 25px;
  right: 30px;
  box-shadow: 5px 0 0px #A6C659;
}
.energy .inner .text {
  border: 1px solid #7DAD0A;
  background: #A6C659;
  text-shadow: 1px 1px 0px #7DAD0A;
}