JSFiddle - React, Tailwind, and code Playground

by Sasha Morozov

HTML

<div class="posts">
  <ul class="posts-list">
    <li class="posts-list__list-item">
      <div class="posts-group">
        <ul class="posts-group-list">
          <li class="posts-group-list__list-item"></li>
          <li class="posts-group-list__list-item"></li>
          <li class="posts-group-list__list-item __placeholder">
            <div class="posts-group-list__item">
              <h3>
            No Posts Yet
            </h3> Add Post
            </div>
          </li>
        </ul>
      </div>
    </li>
    <li class="posts-list__list-item">
      <div class="posts-group">
        <ul class="posts-group-list">
          <li class="posts-group-list__list-item"></li>
          <li class="posts-group-list__list-item"></li>
          <li class="posts-group-list__list-item"></li>
          <li class="posts-group-list__list-item __placeholder">
            <h3>
            No Posts Yet
            </h3> Add Post
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

<div class="posts">
  <ul class="posts-list">
    <li class="posts-list__list-item">
      <div class="posts-group">
        <ul class="posts-group-list">
          <li class="posts-group-list__list-item __placeholder">
            <div class="posts-group-list__item">
              <h3>
            No Posts Yet
            </h3> Add Post
            </div>
          </li>
        </ul>
      </div>
    </li>
    <li class="posts-list__list-item">
      <div class="posts-group">
        <ul class="posts-group-list">
          <li class="posts-group-list__list-item"></li>
          <li class="posts-group-list__list-item __placeholder">
            <div class="posts-group-list__item">
              <h3>
            No Posts Yet
            </h3> Add Post
            </div>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

SCSS

*, *:before, *:after {
  box-sizing: border-box;
}

.posts {
  &-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    min-width: 0;
    &__list-item {
      flex: 1 1 0%;
      min-width: 0;
      margin: 32px;
    }
  }
  &-group {
    &-list {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      min-width: 0;
      height: 100%;
      border: 1px solid #333;
      border-radius: 5px;
      overflow: hidden;
      &__list-item {
        flex: 0 1 auto;
        width: (100% / 3);
        min-width: 0;
        padding-top: (100% / 3);
        position: relative;
        &.__placeholder {
          flex-grow: 1;
            .posts-group-list__item {
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              text-align: center;
                h3 {
                  font-size: 20px;
                }
             }
        }
        &:nth-child(1):not(.__placeholder) {
          background-color: #aaa;
        }
        &:nth-child(2):not(.__placeholder) {
          background-color: #bbb;
        }
        &:nth-child(3):not(.__placeholder) {
          background-color: #ccc;
        }
        &:nth-child(4n) {
          display: none;
        }
      }
      &__item {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }
  }
}