Team Card HTML TailwindCss

Introduction of tailwind css team section

Today We are going to create Tailwind Css Team Section with the help of and Tailwind CSS. You use Team Card HTML TailwindCss on you projects. Which is made with the help of HTML and Tailwind CSS. In this project, we will make a card in which there will be an image of a person. Their names with their professional work. When we hover over the card, there will be some changes in the card background and image border.

Now let’s start making this Team Section Tailwind Css with the help of HTML (Hyper Text Markup Language). Tailwind together by following the simple steps to make it easy for everyone to understand without any problems. If you have any problems, you can contact us through the contact list given at the bottom of the page.

HTML

In this Team Section Tailwind Css, first we will make the structure of the project with the help of HTML (a markup language that is used to make the structure of any webpage. The output will be generated on the Google page). In this project, we will first create a parent div in which all the divs. Images with information will be stored. We will make three child divs in which all the details about the images will be given, like first there will be an image in the “img” tag (this tag is used to insert images in an HTML webpage). Then we will write the name of that image in the “p” tag (this tag is used to write any text in simple form). Then we will write their skills in the paragraph tag.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://kit.fontawesome.com/0f01d8d2a0.js" crossorigin="anonymous"></script>
    <title>Document</title>
</head>

<body class="bg-black">
    <div class="flex flex-wrap justify-center item-center mt-40 gap-20 ">
        <div
            class="group hover:saturate-100 saturate-0 transition-[filter] relative w-[248px] h-[318px] bg-[#FAEDE4] font-['Robot_Flex'] border-b-2 border-b-[#F04E29] rounded-lg" >

            <img class="group-hover:rounded-br-[100px] rounded-br-[0px] transition-[border-radius] rounded-lg w-[300px]  h-[250px]"
                src="https://images.pexels.com/photos/1496647/pexels-photo-1496647.jpeg?auto=compress&cs=tinysrgb&w=600" />
            <p class="m-[5px] text-[#262626] text-base">Robin </p>
            <p class="m-[5px] text-[#777674] text-xs">Software Developer</p>

            <svg class="group-hover:opacity-100 opacity-0 transition-opacity absolute right-[10px] bottom-[10px]"
                xmlns="http://www.w3.org/2000/svg" width="45" height="64" viewBox="0 0 45 64" fill="none">
                <path
                    d="M5.67927 0.685928C5.66838 0.658706 5.65749 0.636925 5.65749 0.636925L3.81168 1.12696C5.55403 11.7281 0.588324 15.4905 0.375974 15.6484L1.49217 17.2056C1.69363 17.0641 5.49414 14.2654 6.03318 7.14353C9.0333 14.2545 13.0244 20.1731 17.1298 24.774C17.059 24.8774 16.9882 24.9754 16.9229 25.0789C14.3311 29.0645 14.0861 34.651 16.1933 41.6912C18.6271 49.8203 24.5239 57.748 32.3754 63.4434L33.5025 61.8916C25.9886 56.4358 20.3477 48.8729 18.0336 41.1358C16.1388 34.8089 16.2913 29.6526 18.4692 26.2114C21.7035 29.5927 24.9432 32.1518 27.7636 33.8288C33.8945 37.4659 38.2232 36.377 40.2541 35.4078C42.4919 34.3406 44.1254 32.375 44.414 30.4094C44.4575 30.1099 44.4793 29.805 44.4793 29.5001C44.4793 27.5509 43.5864 25.5853 41.9039 23.8756C38.4628 20.3691 32.713 18.7465 26.5276 19.5306C23.1518 19.9607 20.3695 21.2457 18.3603 23.2821C14.4455 18.8554 10.645 13.1655 7.77554 6.34314C9.95348 8.22706 13.2476 10.2199 18.1425 11.5266L18.638 9.67539C9.24565 7.16531 6.28364 1.94369 5.75005 0.838382C5.73371 0.783935 5.71193 0.729488 5.6956 0.669594L5.67382 0.669594L5.67927 0.685928ZM26.7672 21.4308C33.3555 20.5923 38.2014 22.8411 40.5372 25.215C42.0509 26.7559 42.7533 28.5037 42.5192 30.1317C42.3558 31.2425 41.3431 32.767 39.4319 33.6763C37.744 34.4822 34.1069 35.3642 28.7437 32.179C25.9886 30.5455 22.8197 28.03 19.6617 24.6923C21.7797 22.5035 24.6056 21.6976 26.7726 21.4254L26.7672 21.4308Z"
                    fill="#F04E29" />
            </svg>

            
        </div>

        <div
            class="group hover:saturate-100 saturate-0 transition-[filter] relative w-[248px] h-[318px] bg-[#FAEDE4] font-['Robot_Flex'] border-b-2 border-b-[#F04E29] rounded-lg">

            <img class="group-hover:rounded-br-[100px] rounded-br-[0px] transition-[border-radius] w-[300px] rounded-lg  h-[250px]"
                src="https://data.artofproblemsolving.com/images/people/rlemon309x309.png" />
            <p class="m-[5px] text-[#262626] text-base">Sumit</p>
            <p class="m-[5px] text-[#777674] text-xs">SEO Expert</p>

            <svg class="group-hover:opacity-100 opacity-0 transition-opacity absolute right-[10px] bottom-[10px] "
                xmlns="http://www.w3.org/2000/svg" width="45" height="64" viewBox="0 0 45 64" fill="none">
                <path
                    d="M5.67927 0.685928C5.66838 0.658706 5.65749 0.636925 5.65749 0.636925L3.81168 1.12696C5.55403 11.7281 0.588324 15.4905 0.375974 15.6484L1.49217 17.2056C1.69363 17.0641 5.49414 14.2654 6.03318 7.14353C9.0333 14.2545 13.0244 20.1731 17.1298 24.774C17.059 24.8774 16.9882 24.9754 16.9229 25.0789C14.3311 29.0645 14.0861 34.651 16.1933 41.6912C18.6271 49.8203 24.5239 57.748 32.3754 63.4434L33.5025 61.8916C25.9886 56.4358 20.3477 48.8729 18.0336 41.1358C16.1388 34.8089 16.2913 29.6526 18.4692 26.2114C21.7035 29.5927 24.9432 32.1518 27.7636 33.8288C33.8945 37.4659 38.2232 36.377 40.2541 35.4078C42.4919 34.3406 44.1254 32.375 44.414 30.4094C44.4575 30.1099 44.4793 29.805 44.4793 29.5001C44.4793 27.5509 43.5864 25.5853 41.9039 23.8756C38.4628 20.3691 32.713 18.7465 26.5276 19.5306C23.1518 19.9607 20.3695 21.2457 18.3603 23.2821C14.4455 18.8554 10.645 13.1655 7.77554 6.34314C9.95348 8.22706 13.2476 10.2199 18.1425 11.5266L18.638 9.67539C9.24565 7.16531 6.28364 1.94369 5.75005 0.838382C5.73371 0.783935 5.71193 0.729488 5.6956 0.669594L5.67382 0.669594L5.67927 0.685928ZM26.7672 21.4308C33.3555 20.5923 38.2014 22.8411 40.5372 25.215C42.0509 26.7559 42.7533 28.5037 42.5192 30.1317C42.3558 31.2425 41.3431 32.767 39.4319 33.6763C37.744 34.4822 34.1069 35.3642 28.7437 32.179C25.9886 30.5455 22.8197 28.03 19.6617 24.6923C21.7797 22.5035 24.6056 21.6976 26.7726 21.4254L26.7672 21.4308Z"
                    fill="#F04E29" />
            </svg>
        </div>



        <div
            class="group hover:saturate-100 saturate-0 transition-[filter] relative w-[248px] h-[318px] bg-[#FAEDE4] font-['Robot_Flex'] border-b-2 border-b-[#F04E29] rounded-lg">

            <img class="group-hover:rounded-br-[100px] rounded-br-[0px] transition-[border-radius] w-[300px]  h-[250px] rounded-lg"
                src="https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=600" />
            <p class="m-[5px] text-[#262626] text-base">Rohan</p>
            <p class="m-[5px] text-[#777674] text-xs">Software Developer</p>

            <svg class="group-hover:opacity-100 opacity-0 transition-opacity absolute right-[10px] bottom-[10px]"
                xmlns="http://www.w3.org/2000/svg" width="45" height="64" viewBox="0 0 45 64" fill="none">
                <path
                    d="M5.67927 0.685928C5.66838 0.658706 5.65749 0.636925 5.65749 0.636925L3.81168 1.12696C5.55403 11.7281 0.588324 15.4905 0.375974 15.6484L1.49217 17.2056C1.69363 17.0641 5.49414 14.2654 6.03318 7.14353C9.0333 14.2545 13.0244 20.1731 17.1298 24.774C17.059 24.8774 16.9882 24.9754 16.9229 25.0789C14.3311 29.0645 14.0861 34.651 16.1933 41.6912C18.6271 49.8203 24.5239 57.748 32.3754 63.4434L33.5025 61.8916C25.9886 56.4358 20.3477 48.8729 18.0336 41.1358C16.1388 34.8089 16.2913 29.6526 18.4692 26.2114C21.7035 29.5927 24.9432 32.1518 27.7636 33.8288C33.8945 37.4659 38.2232 36.377 40.2541 35.4078C42.4919 34.3406 44.1254 32.375 44.414 30.4094C44.4575 30.1099 44.4793 29.805 44.4793 29.5001C44.4793 27.5509 43.5864 25.5853 41.9039 23.8756C38.4628 20.3691 32.713 18.7465 26.5276 19.5306C23.1518 19.9607 20.3695 21.2457 18.3603 23.2821C14.4455 18.8554 10.645 13.1655 7.77554 6.34314C9.95348 8.22706 13.2476 10.2199 18.1425 11.5266L18.638 9.67539C9.24565 7.16531 6.28364 1.94369 5.75005 0.838382C5.73371 0.783935 5.71193 0.729488 5.6956 0.669594L5.67382 0.669594L5.67927 0.685928ZM26.7672 21.4308C33.3555 20.5923 38.2014 22.8411 40.5372 25.215C42.0509 26.7559 42.7533 28.5037 42.5192 30.1317C42.3558 31.2425 41.3431 32.767 39.4319 33.6763C37.744 34.4822 34.1069 35.3642 28.7437 32.179C25.9886 30.5455 22.8197 28.03 19.6617 24.6923C21.7797 22.5035 24.6056 21.6976 26.7726 21.4254L26.7672 21.4308Z"
                    fill="#F04E29" />
            </svg>
        </div>
    </div>

