We are going to see a short tutorial to create the single day calendar widget using css. It very simple widget with using few lines of css and html code. Lets see how to create that.

HTML

<div class="cal">
  <span>03</span>
  <span>Oct</span>
</div>

CSS

div.cal {
  height: 70px;
  width: 70px;
  border-right: 5px solid #fff;
  border-bottom: 5px solid #fff;
  box-shadow: 5px 5px 0px #000;
  -webkit-box-shadow: 5px 5px 0px #000;
  -moz-box-shadow: 5px 5px 0px #000;
  background: #09f;
  border-radius: 10px;
  text-align: center;
}

div.cal span {
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  display: block;
}

div.cal span:last-child {
  font-size: 18px;
}

That’s all your widget is ready use, hope it will useful for someone . Here we have live demo JS fiddle for demo