JSFiddle - React, Tailwind, and code Playground

by Pavel Volyntsev

HTML

<div class="column">
    <div class="cell">
        <div class="icon icons8-Pencil"></div>
        <span class="header_text">Bla-bla-bla</span>
        <span class="text">В этом выпуске в качестве эксперимента мы решили проверить, как смотрелся бы дайджест</span>
    </div>
    <div class="cell">
        <div class="icon icons8-Pencil"></div>
        <span class="header_text">Bla-bla-bla</span>
        <span class="text">В этом выпуске в качестве эксперимента мы решили проверить, как смотрелся бы дайджест</span>
    </div>
</div>
<div class="column">
    <div class="cell">
        <div class="icon icons8-Like"></div>
        <span class="header_text">Bla-bla-bla</span>
        <span class="text">В этом выпуске в качестве эксперимента мы решили проверить, как смотрелся бы дайджест</span>
    </div>
    <div class="cell">
        <div class="icon icons8-Like"></div>
        <span class="header_text">Bla-bla-bla</span>
        <span class="text">В этом выпуске в качестве эксперимента мы решили проверить, как смотрелся бы дайджест</span>
    </div>
</div>
<div class="column">
    <div class="cell">
        <div class="icon icons8-Idea"></div>
        <span class="header_text">Bla-bla-bla</span>
        <span class="text">В этом выпуске в качестве эксперимента мы решили проверить, как смотрелся бы дайджест</span>
    </div>
    <div class="cell">
        <div class="icon icons8-Idea"></div>
        <span class="header_text">Bla-bla-bla</span>
        <span class="text">В этом выпуске в качестве эксперимента мы решили проверить, как смотрелся бы дайджест</span>
    </div>
</div>
<div class="credits">
<a href="http://icons8.com/web-app/1057/Pencil">Free icons by Icons8</a>
</div>

CSS

body {
    font-family: Arial;
    font-size: 14px;
    color: #333333;
}
a {
    color: #333333;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
.credits {
    margin-top: 2em;
}
.column {
    width: 33%;
    background-color: #c8beb3;
    display: table-cell;
}
.cell {
    background-color: #f0f0e8;
    border-style: solid 1px;
    margin: 1em;
    padding: 0.25em;
    display: block;
    min-height: 80px;
}

/*Like icon by Icons8 */
.icons8-Like { /* Customizes Like icon */
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjJweCIgaGVpZ2h0PSIxOS4yMjJweCIgdmlld0JveD0iMCAwIDIyIDE5LjIyMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjIgMTkuMjIyOyIgZmlsbD0iIzAwMDAwMCIgPjxwYXRoIGQ9Ik0xNS44NjksMGMtMi4wOTYsMC0zLjg4NywxLjQ5NC00Ljg3MSwyLjUyNEMxMC4wMTQsMS40OTQsOC4yMjcsMCw2LjEzMiwwQzIuNTIxLDAsMCwyLjUxNywwLDYuMTIJYzAsMy45NywzLjEzMSw2LjUzNiw2LjE2LDkuMDE4YzEuNDMsMS4xNzMsMi45MSwyLjM4NSw0LjA0NSwzLjcyOWMwLjE5MSwwLjIyNSwwLjQ3MSwwLjM1NSwwLjc2NSwwLjM1NWgwLjA1OAljMC4yOTUsMCwwLjU3NC0wLjEzMSwwLjc2NC0wLjM1NWMxLjEzNy0xLjM0NCwyLjYxNi0yLjU1Nyw0LjA0Ny0zLjcyOUMxOC44NjcsMTIuNjU3LDIyLDEwLjA5MSwyMiw2LjEyQzIyLDIuNTE3LDE5LjQ3OSwwLDE1Ljg2OSwwCXoiPjwvcGF0aD48L3N2Zz4=') 50% 50% no-repeat;
  background-size: 100%;
  width: 64px;
  height: 64px;
}
/*Idea icon by Icons8 */
.icons8-Idea { /* Customizes Idea icon */
  background:...