JSFiddle - React, Tailwind, and code Playground
by Cone
HTML
<script src="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Cuprum:400,700&subset=latin,cyrillic-ext"></script>
<body><br><br>
<ul class="shedule">
<li>
<div class="day">Понедельник </div>
<div class="time">7:00 - 23:00</div>
</li>
<li>
<div class="day">Вторник</div>
<div class="time">7:00 - 23:00</div>
</li>
<li>
<div class="day">Среда</div>
<div class="time">7:00 - 23:00</div>
</li>
<li>
<div class="day">Четверг</div>
<div class="time">7:00 - 23:00</div>
</li>
<li>
<div class="day">Пятница</div>
<div class="time">7:00 - 23:00</div>
</li>
<li>
<div class="day">Суббота</div>
<div class="time">7:30 - 23:00</div>
</li>
<li>
<div class="day">Воскресенье</div>
<div class="time">ВЫХОДНОЙ</div>
</li>
</ul>
</body>
CSS
* {
padding:0;
margin:0;
}
body {
font-size:62.5%;
font-family:'Cuprum', sans-serif;
}
ul.shedule {
padding:5px;
font-size:120%;
float:left;
border:1px solid #eee;
list-style:none;
display:table;
width:219px;
color:white;
zoom:1;
min-height:20px;
}
ul.shedule li {
float:left;
clear:both;
position:relative;
margin-bottom:2px;
}
.shedule .day {
text-transform:uppercase;
float:left;
margin-right:2px;
width:127px;
padding:10px;
background:#a6ce2c;
}
.shedule .time {
float:left;
text-align:center;
width:70px;
padding:10px 0;
background:#333;
}