Profile Card Layouts

Various profile card layouts using flexbox. Includes user profiles, team member cards, and social media profile designs. Demonstrates different ways to arrange profile information and social links using flexbox.

PREVIEW

Sarah Johnson

Senior Developer

Full-stack developer with a passion for clean code and user experience.

Alex Chen

Product Designer

UI/UX Figma Prototyping

Maria Garcia

Frontend Developer

React TailwindCSS

CODE

/* Basic Profile Card */
    .profile-card {
      display: flex;
      flex-direction: column;
    }

    .profile-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .social-links {
      display: flex;
      justify-content: center;
      gap: 1rem;
    }

    /* Horizontal Profile Card */
    .horizontal-card {
      display: flex;
      gap: 1.5rem;
    }

    .profile-info {
      display: flex;
      flex-direction: column;
    }

    .skill-tags {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    /* Team Member Card */
    .team-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .action-buttons {
      display: flex;
      gap: 0.5rem;
    }