How do you create a custom category widget that you can style?

My first time developing a WordPress theme, and I’m having a hard time understanding the widgets portion of it. Mainly because of my limited understanding of PHP.

This is what I want my categories to look like that is currently hard coded:

      <!-- Categories -->
  <div class="col-lg-3 d-none d-sm-none d-md-none d-lg-block " id="categoryContainer">
    <div id="categories">
      CATEGORIES
    </div>

    <a href="" class="categoryLink">
      <div class="row px-0 mx-0">
        <div class="categoryItems col-auto me-auto px-0">Test</div>
        <div class="categoryItemCount col-auto px-0">(10)</div>
      </div>
    </a>

    <hr class="my-0 categoryDivider">

    <a href="" class="categoryLink">
      <div class="row px-0 mx-0">
        <div class="categoryItems col-auto me-auto px-0">Test</div>
        <div class="categoryItemCount col-auto px-0">(10)</div>
      </div>
    </a>

    <hr class="my-0 categoryDivider">

    <a href="" class="categoryLink">
      <div class="row px-0 mx-0">
        <div class="categoryItems col-auto me-auto px-0">Test</div>
        <div class="categoryItemCount col-auto px-0">(10)</div>
      </div>
    </a>

    <hr class="my-0 categoryDivider">

    <a href="" class="categoryLink">
      <div class="row px-0 mx-0">
        <div class="categoryItems col-auto me-auto px-0">Test</div>
        <div class="categoryItemCount col-auto px-0">(10)</div>
      </div>
    </a>

    <hr class="my-0 categoryDivider">

    <a href="" class="categoryLink">
      <div class="row px-0 mx-0">
        <div class="categoryItems col-auto me-auto px-0">Test</div>
        <div class="categoryItemCount col-auto px-0">(10)</div>
      </div>
    </a>
  </div>

How do I go about adding this as a widget? I added a function, however, I was following a tutorial for creating a widget but it wasn’t specific to categories and I’m not able to find a way to be able to style it to look like the code above.