Team block with image background for displaying your team profiles on websites and landing pages.

Dependencies

  • Tailwind CSS
  • FontAwesome
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Tailwind CSS Blocks - Team 2</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="team-2 py-6 md:py-12 min-h-screen md:flex relative">
        <div class="container mx-auto px-4 flex-auto self-center relative z-10">

            <div class="md:w-10/12 xl:w-8/12 md:mx-auto">
                <h1 class="font-medium text-3xl md:text-4xl text-white text-center mb-4">Our Crew</h1>
                <p class="text-xl text-gray-400 text-center">We have the best of players in our team who created the <a href="//free-website-resources.com" class="inline-block font-semibold text-white">FWR Blocks</a>. You can learn more about our team and company culture by visiting each member's profile. If you are interested to join our company, you can shoot us an <a href="mailto:" class="inline-block font-semibold text-white">email</a></p>
            </div>

            <div class="md:flex md:-mx-4 mt-6 md:mt-12 xl:pt-12 px-6 md:px-0 divide-y-2 md:divide-y-0 md:divide-x-2">

                <div class="team-profile-wrap bg-white mx-auto md:w-1/3 px-4 md:py-12">
                    <div class="team-profile text-center p-6">
                        <div class="team-profile-image w-32 h-32 mx-auto rounded-full overflow-hidden">
                            <img src="//assets.free-website-resources.com/img/profile-04.jpg" alt="John Doe" class="max-w-full h-auto">
                        </div>
                        <h5 class="text-gray-600 font-semibold uppercase mt-4 mb-2">John Doe</h5>
                        <p class="text-gray-600 text-sm">Lead Designer</p>
                        <div class="team-profile-social flex justify-center mt-6">
                            <a href="#" class="w-10 h-10 block overflow-hidden text-gray-500 hover:text-white rounded-full linked-in mx-1 cursor-pointer">
                                <span class="fab fa-linkedin-in w-full h-full relative top-0"></span>
                                <span class="fab fa-linkedin-in w-full h-full social-hover relative top-0"></span>
                            </a>
                            <a href="#" class="w-10 h-10 block overflow-hidden text-gray-500 hover:text-white rounded-full behance mx-1 cursor-pointer">
                                <span class="fab fa-behance w-full h-full relative top-0"></span>
                                <span class="fab fa-behance w-full h-full social-hover relative top-0"></span>
                            </a>
                            <a href="#" class="w-10 h-10 block overflow-hidden text-gray-500 hover:text-white rounded-full dribbble mx-1 cursor-pointer">
                                <span class="fab fa-dribbble w-full h-full relative top-0"></span>
                                <span class="fab fa-dribbble w-full h-full social-hover relative top-0"></span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="team-profile-wrap bg-white mx-auto md:w-1/3 px-4 md:py-12">
                    <div class="team-profile text-center p-6">
                        <div class="team-profile-image w-32 h-32 mx-auto rounded-full overflow-hidden">
                            <img src="//assets.free-website-resources.com/img/profile-05.jpg" alt="Mary Jane" class="max-w-full h-auto">
                        </div>
                        <h5 class="text-gray-600 font-semibold uppercase mt-4 mb-2">Mary Jane</h5>
                        <p class="text-gray-600 text-sm">Lead Developer</p>
                        <div class="team-profile-social flex justify-center mt-6">
                            <a href="#" class="w-10 h-10 block overflow-hidden text-gray-500 hover:text-white rounded-full linked-in mx-1 cursor-pointer">
                                <span class="fab fa-linkedin-in w-full h-full relative top-0"></span>
                                <span class="fab fa-linkedin-in w-full h-full social-hover relative top-0"></span>
                            </a>
                            <a href="#" class="w-10 h-10 block overflow-hidden text-gray-500 hover:text-white rounded-full facebook mx-1 cursor-pointer">
                                <span class="fab fa-facebook-f w-full h-full relative top-0"></span>
                                <span class="fab fa-facebook-f w-full h-full social-hover relative top-0"></span>
                            </a>
                            <a href="#" class="w-10 h-10 block overflow-hidden text-gray-500 hover:text-white rounded-full twitter mx-1 cursor-pointer">
                                <span class="fab fa-twitter w-full h-full relative top-0"></span>
                                <span class="fab fa-twitter w-full h-full social-hover relative top-0"></span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="team-profile-wrap bg-white mx-auto md:w-1/3 px-4 md:py-12">
                    <div class="team-profile text-center p-6">
                        <div class="team-profile-image w-32 h-32 mx-auto rounded-full overflow-hidden">
                            <img src="//assets.free-website-resources.com/img/profile-06.jpg" alt="Josh Thompson" class="max-w-full h-auto">
                        </div>
                        <h5 class="text-gray-600 font-semibold uppercase mt-4 mb-2">Josh Thompson</h5>
                        <p class="text-gray-600 text-sm">Marketing Manager</p>
                        <div class="team-profile-social flex justify-center mt-6">
                            <a href="#" class="w-10 h-10 block overflow-hidden text-gray-500 hover:text-white rounded-full linked-in mx-1 cursor-pointer">
                                <span class="fab fa-linkedin-in w-full h-full relative top-0"></span>
                                <span class="fab fa-linkedin-in w-full h-full social-hover relative top-0"></span>
                            </a>
                            <a href="#" class="w-10 h-10 block overflow-hidden text-gray-500 hover:text-white rounded-full facebook mx-1 cursor-pointer">
                                <span class="fab fa-facebook-f w-full h-full relative top-0"></span>
                                <span class="fab fa-facebook-f w-full h-full social-hover relative top-0"></span>
                            </a>
                            <a href="#" class="w-10 h-10 block overflow-hidden text-gray-500 hover:text-white rounded-full twitter mx-1 cursor-pointer">
                                <span class="fab fa-twitter w-full h-full relative top-0"></span>
                                <span class="fab fa-twitter w-full h-full social-hover relative top-0"></span>
                            </a>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <div class="absolute inset-0 z-0 bg-black bg-opacity-75"></div>
    </div>
    <!-- /.team-2 -->

    <!-- Scripts -->
