JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<br>
<br>
<div class="block">
    <div class="part_one" id="part_f">
         <h3>Базовый</h3>

         <h4>1000</h4>

        <ul>
            <li class="head">Для провдинутого уровня</li>
            <li class="price"> <span class="num">1 000</span>

                <p class="kzt">KZT</p>
            </li>
        </ul>
    </div>
    <div class="part_two" id="part_f">
         <h3>Стандарт</h3>

        <ul>
            <li class="head">Для провдинутого уровня</li>
            <li class="price"> <span class="num">6 000</span>

                <p class="kzt">KZT</p>
            </li>
        </ul>
    </div>
    <div class="part_three" id="part_f">
         <h3>Продвинутый</h3>

        <ul>
            <li class="head">Для провдинутого уровня</li>
            <li class="price"> <span class="num">8 000</span>

                <p class="kzt">KZT</p>
            </li>
        </ul>
    </div>
    <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>17:00-23:00</li>
            <li class="price"> <span class="num">12 000</span>

                <p class="kzt">KZT</p>
            </li>
        </ul>
    </div>
</div>

CSS

* {
    padding:0;
    margin:0;
}
body {
    font-family:arial;
    font-size:12px;
    font-size:62.5%;
}
.block {
    width:960px;
    margin:0 auto;
    position:relative;
    display:table;
}
#part_f {
    text-align:center;
    background:#fff;
    min-height:100px;
    width:220px;
    box-shadow:0 2px 3px #666;
    margin-right:20px;
    float:left;
}
#part_f h4 {
    padding:10px 0;
    font-size:240%;
}
#part_f h3 {
    padding:10px 0;
    font-size:240%;
    background:#a6ce2c;
    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_four {
    margin:0;
}

JavaScript

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