• HTML
• CSS
• JS

HTML

<div id="calendar1">
    <p class="calendar-day"></p>
    <p class="calendar-date"></p>
    <p class="calendar-month-year"></p>
</div>
<div id="calendar2">
    <p class="calendar-day"></p>
    <p class="calendar-date"></p>
    <p class="calendar-month-year"></p>
</div>
<div id="calendar3">
    <p class="calendar-day"></p>
    <p class="calendar-date"></p>
    <p class="calendar-month-year"></p>
</div>

CSS

body{
    margin: 20px auto;
    width: 70%;
}

#calendar1{
    background-color: cornflowerblue;
}

#calendar2{
    background-color: #64ed64;
}

#calendar3{
    background-color: #ed64ed;
}

div{
    width: 130px;
    height: 180px;
    color: #fff;
    border-radius: 5%;
    box-shadow: 0 4px 4px 0 rgba(50, 50, 50, 0.4);
    display: inline-block;
    margin: 0 20px;
}

p{
    font-family: Verdana, Arial, sans-serif;
    padding: 10px 0;
    margin: 0;
    color: #fff;
    text-align: center;
}

.calendar-day{
    font-size: 16px;
}

.calendar-month-year{
    font-size: 14px;
}

.calendar-date{
    font-size: 64px;
    padding-top: 10px;
    padding-bottom: 0;
}

JS

//this function will find today's date
function calendar(){
    var day=['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'];
    var month=['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
    var d=new Date();
    setText('calendar-day', day[d.getDay()]);
    setText('calendar-date', d.getDate());
    setText('calendar-month-year', month[d.getMonth()]+' '+(1900+d.getYear()));
};

//this function will set the text value of <p> tags
function setText(id, val){
    if(val < 10){
        val = '0' + val;    //add leading 0 if val < 10
    }
    
    var elements = document.getElementsByClassName(id);

    for (var i = 0; i < elements.length; i++) {
        elements[i].innerHTML = val;
    }
};

//call calendar() when page load
window.onload = calendar;