As humans, we have an innate tendency to collect different items and group them based on interests. From postage stamps to books, people collect and group a wide variety of items. By definition, a collection is a group of things, usually created by someone. For example, a lot of kids collect comic books, and some collect trophies, etc. I'm sure you can understand. In this tutorial, we'll take a set of images and separate them into categories. This is what it looks like. (Of course, you can customize it to your liking)

Understand the task:

Dividing your work or design into different parts is very important, I do this all the time, it helps me break it down into smaller components, easy to build, and then combine them to form larger components.

If you are used to my articles, you must know what I call the "divide and conquer" method

Essentially, we have two main sections, which we'll refer to as "Favorites Categories" and "Favorites Images" for ease of reference.

First install TailwindCSS using NPM

If you already know how to install TailwindCSS, you can ignore this section.

The original text did not mention the installation method. I also tried the suggestions on the official website, but I didn’t achieve the desired effect.

1. First create a project folder and initialize the project

mkdir demo
cd demo
npm init -y

2. Next, install the relevant dependencies in the project folder

npm install tailwindcss postcss-cli autoprefixer postcss-cli

3. Next, create the following folders and files in the project folder

mkdir dist
cd dist
mkdir css
cd css
touch styles.css
cd ../
touch index.html

4. Create a new Tailwind CSS configuration file in this folder:

npx tailwindcss init

This will create a file called "tailwind.config.js" in the project root directory, which contains some default configuration, we need to modify the contents of the content, as follows:

module.exports = {
  content: ['./dist/**/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. Next, we create a new tailwind.css file in the root directory of the project. You can name the file whatever you like.

touch tailwind.css

Then in the blank file, add the following code:

@tailwind base;
@tailwind components;
@tailwind utilities;

6. Finally, go back to the index.html file, write the following code, and pay attention to the reference of CSS.

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini Project</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body class="bg-red-500 flex items-center justify-center min-h-screen">
<h1 class="text-3xl text-white ">欢迎来到前端达人</h1>
</body>
</html>

7. Finally, configure the package.json file, mainly for the modification of this part

"scripts": {
    "build": "postcss tailwind.css -o dist/css/styles.css",
    "watch": "postcss tailwind.css -o dist/css/styles.css --watch"
  }

8. Finally, run npm run build and open index.html. If everything is normal, you will see the following effect.

Code structure:

As I always say, when designing components, I always use the same structure. Because I believe they somehow have the same basis.

The specific structure is as follows:

<body>
  <!-- 第一层 -->
  <div>
    <!-- 第二层 -->
    <div>
      <!-- 收藏分类 -->
      <div></div>

      <!-- 收藏图像 -->
      <div></div>
    </div>
  </div>
</body>

Collection Category:

As we discussed earlier, we refer to the different sections as "Favorites Categories" and "Favorites Images".

Now, let's look at the details of the "Favorites Category".

<!-- 收藏分类 -->
<div>
  <!-- 标题 -->
  <div class="text-4xl font-bold">
    <h2>Popular Collections</h2>
  </div>

  <!-- 不同的分类 -->
  <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 code snippet.

Title: For the title, we only set a font size of text-4xl, and bolded the font, using font-semibold. Simple and clear, isn't it?

Different categories: Do you remember the power of [&>]? What it means is to select all immediate child elements from the parent element and apply this style to them. So, for each category child element, we set the inline padding of px-4, the block padding of py-2, added a rounded border (rounded-lg) to it, and used [& >:hover] adds some hover effects.

At this point, we can say that the first part is complete. Read on.

Favorite Image:

This section actually has 3 collections with the same structure, but different content (categories). So if we build one of these, we just need to copy and change things to create the other.

Collection collection elements

<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 "collection" element looks like. Of course, you can change the picture source to your favorite pictures. Even better, you can completely redesign collectible elements to suit your liking. it's more fun

For the other two collection elements, it is basically the same, just the source of the image is different.

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

Finish

We've just built an amazing collection list component with amazing images, and all without opening a CSS file. Thanks Tailwindcss.

Many employers are required to add such a component to their website, and now you should be proud that you are one of those few who can build it in less than 5 minutes, and you can do it without leaving the HTML document to complete it.

You can get a live preview on Codepen.

https://codepen.io/mbianou-bradon/pen/JjBYBdr

At the end of the article, I would like to remind you that it is not easy to create an article. If you like my sharing, please don’t forget to like and forward it so that more people in need can see it. At the same time, if you want to gain more knowledge of front-end technology, welcome to pay attention to "Front-end Master", your support will be the biggest motivation for me to share. I will continue to output more content, so stay tuned.

Original : https://medium.com/@mbianoubradon/how-to-build-a-fully-responsive-popular-collection-list-using-tailwindcss-1aa02034fec6

By Mbianou Bradon

Indirect translation, some self-adapted and added parts, the translation level is limited, it is inevitable that there are omissions, welcome to correct

A small case of Tailwind CSS to create a beautiful collection card list