JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cyberua.github.io/scripts/snowstorm-min.js"></script>
<audio id="music" src="http://dl32.musload.com/load_20/load_box/45/18/51925526-41f6d4d9ea40.mp3" autoplay ></audio>

CSS

*{padding:0; margin: 0;}

audio{
    display:none;
}

ol{
	 /*counter-reset: li; Initiate a counter */
	list-style: none; /* Remove default numbering */
	*list-style: decimal; /* Keep using default numbering for IE6/7 */
	font: 15px 'trebuchet MS', 'lucida sans';
	padding: 0;
	/*margin-bottom: 4em;*/
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
    width:600px;
    margin:50px auto;
}

ol ol{
    	margin: 0 0 0 2em; /*Add some left margin for inner lists */
}

.rectangle-list {
    
    margin: 30px;
}

.rectangle-list a{
	position: relative;
	display: block;
	padding: .4em .4em .4em .8em;
	*padding: .4em;
	margin: .5em 0 .5em 2.5em;
	/*background: #ddd;*/
    background: #8A88B5;
    color: white;
	/*color: #444;*/
	text-decoration: none;
	transition: all .3s ease-out;
    cursor: default;
}

.rectangle-list a:hover{
	background: #eee;
    color: #8A88B5;
}	

.rectangle-list span{

	background: #fa8072;
	height: 32px;
	width: 32px;
    float: left;
    line-height: 2em;
	text-align: center;
	font-weight: bold;
}

.rectangle-list a:after{
	position: absolute;	
	content: '';
	border: .5em solid transparent;
	left: -1em;
	top: 50%;
	margin-top: -.5em;
	transition: all .3s ease-out;				
}

.rectangle-list a:hover:after{
	left: -.5em;
	border-left-color: #fa8072;				
}

JavaScript

snowStorm.flakesMaxActive = 100;
var schedule = []; 
    
    schedule["Понедельник"] = ["Іноз. мова", "МЗКІТ", "МЗКІТ"] ,
    schedule["Вторник"] =  ["Авт. Бух. Облік", "Авт. Бух. Облік", "Проект. Практ"];
    schedule["Среда"] = ["ММДО", "ММДО", "ПАІС", "ПАІС"];
    schedule["Четверг"] = ["WEB - технол", "WEB - технол", "Охорона праці"];
    schedule["Пятница"] = ["Екон. і Орг.", "Екон. і Орг."];
  

var ol = document.createElement("ol"),
    keys = Object.keys(schedule),
    innerOl = "",
    i = 1;

ol.className = "rectangle-list";

keys.forEach(function (day) {
    
    innerOl += "<li><span>"+i+"</span><a href=''>" + day + "</a></li>";
    
    innerOl += "<ol><li> <a href=''>" + schedule[day].join("</a></li><li> <a href=''>") + "</a></li></ol>";
    
    i++;
    
})

ol.innerHTML = innerOl;

document.body.appendChild(ol);
document.body.style.backgroundImage = "url('http://www.fullhdoboi.ru/_ph/24/428211379.jpg')";// тут ссылка на картинку
document.body.onclick = function (e) {
 
    return false;
}
// проигрываивание мызки
document.getElementById("music").addEventListener("ended", function () {
    
    setTimeout(function () {
        
        this.currentTime = 0;
        this.play();
    
    
    }.bind(this), 2000);
});