Show products in collection page using select option

[TheodoraSurya]

Good day to you all. I have recently started on working with shopify and I came about a problem. I have a collection page where the customer can see the products based on what tabs they click.

    
    
    

      

        {% for product in collections['all'].products %}
          
            
            

{{ product.title }}

            
              

{{ product.price | money }}

              {% if compare_at_price %}
                

{{ product.compare_at_price | money }}

              {% endif %}
            

          
        {% endfor %}
      

    

    
    
    
    

      

        {% for product in collections['cjay-skincare'].products %}
          
            
            

{{ product.title }}

            
              

{{ product.price | money }}

              {% if compare_at_price %}
                

{{ product.compare_at_price | money }}

              {% endif %}
            

            
              {% comment %} {{ block.settings.rating_icon | image_url: height: 15 | image_tag }}
              

({{ block.settings.review_number }})

 {% endcomment %}
            

          
        {% endfor %}
      

    

    
    
    

      

        {% for product in collections['olsson-haircare'].products %}
          
            
            

{{ product.title }}

            
              

{{ product.price | money }}

              {% if compare_at_price %}
                

{{ product.compare_at_price | money }}

              {% endif %}
            

            
              {% comment %} {{ block.settings.rating_icon | image_url: height: 15 | image_tag }}
              

({{ block.settings.review_number }})

 {% endcomment %}
            

          
        {% endfor %}
      

    

  

And this is for the CSS

.tabs {
  display: flex;
  flex-wrap: wrap;
}

.tabs hr {
  order: 1;
  margin: 0;
  width: 100%;
  background: #527DBF;
}

.tabs__label {
  cursor: pointer;
}

.tabs input[type=radio] {
  display: none;
}

.tabs__content {
  order: 2;
  width: 100%;
  display: none;
}

input[type=radio]:checked+.tabs__label.tabs__label-collection {
  background-color: #E3EAF4;
  outline: 2px solid #527DBF;
}

input[type=radio]:checked+.tabs__label.tabs__label-product-detail {
  background-color: #527DBF;
  color: #ffffff;
}

.tabs input[type=radio]:checked+.tabs__label+.tabs__content {
  display: initial;
  margin-top: 3.5rem;
}

.tabs-collection {
  column-gap: 1%;
  justify-content: center;
  row-gap: 1rem;
}

@media (max-width: 768px) {
  .tabs-collection {
    justify-content: space-between;
  }
  .tabs__label-collection.for-desktop {
    display: none;
  }
}

.tabs__label-collection {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  outline: 1px solid #527DBF;
  border-radius: 30px;
  font-weight: bold;
}

@media(min-width: 1024px) {
  .tabs__label-collection {
    height: 54px;
  }
}

What I want to ask is how to turn the code to dropdown list so when the customer click on the option, it displays the product associated with it. The end result is like this:

Thank you so much in advance.

[ZenoPageBuilder]

It is not so easy with just a few lines of code. I recommend working with a developer for this task.

[TheodoraSurya]

Thank you for the response

[ZenoPageBuilder]

You are welcome