How to Build a Fully Responsive POPULAR COLLECTION LIST using TailwindCSS
Tags: webdev, tailwindcss, html
Published: 2023-03-05 04:25:16


![Design Inspired from [icodethis](https://icodethis.com) platform](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pu4igzpsbdjmd20s1bcf.png)

As humans, we have a natural tendency to collect things and group them into different categories based on interest. From stamps to books, there is an endless array of items that people collect and group.

By definition, a Collection is a **group of things, often a group created by someone**. For example, many kids have a collection of comic books. Others have a collection of trophies etc, I believe you get the idea.

In this tutorial, well we will make a collection of images grouped into different categories.

This is what it looks like. (_Of course, you can always customize it to your liking_ 😉)


![Demo of Popular Collection List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shczymx9jevkyjjl05lt.gif)

## Understanding the Task

It's important to divide your work or design into different parts, I always do that, it helps me break it down into smaller components that I can easily build, then join them all together to form the bigger component.

if you are used to my post, you surely know I call it the "_Divide and Conquer_" approach😉


![Different Parts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6stj1960jg9mgyd8at3g.png)


Essentially, we have 2 main parts, for easy referencing, we will call them **Collection-Categories** and **Collection-Images**.

## Structure of Code

As I always say, I have the same structure when it comes to designing components. Simply because I believe they somehow have the same root. 😃

This is how it goes

```xml
<body>
<!-- First Layer -->
 <div>
<!-- Second Layer -->
  <div>
        <!-- Collection-Categories -->
            <div></div>

        <!-- Collection-Images -->
            <div></div>
  </div>
 </div>
    
</body>
```

## Collection-Categories

As earlier agreed, we will reference the different parts as **Collection-Categories** and **Collection-Images**.

Let's crush down the Collection-Categories


```xml
 <!-- Collection-Categories -->
<div>
<!-- Header -->
  <div class="text-4xl font-bold"><h2>Popular Collections</h2></div>

<!-- Different Categories -->
     <div class="hidden md:flex items-center gap-4 mt-4 mb-8 [&>*]:bg-white [&>*]:px-4 [&>*]:py-2 [&>*]:rounded-lg [&>*:hover]:bg-slate-900 [&>*:hover]:text-white [&>*]:cursor-pointer">
      <div>
          <h2>Profile</h2>
      </div>
      <div>
         <h2>New York</h2>
      </div>
      <div>
         <h2>Relaxing</h2>
      </div>
      <div>
          <h2>Person</h2>
       </div>
       <div>
          <h2>Fashion</h2>
        </div>
     </div>
</div>
```

Let's understand this little piece of art.

- **Header:** For the header, we simply gave it a `font-size` of `text-4xl` and made it bold with `font-semibold`. Simple right?


- **Different Categories:** Do you remember the power of [&>*]? It simply means, from the parent element, select all direct children and apply this style to it.


- So for every category child, we gave applied a `padding-inline` of `px-4`, `padding-block` of `py-2` gave it a `border-radius` of `rounded-lg` and added some effect on `hover` using `[&>*:hover]`

On this, we can say we are done with the first part 😁. Ahead we go

## Collection-Images

This part actually has 3 identical collections in structure, but different in content (categories). Therefore, if we build one of them, we can simply replicate it and change the content to have the others.

## Collection Element

```xml
 <div class="w-full max-w-[20rem] p-6 bg-white rounded-2xl">
   <div>
      <img src="https://thumbs.dreamstime.com/b/asian-chinese-man-holiday-wearing-summer-shirt-over-isolated-yellow-background-smiling-love-showing-heart-symbol-shape-212738466.jpg" alt="" class="h-40 w-full rounded-3xl object-cover object-center cursor-pointer hover:scale-105 hover:-rotate-3">
    </div>
    <div class="flex items-center py-4 justify-between [&>*]:mx-2 [&>*>img]:h-20 [&>*>img]:aspect-square [&>*>img]:object-cover [&>*>img]:object-center [&>*>img]:rounded-xl [&>*>img:hover]:scale-110 [&>*>img:hover]:-rotate-12 [&>*>img]:cursor-pointer">
        <div>
          <img src="https://images.prismic.io/ddhomepage/9643a4bb-cc11-468e-8441-36e67308a6aa_people-main-image.jpg?auto=compress,format&rect=0,0,570,684&w=570&h=684&fit=clip&cs=srgb" alt="">
        </div>
        <div>
           <img src="https://media.istockphoto.com/id/1167770957/photo/indian-man-on-vacation-wearing-floral-shirt-hat-sunglasses-over-isolated-yellow-background.jpg?b=1&s=170667a&w=0&k=20&c=gX1Sd-0BL2kACkdcQNlgCjj98M_1jhdnSt3UeXQm97s=" alt="">
         </div>
         <div>
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRna0Yn_AMMEcnVGFuHNG0-UENJAFjsGKO8RQ&usqp=CAU" alt="" >
         </div>
         </div>
        
         <div class="flex items-center justify-between">
            <h2>People</h2>
            <div class="flex items-center justify-center gap-1 cursor-pointer">
            <div class="text-2xl">
            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                                        preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                                        <path fill="currentColor"
                                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z" />
             </svg>
             </div>
             <p class="text-sm">144</p>
         </div>
      </div>
        
</div>
```

So this is what each of the collection elements looks like. Of course, you can change the image sources to your collection images. Better still you can completely redesign the collection element to your liking. it's more fun that way 😊
For the other two collection elements, it's pretty much the same thing but with different image sources. 

```xml
 <!-- Collection-Images -->
<div class="flex items-center gap-4 flex-wrap">

<!-- First Collection Element -->
   <div class="w-full max-w-[20rem] p-6 bg-white rounded-2xl">
    <div>
     <img src="https://thumbs.dreamstime.com/b/asian-chinese-man-holiday-wearing-summer-shirt-over-isolated-yellow-background-smiling-love-showing-heart-symbol-shape-212738466.jpg" alt="" class="h-40 w-full rounded-3xl object-cover object-center cursor-pointer hover:scale-105 hover:-rotate-3">
     </div>
      <div class="flex items-center py-4 justify-between [&>*]:mx-2 [&>*>img]:h-20 [&>*>img]:aspect-square [&>*>img]:object-cover [&>*>img]:object-center [&>*>img]:rounded-xl [&>*>img:hover]:scale-110 [&>*>img:hover]:-rotate-12 [&>*>img]:cursor-pointer">
         <div>
           <img src="https://images.prismic.io/ddhomepage/9643a4bb-cc11-468e-8441-36e67308a6aa_people-main-image.jpg?auto=compress,format&rect=0,0,570,684&w=570&h=684&fit=clip&cs=srgb" alt="">
          </div>
          <div>
            <img src="https://media.istockphoto.com/id/1167770957/photo/indian-man-on-vacation-wearing-floral-shirt-hat-sunglasses-over-isolated-yellow-background.jpg?b=1&s=170667a&w=0&k=20&c=gX1Sd-0BL2kACkdcQNlgCjj98M_1jhdnSt3UeXQm97s=" alt="">
           </div>
           <div>
             <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRna0Yn_AMMEcnVGFuHNG0-UENJAFjsGKO8RQ&usqp=CAU" alt="" >
           </div>
 </div>
    
     <div class="flex items-center justify-between">
         <h2>People</h2>
         <div class="flex items-center justify-center gap-1 cursor-pointer">
         <div class="text-2xl">
         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                                    preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z" />
          </svg>
      </div>
         <p class="text-sm">144</p>
        </div>
     </div>
        
</div>
        <!-- Second Collection Element -->
  <div class="w-full max-w-[20rem] p-6 bg-white rounded-2xl">
       <div>
         <img src="https://www.celebritycruises.com/blog/content/uploads/2022/01/most-beautiful-mountains-in-the-world-kirkjufell-iceland-1024x580.jpg" alt="" class="h-40 w-full rounded-3xl object-cover object-center cursor-pointer hover:scale-105 hover:-rotate-3">
        </div>
        <div class="flex items-center py-4 justify-between [&>*]:mx-2 [&>*>img]:h-20 [&>*>img]:aspect-square [&>*>img]:object-cover [&>*>img]:object-center [&>*>img]:rounded-xl [&>*>img:hover]:scale-110 [&>*>img:hover]:-rotate-12 [&>*>img]:cursor-pointer">
          <div>
             <img src="https://www.hostelworld.com/blog/wp-content/uploads/2018/12/kirkjufell-1313x875.jpg" alt="">
          </div>
          <div>
             <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSlah-eof7BDtWTo1gtz8F6Xe3z341c-yv-oc25SHzksBzDv-QPGMVpqn0omwvEvHYQ0OU&usqp=CAU" alt="">
           </div>
            <div>
              <img src="https://cdn.europosters.eu/image/750/posters/aurora-borealis-i47499.jpg" alt="" >
            </div>
       </div>
    
     <div class="flex items-center justify-between">
        <h2>Nature</h2>
        <div class="flex items-center justify-center gap-1 cursor-pointer">
         <div class="text-xl">
         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                                    preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z" />
          </svg>
        </div>
        <p class="text-sm">7k</p>
       </div>
    </div>
    
  </div>
    <!-- Third Collection Element -->
<div class="w-full max-w-[20rem] p-6 bg-white rounded-2xl">
    <div>
    <img src="https://www.holidify.com/images/cmsuploads/compressed/Taj_Mahal_20180814141729.png" alt="" class="h-40 w-full rounded-3xl object-cover object-center cursor-pointer hover:scale-105 hover:-rotate-3">
     </div>
     <div class="flex items-center py-4 justify-between [&>*]:mx-2 [&>*>img]:h-20 [&>*>img]:aspect-square [&>*>img]:object-cover [&>*>img]:object-center [&>*>img]:rounded-xl [&>*>img:hover]:scale-110 [&>*>img:hover]:-rotate-12 [&>*>img]:cursor-pointer">
     <div>
      <img src="https://abtoi.com/wp-content/uploads/2020/02/Famous-monuments-in-Italy-colosseum-scaled.jpg" alt="">
      </div>
      <div>
        <img src="https://www.crtv.cm/wp-content/uploads/2022/04/0BE1E695-A727-4A0A-ACDA-F7B47587892A.jpeg" alt="">
       </div>
       <div>
           <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQ6sHVW_qhWwGbinzhVWWYRLq_SvlE6JfrsQ&usqp=CAU" alt="" >
       </div>
 </div>
    
<div class="flex items-center justify-between">
     <h2>History</h2>
     <div class="flex items-center justify-center gap-1 cursor-pointer">
      <div class="text-xl">
      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                                    preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z" />
        </svg>
       </div>
       <p class="text-sm">431</p>
     </div>
   </div>
</div>
        
        
        
 </div>
```
That should be all good! 🤓


![End Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5fw7wftya1liqn7xjjtf.png)


## Conclusion

We just built an amazing Collection List component with amazing images too, and we did all this without opening our CSS file😃. Thanks to Tailwindcss.

Many employers will need such components to be added to their websites, and right now you should be proud that you are one of those few who know how to build it in less than 5mins, and you can do that without even leaving your HTML document 😎.

You can have a Live preview on [Codepen](https://codepen.io/mbianou-bradon/pen/JjBYBdr) or find the code on [GitHub](https://github.com/mbianou-bradon/icodethis-daily-ui-challenge/tree/main/public/December%202022/Popular-Collection-List)

If you have any worries or suggestions, don't hesitate to leave them in the comment section! 😊
See ya! 👋