JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="block">
    <div class="part_four" id="part_f">
         <h3>Профи</h3>
        <ul>
            <li class="head"> отвечти душу</li>
            <li>7:00-17:00</li>
            <li class="price"> <span class="num">11 000</span>

                <p class="kzt">KZT</p>
            </li>
             <li class="order"><button>оформит абонимент</button></li>
            <li>17:00-23:00</li>
            <li class="price"> <span class="num">12 000</span>

                <p class="kzt">KZT</p>
            </li>
            <li class="order"><button>оформит абонимент</button></li>
        </ul>
    </div>
</div>

CSS

* {
    padding:0;
    margin:0;
}
body {
    font-family:arial;
    font-size:12px;
    font-size:62.5%;
}
.block {
    width:960px;
    margin:50px 100px;
    position:relative;
    display:table;
}
#part_f {
    text-align:center;
    border-radius:3px;
    background:#fff;
    min-height:100px;
    width:220px;
    overflow:hidden;
    position:relative;
    box-shadow:0 2px 6px #666;
    margin-right:20px;
    float:left;
}
#part_f h4 {
    padding:10px 0;
    font-size:240%;
}
#part_f h3 {
    padding:15px 0;
    font-size:240%;
    background:#a6ce2c;
    text-shadow:1px 1px 1px #333;
    color:white;
}
#part_f ul {
    list-style:none;
}
#part_f ul li {
    position:relative;
    padding:15px 0;
}
#part_f ul li.head {
    font-weight:bold;
}
#part_f ul li.price {
    font-weight:bold;
    border-top:1px solid #f4f4f4;
}
#part_f ul li.price p.kzt {
    font-size:130%;
    right:20px;
}
#part_f ul li.price span.num {
    font-size:500%;
}
#part_f ul li.order button {padding:8px 6px;}


.part_four {
    margin:0;
}

JavaScript

$('li:odd').css({
    backgroundColor: '#f4f4f4'
})