Bulma E-Commerce (Products) Components

<section class="section has-background-light is-clipped">
  <div class="container">
    <h2 class="title mb-16 mb-24-tablet">Discover our products</h2>
    <div class="mb-20 columns is-multiline">
      <div class="column is-3-desktop is-6-tablet">
        <div class="has-background-white pt-4 px-10 pb-10 is-relative">
          <span class="is-absolute is-top-0 is-left-0 ml-4 mt-4 tag is-info has-text-weight-bold">NEW</span>
          <a class="mt-6 mb-2 px-6 is-block" href="#">
            <img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/waterbottle.png" alt="">
            <h5 class="title is-size-5 mb-2">BRILE water filter</h5>
            <p class="has-text-info is-size-5 has-text-weight-bold">$29.89</p>
          </a>
          <a class="button is-outlined p-0 ml-auto is-flex" href="#" style="width: 48px; height: 48px;">
            <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" width="2" height="12" fill="currentColor"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect></svg>
          </a>
        </div>
      </div>
      <div class="column is-3-desktop is-6-tablet">
        <div class="has-background-white pt-4 px-10 pb-10 is-relative">
          <span class="is-absolute is-top-0 is-left-0 ml-4 mt-4 tag is-danger has-text-weight-bold">-15%</span>
          <a class="mt-6 mb-2 px-6 is-block" href="#">
            <img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/cycle.png" alt="">
            <h5 class="title is-size-5 mb-2">Bicycle S20</h5>
            <p>
              <span class="has-text-info is-size-5 has-text-weight-bold">$14.30</span>
              <span class="has-text-grey-dark is-size-7 has-text-weight-normal" style="text-decoration: line-through;">$15.90</span>
            </p>
          </a>
          <a class="button is-outlined p-0 ml-auto is-flex" href="#" style="width: 48px; height: 48px;">
            <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" width="2" height="12" fill="currentColor"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect></svg>
          </a>
        </div>
      </div>
      <div class="column is-3-desktop is-6-tablet">
        <div class="has-background-white pt-4 px-10 pb-10 is-relative">
          <span class="is-absolute is-top-0 is-left-0 ml-4 mt-4 tag is-danger has-text-weight-bold">-15%</span>
          <a class="mt-6 mb-2 px-6 is-block" href="#">
            <img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/basketball.png" alt="">
            <h5 class="title is-size-5 mb-2">Nike basketball</h5>
            <p>
              <span class="has-text-info is-size-5 has-text-weight-bold">$34.89</span>
              <span class="has-text-grey-dark is-size-7 has-text-weight-normal" style="text-decoration: line-through;">$33.69</span>
            </p>
          </a>
          <a class="button is-outlined p-0 ml-auto is-flex" href="#" style="width: 48px; height: 48px;">
            <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" width="2" height="12" fill="currentColor"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect></svg>
          </a>
        </div>
      </div>
      <div class="column is-3-desktop is-6-tablet">
        <div class="has-background-white pt-4 px-10 pb-10 is-relative">
          <span class="is-absolute is-top-0 is-left-0 ml-4 mt-4 tag is-info has-text-weight-bold">NEW</span>
          <a class="mt-6 mb-2 px-6 is-block" href="#">
            <img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/skateboard.png" alt="">
            <h5 class="title is-size-5 mb-2">Kiteboard WH</h5>
            <p>
              <span class="has-text-info is-size-5 has-text-weight-bold">$199.90</span>
              <span class="has-text-grey-dark is-size-7 has-text-weight-normal" style="text-decoration: line-through;">$33.69</span>
            </p>
          </a>
          <a class="button is-outlined p-0 ml-auto is-flex" href="#" style="width: 48px; height: 48px;">
            <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" width="2" height="12" fill="currentColor"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect></svg>
          </a>
        </div>
      </div>
    </div>
    <div class="has-text-centered"><a class="button is-primary" href="#">Show More</a></div>
  </div>
</section>