</body>
</html>
// Variables
$facebook:            #3b5998;
$twitter:             #1da1f2;
$linked-in:           #0077b5;
$behance:             #1769ff;
$dribbble:            #ea4c89;
$team-profile-radius: 1rem;

$social-colors: () !default;
$social-colors: map-merge((
  "facebook":   $facebook,
  "twitter":    $twitter,
  "linked-in":  $linked-in,
  "behance":    $behance,
  "dribbble":   $dribbble
), $social-colors);


// Custom CSS
.team-2 {
  background: url('https://assets.free-website-resources.com/img/team-bg.jpg') no-repeat center center / cover;
}

.team-profile-wrap {
  &:first-child {
    border-top-left-radius: $team-profile-radius;
    border-top-right-radius: $team-profile-radius;
  }

  &:last-child {
    border-bottom-left-radius: $team-profile-radius;
    border-bottom-right-radius: $team-profile-radius;
  }

  &:hover {
    .team-profile-image {
      img {
        transform: scale(1);
      }
    }
  }
}

.team-profile-image {
  img {
    transform: scale(1.2);
    transition: transform 0.3s;
  }
}

.team-profile-social {

  a {
    @each $color, $value in $social-colors {
      &.#{$color} {
        .social-hover {
          background-color: $value;
        }
      }
    }

    span {
      display: block;
      line-height: 40px;
    }
  }

}


@media (min-width: 768px) {

  .team-profile-wrap {
    &:first-child {
      border-top-right-radius: 0;
      border-bottom-left-radius: $team-profile-radius;
    }

    &:last-child {
      border-top-right-radius: $team-profile-radius;
      border-bottom-left-radius: 0;
    }
  }

}


@media (min-width: 1280px) {

  .team-profile-social {
    a {
      span {
        transition: top .3s;
      }

      &:hover {
        span {
          top: -40px;
        }
      }
    }
  }

}
.team-2 {
  background: url("https://assets.free-website-resources.com/img/team-bg.jpg") no-repeat center center/cover;
}

.team-profile-wrap:first-child {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.team-profile-wrap:last-child {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.team-profile-wrap:hover .team-profile-image img {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.team-profile-image img {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.team-profile-social a.facebook .social-hover {
  background-color: #3b5998;
}

.team-profile-social a.twitter .social-hover {
  background-color: #1da1f2;
}

.team-profile-social a.linked-in .social-hover {
  background-color: #0077b5;
}

.team-profile-social a.behance .social-hover {
  background-color: #1769ff;
}

.team-profile-social a.dribbble .social-hover {
  background-color: #ea4c89;
}

.team-profile-social a span {
  display: block;
  line-height: 40px;
}

@media (min-width: 768px) {
  .team-profile-wrap:first-child {
    border-top-right-radius: 0;
    border-bottom-left-radius: 1rem;
  }
  .team-profile-wrap:last-child {
    border-top-right-radius: 1rem;
    border-bottom-left-radius: 0;
  }
}

@media (min-width: 1280px) {
  .team-profile-social a span {
    -webkit-transition: top .3s;
    transition: top .3s;
  }
  .team-profile-social a:hover span {
    top: -40px;
  }
}

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvdGFpbHdpbmRjc3MvdGVhbS90ZWFtLTI=