</body>

</html>

Tailwind CSS

After making the structure of the Team Section Tailwind Css. We will apply the style to the HTML page elements. Also apply the hovering effect to make it perfect to use with the help of Tailwind (this is the frame work of CSS used to give the styling to the html web page and is very helpful and easy to make the websites responsive for other devices, that’s why we are using this instead of CSS). There are two external files in the tag at the beginning of the HTML code. That have been attached to the CSS, you can copy those. In this, we will first make the background blue and then move toward the card section.

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

In this Tailwind Css Team Section, we will take the parent div to the center of the screen. Then adjust the size and position of the child div. Now we will set the image position and also their size and border. Now we will design the text written in paragraphs for the name and skills of the person. Hide the skills in default case, and show them in a hovering effect. Now we will apply the hovering effect, in which when the user hovers on a particular card. The color of the image will change with the help of the filter property. The skills that were hidden in the default case will appear to come with some transition effects. An arrow will also show that will show the arrow toward the image.

Outout of tailwind css team section

Now, finally, we made the proper design of a Tailwind Css Team Section with a hovering effect. The help of the simple and easy code of HTML (Hyper Text Markup Language). Tailwind CSS by following their code step by step to make our understanding strong. This is a very useful project, as you can make such a project to increase your practice in front-end web development. You can directly use it on your website to create an image gallery with creativity. If you want the source code, then click on the link given below to download the code. Here below is the resultant image of our code.

For more explanation, click on the link given below to download the code of Tailwind Team Section.

You can also check