JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<h1>Курсы</h1>
<ul class="popular-courses">
    <li>
        <a href="#">Pshh</a>
        <div class="title">Lorem ipsum</div>
    </li>
    <li>
        <a href="#">Pshh</a>
        <div class="title">dolor sit</div>
    </li>
    <li>
        <a href="#">Pshh</a>
        <div class="title">amet</div>
    </li>
    <li>
        <a href="#">Pshh</a>
        <div class="title">asdsad</div>
    </li>
</ul>

CSS

ul.popular-courses {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.popular-courses li {
    display: block;
    float: left;
    width: 24%;
    border: #aaa 1px solid;
    margin: 0.5%;
    padding: 5px;
    box-sizing: border-box;
}
.popular-courses .title {
    color: #aaa;
    font-size: 13px;
}

@media (max-width: 400px) { 
    .popular-courses li {
        width: 48%;
    }
}

@media (max-width: 200px) { 
    .popular-courses li {
        width: 100%;
    }
}