JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<ul class="feature-box-grid">
    <li class="feature-box-slash bg-yellow">
        <div class="hover-effect"></div>
        <a href="#">
            <span class="corner-chevron"><i class="icon-chevron-right"></i></span>
            <i class="feature-box-icon icon-bus"></i>
            <h5>titel</h5>
            <p>content text</p>
        </a>
    </li>
    <li class="feature-box-slash bg-yellow">
        <div class="hover-effect"></div>
        <a href="#">
            <span class="corner-chevron"><i class="icon-chevron-right"></i></span>
            <i class="feature-box-icon icon-bus"></i>
            <h5>titel</h5>
            <p>content text</p>
        </a>
    </li>
        <li class="feature-box-slash bg-yellow">
        <div class="hover-effect"></div>
        <a href="#">
            <span class="corner-chevron"><i class="icon-chevron-right"></i></span>
            <i class="feature-box-icon icon-bus"></i>
            <h5>titel</h5>
            <p>content text</p>
        </a>
    </li>
        <li class="feature-box-slash bg-yellow">
        <div class="hover-effect"></div>
        <a href="#">
            <span class="corner-chevron"><i class="icon-chevron-right"></i></span>
            <i class="feature-box-icon icon-bus"></i>
            <h5>titel</h5>
            <p>content text</p>
        </a>
    </li>
</ul>

CSS

.bg-yellow{
    background-color:#1bbc9b;
}

.feature-box-grid {
    margin: 0 auto;
    padding: 0;
    *zoom:1;
    zoom:1;
    width: 58.5em;
}

.feature-box-grid:before {
    content: '';
    display: block;
}

.feature-box-grid:after {
    content: '';
    display: table;
    clear: both;
}

.feature-box-grid ul {
    margin: 0;
    padding: 0;
}

.feature-box-grid li {
    list-style: none;
}

.feature-box-grid .feature-box-team,.feature-box-grid .feature-box-slash,.feature-box-grid .feature-box-circle {
    width: 14em;
    height: 20em;
    float: left;
    margin-left: .8em;
    margin-top: .8em;
}

.feature-box-grid .feature-box-team:nth-child(4n+1),.feature-box-grid .feature-box-slash:nth-child(4n+1),.feature-box-grid .feature-box-circle:nth-child(4n+1) {
    margin-left: 0
}

.feature-box-grid .feature-box-team:first-child,.feature-box-grid .feature-box-slash:first-child,.feature-box-grid .feature-box-circle:first-child,.feature-box-grid .feature-box-team:nth-child(2),.feature-box-grid .feature-box-slash:nth-child(2),.feature-box-grid .feature-box-circle:nth-child(2),.feature-box-grid .feature-box-team:nth-child(3),.feature-box-grid .feature-box-slash:nth-child(3),.feature-box-grid .feature-box-circle:nth-child(3),.feature-box-grid .feature-box-team:nth-child(4),.feature-box-grid .feature-box-slash:nth-child(4),.feature-box-grid .feature-box-circle:nth-child(4) {
    margin-top: 0;
}

.feature-box-grid .feature-box-circle {
    height: inherit;
}

.feature-box-grid .feature-box-circle .feature-box-content {
    height: 10em;
}

.feature-box-grid .feature-box-team {
    height: inherit;
}

@media only screen and (max-width: 959px) {
    .feature-box-grid .feature-box-slash {
        height:22em
    }
}

@media only screen and (max-width: 825px) {
    .feature-box-grid {
        width:57.5em;
    }

    .feature-box-grid .feature-box-slash {
        height: 25em;
    }

    .feature-box-grid .feature-box-circle .feature-box-content {
        height:...