JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<div class="date"></div>
<div class="date"></div>

CSS

.dayname {
    color: orange;
    font-size: 32px;
}
.day {
    color: red;
}
.month {
    color: green;
}
.year {
    color: blue;
}

JavaScript

function getDateInfo (date) {
    var monthNames = [ "Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro" ],
        dayNames= ["Domingo","Segunda-feira","Terça-feira","Quarta-feira","Quinta-feira","Sexta-feira","Sabado"];
    
    return {
        dayname: dayNames[date.getDay()],
        day: date.getDate(),
        month: monthNames[date.getMonth()],
        year: date.getFullYear()
    };
}

var dateInfo = getDateInfo(new Date(Date.now() - 86400000));
$('.date:nth-child(1)').html(
    '<span class="dayname">' + dateInfo.dayname + '</span><br />' + 
    '<span class="day">' + dateInfo.day + '</span> ' +
    '<span class="month">' + dateInfo.month + '</span> ' +
    '<span class="year">' + dateInfo.year + '</span>'
);

dateInfo = getDateInfo(new Date());
$('.date:nth-child(2)').html(
    '<span class="dayname">' + dateInfo.dayname + '</span><br />' + 
    '<span class="day">' + dateInfo.day + '</span> ' +
    '<span class="month">' + dateInfo.month + '</span> ' +
    '<span class="year">' + dateInfo.year + '</span>'
);