
# 📒 Developer style guide for Team

The team section is a type of web element that you can use to introduce your team members to different types of service websites and portfolio websites. You can easily arrange all the identities of the significant people in your team or your company.

![image](https://i.postimg.cc/0ygCLpTg/Screenshot-2022-12-24-at-4-36-18-PM.png)

---

## General must known design system guideline :

### Color 🎨

|  | Background | Border | Active | Inactive |
| --- | --- | --- | --- | --- |
| Color Code in Tailwind | bg-gray-900 | border-gray-300 | bg-gray-700 | bg-red-600 | bg-gray-200 |
 

Color of `text` will depend on the `bg` color
| Background | Dark | Light |
| --- | --- | --- |
| Text | Light | Dark |
| Code in Tailwind | text-white | text-gray-700 | text-gray-400 | text-black |

`Note` : Color of the text `[color]` will depend on the color of the background

### Font

For all Team font is : **`font-medium`**

## Icon guidelines:

Mostly all the icons are taken from → [Hero Icons](https://heroicons.com/)

`Icon-text-gap` :  We follow a convention of equal margin between the text and the icon as padding in y  axis `py`. and always the margin is given from the side of icon.

|  | Width | Type |
| --- | --- | --- |
| Small | w-4 & h-4 | Hero Icons mini |
| Medium | w-5 & h-5 | Hero Icons mini |
| Large | w-6 & h-6 | Hero Icons filled |

---

## Example of Team component 👇

Want to see this Avatar in action? Try copy pasting this code in [Tailwind Playground](https://play.tailwindcss.com/). 💥

```html

<!--For Team-1 -->
<body class="flex h-screen items-center justify-center">
  <section class="flex items-center justify-center">
    <div class="group relative mx-0 my-2 h-[400px] w-[150px] cursor-pointer overflow-hidden rounded-sm duration-1000 hover:w-[250px]">
      <div class="group-hover:bottom-5% absolute left-[30%] bottom-0 z-10 w-full origin-left -rotate-90 px-0 py-4 font-sans text-white duration-150 group-hover:left-0 group-hover:mx-3 group-hover:rotate-0">
        <h4>Jhone</h4>
        <p>Project Manager</p>
      </div>
      <img class="absolute top-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZSUyMHBpY3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt="" />
      <div class="absolute inset-0 bg-gray-900 bg-opacity-0 hover:bg-opacity-30"></div>
    </div>
    <div class="group relative mx-0 my-2 h-[400px] w-[150px] cursor-pointer overflow-hidden rounded-sm duration-1000 hover:w-[250px]">
      <div class="group-hover:bottom-5% absolute left-[30%] bottom-0 z-10 w-full origin-left -rotate-90 px-0 py-4 font-sans text-white duration-150 group-hover:left-0 group-hover:mx-3 group-hover:rotate-0">
        <h4>Julio</h4>
        <p class="text-xs">UI/UX designer</p>
      </div>
      <img class="absolute top-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=388&q=80" alt="" />
      <div class="absolute inset-0 bg-gray-900 bg-opacity-0 hover:bg-opacity-40"></div>
    </div>
    <div class="group relative mx-0 my-2 h-[400px] w-[150px] cursor-pointer overflow-hidden rounded-sm duration-1000 hover:w-[250px]">
      <div class="group-hover:bottom-5% absolute left-[30%] bottom-0 z-10 w-full origin-left -rotate-90 px-0 py-4 font-sans text-white duration-150 group-hover:left-0 group-hover:mx-3 group-hover:rotate-0">
        <h4>Siya</h4>
        <p>Front-End lead</p>
      </div>
      <img class="absolute top-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" alt="" />
       <div class="absolute inset-0 bg-gray-900 bg-opacity-0 hover:bg-opacity-40"></div>
    </div>
    <div class="group relative mx-0 my-2 h-[400px] w-[150px] cursor-pointer overflow-hidden rounded-sm duration-1000 hover:w-[250px]">
      <div class="group-hover:bottom-5% absolute left-[30%] bottom-0 z-10 w-full origin-left -rotate-90 px-0 py-4 font-sans text-white duration-150 group-hover:left-0 group-hover:mx-3 group-hover:rotate-0">
        <h4>Carlox</h4>
        <p>Full-Stack Developer</p>
      </div>
      <img class="absolute top-0 h-full w-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80" alt="" />
      <div class="absolute inset-0 bg-gray-900 bg-opacity-0 hover:bg-opacity-30"></div>
    </div>
  </section>
</body>

```

---

## Having some problem ? 😕

If you still have a problem understanding this please join our [discord server](https://discord.gg/zrVMjGW8sB) to get help.

