JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="checkControl">
<div class="wrapper">
  <div class="problemDiv">
    <a class="anchor">
      <div class="img-cont">
        <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg" />
      </div>One
    </a>
    <a class="anchor">
      <div class="img-cont">
        <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg" />
      </div>Two
    </a>
    <a class="anchor">
      <div class="img-cont">
        <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg" />
      </div>Three
    </a>
    <a class="anchor">
      <div class="img-cont">
        <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg" />
      </div>Four
    </a>
    <a class="anchor">
      <div class="img-cont">
        <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/feed.svg" />
      </div>Five
    </a>
    <a class="anchor">
      <div class="img-cont">
        <img src="https://www.gstatic.com/images/icons/material/product/2x/pagespeed_64dp.png" />
      </div>Six
    </a>
  </div>
</div>

CSS

.wrapper {
  max-height: 0;
  overflow: hidden;
  position: absolute;
  transition: 2s all ease-out;
  z-index: 100;
}

#checkControl:checked~.wrapper {
  max-height: 540px;
}

.anchor {
  display: block;
}

.img-cont {
  display: inline-block;
}

.img-cont img {
  width: 60px;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}