CollectionCard.jsx

import React from "react";

function CollectionCard(props) {
  let cols;
  if (props.cols) {
    cols = `col-${props.cols}`;
  } else {
    cols = "col-4";
  }
  return (
    <div className={cols}>
      <a href="#" class="txt-none">
        <div class="item-card-custom color-80">
          <span class="color-blu border-top-blue">Collection</span>
          <span className="mr-1 ml-2">&nbsp; · &nbsp;</span>
          <span>19 resources</span>
          <br />
          <br />
          <img
            class="img-brdr img-bg img-fluid w-100"
            width="341px"
            height="240px"
            src="https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/dYAbN2LdttJ1qYk1gssh.svg"
            alt="img"
          />
          <h4 class="color-2021 mt-4">Web Vitals</h4>
          <small>Essential matrics for the healthy sites</small>
        </div>
      </a>
    </div>
  );
}

export default CollectionCard;