Cards

Member Cards

<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 bg-gray-100 p-10">
    <div class="bg-white rounded-lg shadow">
        <div class="flex justify-between p-5">
            <div class="space-y-1">
                <div class="flex space-x-3">
                    <h4 class="font-semibold">John Doe</h4>
                    <div class="bg-blue-200 text-blue-900 rounded-full px-2 py-1 text-xs">Admin</div>
                </div>
                <h5 class="text-sm text-gray-400">Director of Photography</h5>
            </div>
            <div>
                <img class="h-10 w-10 object-cover rounded-full"
                    src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                    alt="img">
            </div>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-2 border-t text-sm">
            <div class="py-3 flex justify-center items-center space-x-2 border-b lg:border-b-0 lg:border-r">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
                <span>john@doe.com</span>
            </div>
            <div class="py-3 flex justify-center items-center space-x-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
                <span>+1 234 567 890</span>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-lg shadow">
        <div class="flex justify-between p-5">
            <div class="space-y-1">
                <div class="flex space-x-3">
                    <h4 class="font-semibold">Ketty Bob</h4>
                    <div class="bg-green-200 text-green-900 rounded-full px-2 py-1 text-xs">Recruiter</div>
                </div>
                <h5 class="text-sm text-gray-400">Senior Artist</h5>
            </div>
            <div>
                <img class="h-10 w-10 object-cover rounded-full"
                    src="https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                    alt="img">
            </div>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-2 border-t text-sm">
            <div class="py-3 flex justify-center items-center space-x-2 border-b lg:border-b-0 lg:border-r">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
                <span>ketty@bob.com</span>
            </div>
            <div class="py-3 flex justify-center items-center space-x-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
                <span>+1 234 567 890</span>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-lg shadow">
        <div class="flex justify-between p-5">
            <div class="space-y-1">
                <div class="flex space-x-3">
                    <h4 class="font-semibold">Sandy Doe</h4>
                    <div class="bg-red-200 text-red-900 rounded-full px-2 py-1 text-xs">Moderator</div>
                </div>
                <h5 class="text-sm text-gray-400">Technical Specialist</h5>
            </div>
            <div>
                <img class="h-10 w-10 object-cover rounded-full"
                    src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                    alt="img">
            </div>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-2 border-t text-sm">
            <div class="py-3 flex justify-center items-center space-x-2 border-b lg:border-b-0 lg:border-r">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
                <span>sandy@doe.com</span>
            </div>
            <div class="py-3 flex justify-center items-center space-x-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
                <span>+1 234 567 890</span>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-lg shadow">
        <div class="flex justify-between p-5">
            <div class="space-y-1">
                <div class="flex space-x-3">
                    <h4 class="font-semibold">Jenny Rod</h4>
                    <div class="bg-purple-200 text-purple-900 rounded-full px-2 py-1 text-xs">Super Admin</div>
                </div>
                <h5 class="text-sm text-gray-400">Cheif Program Officer</h5>
            </div>
            <div>
                <img class="h-10 w-10 object-cover rounded-full"
                    src="https://images.pexels.com/photos/1542085/pexels-photo-1542085.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                    alt="img">
            </div>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-2 border-t text-sm">
            <div class="py-3 flex justify-center items-center space-x-2 border-b lg:border-b-0 lg:border-r">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
                <span>jenny@rod.com</span>
            </div>
            <div class="py-3 flex justify-center items-center space-x-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
                <span>+1 234 567 890</span>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-lg shadow">
        <div class="flex justify-between p-5">
            <div class="space-y-1">
                <div class="flex space-x-3">
                    <h4 class="font-semibold">Kie Sot</h4>
                    <div class="bg-blue-200 text-blue-900 rounded-full px-2 py-1 text-xs">Admin</div>
                </div>
                <h5 class="text-sm text-gray-400">Assitant Director</h5>
            </div>
            <div>
                <img class="h-10 w-10 object-cover rounded-full"
                    src="https://images.pexels.com/photos/2726111/pexels-photo-2726111.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                    alt="img">
            </div>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-2 border-t text-sm">
            <div class="py-3 flex justify-center items-center space-x-2 border-b lg:border-b-0 lg:border-r">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
                <span>kie@sot.com</span>
            </div>
            <div class="py-3 flex justify-center items-center space-x-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
                <span>+1 234 567 890</span>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-lg shadow">
        <div class="flex justify-between p-5">
            <div class="space-y-1">
                <div class="flex space-x-3">
                    <h4 class="font-semibold">Paul Rod</h4>
                    <div class="bg-red-200 text-red-900 rounded-full px-2 py-1 text-xs">Moderator</div>
                </div>
                <h5 class="text-sm text-gray-400">Assitant Technical Artist</h5>
            </div>
            <div>
                <img class="h-10 w-10 object-cover rounded-full"
                    src="https://images.pexels.com/photos/1043471/pexels-photo-1043471.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                    alt="img">
            </div>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-2 border-t text-sm">
            <div class="py-3 flex justify-center items-center space-x-2 border-b lg:border-b-0 lg:border-r">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
                <span>paul@rod.com</span>
            </div>
            <div class="py-3 flex justify-center items-center space-x-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
                <span>+1 234 567 890</span>
            </div>
        </div>
    </div>
