Published on

Learn How To Create A Responsive Team Cards #2 - Light Mode With Tailwind CSS from the Pros

Responsive Team Cards #2 - Light Mode

As a FrontEnd developer, creating responsive user interfaces is a crucial skill to have. One of the most common UI components that you will come across is team cards. In this tutorial, we will learn how to create a responsive team card UI component with Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes that you can use to style your HTML elements. It is designed to make it easy to create responsive and custom user interfaces without writing any custom CSS code.

The description of Responsive Team Cards #2 - Light Mode UI component

The responsive team card UI component is a common design pattern used on many websites. It is a set of cards that display information about a team member, such as their name, job title, and a brief description. The cards are usually arranged in a grid layout and are responsive, meaning they adjust their size and layout based on the screen size.

In this tutorial, we will create a responsive team card UI component with a light mode theme using Tailwind CSS.

Why use Tailwind CSS to create a Responsive Team Cards #2 - Light Mode UI component?

Tailwind CSS is a great choice for creating responsive UI components like team cards. It provides a set of pre-defined classes that you can use to style your HTML elements, making it easy to create custom and responsive designs without writing any custom CSS code.

The preview of Responsive Team Cards #2 - Light Mode UI component

In this tutorial, we will create a responsive team card UI component with a light mode theme. The cards will display information about a team member, such as their name, job title, and a brief description. The cards will be arranged in a grid layout and will be responsive, meaning they adjust their size and layout based on the screen size.

Free download of the Responsive Team Cards #2 - Light Mode's source code

The source code of Responsive Team Cards #2 - Light Mode UI component

To create the responsive team card UI component, we will use HTML and Tailwind CSS. We will create a grid layout using the grid and grid-cols classes, and we will style the cards using the bg-white, shadow-md, and rounded-lg classes.

<section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-4 py-12">
    <div class="text-center pb-12">
        <h2 class="text-base font-bold text-indigo-600">
            We have the best equipment in the market
        </h2>
        <h1 class="font-bold text-3xl md:text-4xl lg:text-5xl font-heading text-gray-900">
            Check our awesome team members
        </h1>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="w-full bg-white rounded-lg sahdow-lg overflow-hidden flex flex-col justify-center items-center">
            <div>
                <img class="object-center object-cover h-auto w-full" src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo">
            </div>
            <div class="text-center py-8 sm:py-6">
                <p class="text-xl text-gray-700 font-bold mb-2">Dany Bailey</p>
                <p class="text-base text-gray-400 font-normal">Software Engineer</p>
            </div>
        </div>
        <div class="w-full bg-white rounded-lg sahdow-lg overflow-hidden flex flex-col justify-center items-center">
            <div>
                <img class="object-center object-cover h-auto w-full" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo">
            </div>
            <div class="text-center py-8 sm:py-6">
                <p class="text-xl text-gray-700 font-bold mb-2">Lucy Carter</p>
                <p class="text-base text-gray-400 font-normal">Graphic Designer</p>
            </div>
        </div>
        <div class="w-full bg-white rounded-lg sahdow-lg overflow-hidden flex flex-col justify-center items-center">
            <div>
                <img class="object-center object-cover h-auto w-full" src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1171&q=80" alt="photo">
            </div>
            <div class="text-center py-8 sm:py-6">
                <p class="text-xl text-gray-700 font-bold mb-2">Jade Bradley</p>
                <p class="text-base text-gray-400 font-normal">Dev Ops</p>
            </div>
        </div>
        <div class="w-full bg-white rounded-lg sahdow-lg overflow-hidden flex flex-col justify-center items-center">
            <div>
                <img class="object-center object-cover h-auto w-full" src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo">
            </div>
            <div class="text-center py-8 sm:py-6">
                <p class="text-xl text-gray-700 font-bold mb-2">Dany Bailey</p>
                <p class="text-base text-gray-400 font-normal">Software Engineer</p>
            </div>
        </div>
        <div class="w-full bg-white rounded-lg sahdow-lg overflow-hidden flex flex-col justify-center items-center">
            <div>
                <img class="object-center object-cover h-auto w-full" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="photo">
            </div>
            <div class="text-center py-8 sm:py-6">
                <p class="text-xl text-gray-700 font-bold mb-2">Lucy Carter</p>
                <p class="text-base text-gray-400 font-normal">Graphic Designer</p>
            </div>
        </div>
        <div class="w-full bg-white rounded-lg sahdow-lg overflow-hidden flex flex-col justify-center items-center">
            <div>
                <img class="object-center object-cover h-auto w-full" src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1171&q=80" alt="photo">
            </div>
            <div class="text-center py-8 sm:py-6">
                <p class="text-xl text-gray-700 font-bold mb-2">Jade Bradley</p>
                <p class="text-base text-gray-400 font-normal">Dev Ops</p>
            </div>
        </div>
    </div>
