Mbianou Bradon

Posted on Mar 5, 2023 • Edited on Mar 9, 2023

How to Build a Fully Responsive POPULAR COLLECTION LIST using TailwindCSS

#webdev #tailwindcss #html

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 😉)

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😉

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

<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

 <!-- 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

 <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.

 <!-- 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! 🤓

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 or find the code on GitHub

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

DEV Community

How to Build a Fully Responsive POPULAR COLLECTION LIST using TailwindCSS

Understanding the Task

Structure of Code

Collection-Categories

Collection-Images

Collection Element

Conclusion

Top comments (0)

Read next

AWS AppSync Events vs IoT Core

Node JS - The Event Loop

Next.js Interview Mastery: Essential Questions 81-90 (Part 9)

Learn how to create a cool animated envelope with Tailwind CSS