</section>

Large Member Cards

<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 bg-gray-100 p-10">
    <div class="bg-white rounded-lg shadow">
        <img class="h-32 w-32 mx-auto mt-7 object-cover rounded-full"
            src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
            alt="img">
        <div class="p-5 text-center">
            <h4 class="font-semibold">John Doe</h4>
            <h5 class="text-sm text-gray-400">Director of Photography</h5>
            <div class="flex justify-center mt-3">
                <div class="bg-blue-200 text-blue-900 rounded-full px-2 py-1 text-xs">Admin</div>
            </div>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-2 border-t text-sm">
            <div class="py-3 flex justify-center items-center space-x-2 border-b lg:border-b-0 lg:border-r">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
                <span>john@doe.com</span>
            </div>
            <div class="py-3 flex justify-center items-center space-x-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
                <span>+1 234 567 890</span>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-lg shadow">
        <img class="h-32 w-32 mx-auto mt-7 object-cover rounded-full"
            src="https://images.pexels.com/photos/3763188/pexels-photo-3763188.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
            alt="img">
        <div class="p-5 text-center">
            <h4 class="font-semibold">Ketty Bob</h4>
            <h5 class="text-sm text-gray-400">Senior Artist</h5>
            <div class="flex justify-center mt-3">
                <div class="bg-green-200 text-green-900 rounded-full px-2 py-1 text-xs">Recruiter</div>
            </div>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-2 border-t text-sm">
            <div class="py-3 flex justify-center items-center space-x-2 border-b lg:border-b-0 lg:border-r">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
                <span>ketty@bob.com</span>
            </div>
            <div class="py-3 flex justify-center items-center space-x-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
                <span>+1 234 567 890</span>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-lg shadow">
        <img class="h-32 w-32 mx-auto mt-7 object-cover rounded-full"
            src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
            alt="img">
        <div class="p-5 text-center">
            <h4 class="font-semibold">Sandy Doe</h4>
            <h5 class="text-sm text-gray-400">Technical Specialist</h5>
            <div class="flex justify-center mt-3">
                <div class="bg-red-200 text-red-900 rounded-full px-2 py-1 text-xs">Moderator</div>
            </div>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-2 border-t text-sm">
            <div class="py-3 flex justify-center items-center space-x-2 border-b lg:border-b-0 lg:border-r">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
                <span>sandy@doe.com</span>
            </div>
            <div class="py-3 flex justify-center items-center space-x-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
                <span>+1 234 567 890</span>
            </div>
        </div>
    </div>
</section>