JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<div class="filteredDocContent">
    <div class="photography"></div>
    <div class="photography"></div>
    <div class="photography"></div>
    <div class="photography"></div>
    <div class="photography"></div>
    <div class="photography"></div>
    <div class="photography"></div>
    <div class="photography"></div>
    <div class="photography"></div>
    <div class="photography"></div>
    <div class="photography"></div>
</div>
<div class="placeholder">This will appear right after the .filterDocContent div to make sure its remaining children are not occupying any space</div>

CSS

.filteredDocContent .photography{
  display: none;
 }
.filteredDocContent .photography:nth-child(1),
.filteredDocContent .photography:nth-child(2),
.filteredDocContent .photography:nth-child(3),
.filteredDocContent .photography:nth-child(4),
.filteredDocContent .photography:nth-child(5),
.filteredDocContent .photography:nth-child(6),
.filteredDocContent .photography:nth-child(7),
.filteredDocContent .photography:nth-child(8) {
  display: block;

}

.photography{
    height: 20px; 
    width: 100%;
    background: navy;
    border: 1px solid gray;
}

.placeholder{
    height: 50px;
    background: gray;
    width: 100%;
    color: white;
    text-align:center;
}