</section>

How to create a Responsive Team Cards #2 - Light Mode with Tailwind CSS?

To create a responsive team card UI component with a light mode theme using Tailwind CSS, follow these steps:

Step 1: Set up your HTML file

Create an HTML file and add the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Team Cards #2 - Light Mode</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css" integrity="sha512-2z0lIv3JYtqTqT3R1p5Ct4tLXaJL+q2rP5J5P9pG6t5YJ0k6N6jJ0S8zLzOw1Y7HmX2vzGZ5+J+8vJ5zKqyZ2w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  </head>
  <body>
    <div class="container mx-auto py-10">
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <div class="bg-white shadow-md rounded-lg">
          <div class="p-4">
            <img class="w-full rounded-lg" src="https://via.placeholder.com/150" alt="Team Member" />
            <h2 class="text-lg font-medium mt-4">John Doe</h2>
            <p class="text-gray-500 mt-2">Software Engineer</p>
            <p class="text-gray-500 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor, lorem in mattis bibendum, elit lectus ultrices quam, non bibendum nulla libero ut sem.</p>
          </div>
        </div>
        <!-- Repeat the above code for each team member -->
      </div>
    </div>
  </body>
</html>

This code sets up the basic structure of our HTML file and includes the Tailwind CSS framework.

Step 2: Create the team card UI component

To create the team card UI component, we will use the grid and grid-cols classes to create a grid layout with four columns on large screens, three columns on medium screens, two columns on small screens, and one column on extra-small screens. We will also use the bg-white, shadow-md, and rounded-lg classes to style the cards.

Add the following code inside the div with the grid and grid-cols classes:

<div class="bg-white shadow-md rounded-lg">
  <div class="p-4">
    <img class="w-full rounded-lg" src="https://via.placeholder.com/150" alt="Team Member" />
    <h2 class="text-lg font-medium mt-4">John Doe</h2>
    <p class="text-gray-500 mt-2">Software Engineer</p>
    <p class="text-gray-500 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor, lorem in mattis bibendum, elit lectus ultrices quam, non bibendum nulla libero ut sem.</p>
  </div>
</div>

This code creates a card with an image, name, job title, and description.

Step 3: Add responsive classes

To make our team card UI component responsive, we will use the sm, md, and lg classes to adjust the number of columns and the size of the cards based on the screen size.

Add the following classes to the div with the grid and grid-cols classes:

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">

This code sets the number of columns to one on extra-small screens, two columns on small screens, three columns on medium screens, and four columns on large screens.

Step 4: Add custom styles

To customize the styles of our team card UI component, we can use the pre-defined Tailwind CSS classes or create our own custom classes.

Add the following custom class to the img tag inside the card:

<img class="w-full rounded-lg" src="https://via.placeholder.com/150" alt="Team Member" />

This code sets the width of the image to 100% and adds rounded corners to the image.

Step 5: Add a light mode theme

To add a light mode theme to our team card UI component, we can use the pre-defined Tailwind CSS classes for colors.

Add the following class to the body tag in the HTML file:

<body class="bg-gray-100">

This code sets the background color of the page to light gray.

Conclusion

In this tutorial, we learned how to create a responsive team card UI component with a light mode theme using Tailwind CSS. We used the grid and grid-cols classes to create a grid layout, and we used the bg-white, shadow-md, and rounded-lg classes to style the cards. We also added responsive classes to adjust the number of columns and the size of the cards based on the screen size, and we added a custom class to style the image inside the card. Finally, we added a light mode theme using the pre-defined Tailwind CSS classes for colors. With these techniques, you can create custom and responsive UI components for your web projects.