Our team layout clean - Blocks Library

Our team

Explore the whole collection of open-source web components and elements built with the utility classes from Tailwind

Bonnie Gree

CEO/Co-founder

Helene Engels

CTO/Co-founder

Jese Leos

SEO & Marketing

Joseph Mcfall

Sales

Lana Byrd

CEO/Co-founder

Leslie Livingston

Graphic Designer

Michael Gough

React Developer

Neil Sims

Vue.js Developer

<?php
/**
 * Title: Our team layout clean
 * Slug: our-team-layout-clean
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Our team layout clean"},"className":"our-team-layout-clean","layout":{"type":"constrained"}} -->
<section class="wp-block-group our-team-layout-clean"><!-- wp:group {"className":"content-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group content-wrapper"><!-- wp:group {"className":"top-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group top-wrapper"><!-- wp:heading -->
<h2 class="wp-block-heading">Our team</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Explore the whole collection of open-source web components and elements built with the utility classes from Tailwind</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"grid-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group grid-wrapper"><!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><a href="#">Bonnie Gree</a></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>CEO/Co-founder</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/helene-engels.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Helene Engels</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>CTO/Co-founder</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Jese Leos</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>SEO & Marketing</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/joseph-mcfall.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Joseph Mcfall</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Sales</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/sofia-mcguire.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Lana Byrd</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>CEO/Co-founder</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/thomas-lean.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Leslie Livingston</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Graphic Designer</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/michael-gouch.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Michael Gough</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>React Developer</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"block-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group block-wrapper"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Neil Sims</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Vue.js Developer</p>
<!-- /wp:paragraph -->

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"url":"#","service":"facebook"} /-->

<!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"github"} /-->

<!-- wp:social-link {"url":"#","service":"dribbble"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

.our-team-layout-clean {
  @apply bg-white dark:bg-gray-900;

  .content-wrapper {
    @apply py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-6;

    .top-wrapper {
      @apply mx-auto mb-8 max-w-screen-sm lg:mb-16;

      .wp-block-heading {
        @apply mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white;
      }

      p {
        @apply font-light text-gray-500 sm:text-xl dark:text-gray-400;
      }
    }

    .grid-wrapper {
      @apply grid gap-8 lg:gap-16 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4;

      .block-wrapper {
        @apply text-center text-gray-500 dark:text-gray-400;

        figure {
          @apply mx-auto mb-4 w-36 h-36 rounded-full overflow-hidden;

          img {
            @apply w-full h-full object-cover object-center;
          }
        }

        .wp-block-heading {
          @apply mb-1 text-2xl font-bold tracking-tight text-gray-900 dark:text-white;
        }

        .wp-block-social-links {
          @apply flex justify-center mt-4 space-x-4;
          .wp-social-link {
            @apply !ml-0 hover:scale-100;
            @apply p-0 bg-transparent;
            @apply text-gray-500;

            a {
              @apply p-0;
            }

            svg {
              @apply lg:w-5 lg:h-5 hover:text-gray-900 dark:hover:text-white;
            }

            &.wp-social-link-facebook {
              @apply text-[#39569c];
            }

            &.wp-social-link-twitter {
              @apply text-[#00acee];
            }
    
            &.wp-social-link-github {
              @apply text-gray-900;
            }

            &.wp-social-link-dribbble {
              @apply text-[#ea4c89];
            }
          }
        }
      }
    }
  }
}