Control Panel

Member Card

Squad Name

Member Name 2

Sub-Squad name

Squad Name

Member Name 3

Sub-Squad name

Squad Name

Member Name 4

Sub-Squad name

Squad Name

Member Name 5

Sub-Squad name

Squad Name

Member Name 6

Sub-Squad name

Testing 1

Dimas Raka

Sub-Squad name

Nuxt Component

<AppCardMember squad-name="Testing 1" member-name="Dimas Raka" />

HTML

<div
  v-for="index in 5"
  :key="index"
  class="p-6 transition duration-500 ease-in-out bg-white border-2 border-gray-100 rounded cursor-pointer shadow-100 hover:border-primary"
>
  <div class="flex flex-col items-center justify-center">
    <h4>Squad Name</h4>

    <div class="my-8 bg-orange-100 rounded-full w-28 h-28">
      <img
        class="object-cover rounded-full w-28 h-28"
        src="https://qloud-storage.s3-ap-southeast-1.amazonaws.com/apps/squadx/teams/dmo/avatar/aguero_head-shoulders.webp"
        alt=""
      />
    </div>

    <div class="text-center">
      <h5>Member Name {{ index + 1 }}</h5>
      <h5 class="font-light text-gray-300">Sub-Squad name</h5>
    </div>
  </div>
</div>