JSFiddle - React, Tailwind, and code Playground

Date/Time layout

by Jennifer Perrin

HTML

<div class="wrapper">
    <div id="clock" class="center clock"></div>
    <div id="month" class="center month"></div>
    <div id="dates">
        <div id="date" class="date"></div>
        <div id="year" class="year"></div>
        <div id="day" class="day"></div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Lato:400,300,700);
* {
    margin: 0;
    padding: 0;
}
html {
    color:white;
    font-family:'Open Sans';
    -webkit-font-smoothing: antialiased;
    background-color:#393939;
}
.wrapper {
    position:absolute;
    top:-300px;
}
.center {
    width: 320px;
    position: absolute;
    text-align: center;
}
.clock {
    top:400px;
    font-size: 70px;
}
.month {
    top:475px;
    font-size: 30px;
    font-family:'Open Sans';
    font-weight: 200;
    text-transform: uppercase;
}
.date {
    position: absolute;
    width: 160px;
    text-align: right;
    font-size: 52px;
    top:500px;
}
.year {
    position: absolute;
    width: 160px;
    text-align: left;
    left:165px;
    font-size: 30px;
    top:523px;
}
.day {
    position: absolute;
    width: 160px;
    text-align: left;
    left:165px;
    font-size: 15px;
    top:513px;
    font-family:'Open Sans';
    letter-spacing: 0;
    text-transform: uppercase;
}
#dates {
    position: absolute;
}

JavaScript

var language = window.navigator.language;
if (language.length > 2) {
    language = language.split('-');
    language = language[0];
}

//alert(language);
//language = "zh"; // manually set language

if (language === "en") {
    var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
} else if (language === "cz") {
    var weekday = ["Neděle", "Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota"];
    var month = ["Leden", "Únor", "Březen", "Duben", "Květen", "Červen", "Červenec", "Srpen", "Září", "Říjen", "Listopad", "Prosinec"];
} else if (language === "it") {
    var weekday = ['Domenica', 'Luned&#236', 'Marted&#236', 'Mercoled&#236', 'Gioved&#236', 'Venerd&#236', 'Sabato'];
    var month = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
} else if (language === "sp") {
    var weekday = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];
    var month = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
} else if (language === "de") {
    var weekday = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
    var month = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Ju li", "August", "September", "Oktober", "November", "Dez ember"];
} else if (language === "fr") {
    var weekday = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
    var month = ["Janvie", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];

} else if (language === "zh") {
    var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var month = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月',...