JSFiddle - React, Tailwind, and code Playground

by John Crafts

HTML

<div id="rhom">
  <div class="rhomt"><span>Day</span><b>00</b></div>
</div>

CSS

#rhom{
  margin-top:0;
  margin-left: 38px;
    background: linear-gradient(105deg, rgba(0,166,156,1) 2%, rgba(28,44,68,1) 96%);
    height:200px;
    width: 200px;
    -webkit-transform: skewX(-15deg);
    position: relative;
}
.rhomt {
  position: absolute;
  -webkit-transform: skewX(15deg) translate(-40%,-50%);
  font-size: 1.2em;
  line-height: 1;
  color: white;
  left: 50%;
  top: 50%;
  vertical-align: middle;
  text-align: center;
  text-transform: uppercase;
  font-style: italic;
}
.rhomt span {
  display: block;
  font-weight: bold;
  padding-left: 25%;
}
.rhomt b {
  display: block;
  font-size: 7em;
  line-height: .8em;
}
#rhom:after {
  content: '';
  position: absolute;
  display:block;width: 0;
height: 0;
border-style: solid;
border-width: 70px 0 0 100px;
border-color: #007bff transparent transparent transparent;
  bottom: -70px;
}