<div class="card bg-white border-0 rounded-10 mb-4">
	<div class="card-body p-4">
		<h4 class="fs-18 mb-4">مثال تک کاربر</h4>
		<div class="d-sm-flex justify-content-between align-items-center">
			<div class="d-flex align-items-center mb-3 mb-sm-0">
				<div class="flex-shrink-0">
					<img src="assets/images/user-62.jpg" class="wh-60 rounded-circle" alt="user">
				</div>
				<div class="flex-grow-1 ms-3">
					<h4 class="fs-16 fw-semibold mb-1">جان اسمیت</h4>
					<span class="fs-14">طراح وب</span>
				</div>
			</div>
			<ul class="ps-0 mb-0 list-unstyled d-flex gap-2">
				<li>
					<a href="https://www.facebook.com/" target="_blank" class="text-decoration-none wh-38 bg-primary bg-opacity-10 d-block
					text-center position-relative rounded-circle text-primary hover-bg">
						<i class="ri-facebook-fill position-absolute top-50 start-50 translate-middle fs-18"></i>
					</a>
				</li>
				<li>
					<a href="https://www.facebook.com/" target="_blank" class="text-decoration-none wh-38 bg-primary bg-opacity-10 d-block
					text-center position-relative rounded-circle text-primary hover-bg">
						<i class="ri-twitter-x-line position-absolute top-50 start-50 translate-middle fs-18"></i>
					</a>
				</li>
				<li>
					<a href="https://www.facebook.com/" target="_blank" class="text-decoration-none wh-38 bg-primary bg-opacity-10 d-block
					text-center position-relative rounded-circle text-primary hover-bg">
						<i class="ri-linkedin-fill position-absolute top-50 start-50 translate-middle fs-18"></i>
					</a>
				</li>
			</ul>
		</div>
	</div>
</div>

<div class="card bg-white border-0 rounded-10 mb-4">
	<div class="card-body p-4">
		<h4 class="fs-18 mb-4">مثال کاربر گروه</h4>

		<div class="d-flex justify-content-between">
			<ul class="ps-0 mb-0 list-unstyled d-flex align-items-center">
				<li>
					<a href="#">
						<img src="assets/images/user-1.jpg" class="wh-38 rounded-circle border border-2 border-color-white" alt="user">
					</a>
				</li>
				<li class="ms-8">
					<a href="#">
						<img src="assets/images/user-2.jpg" class="wh-38 rounded-circle border border-2 border-color-white" alt="user">
					</a>
				</li>
				<li class="ms-8">
					<a href="#">
						<img src="assets/images/user-3.jpg" class="wh-38 rounded-circle border border-2 border-color-white" alt="user">
					</a>
				</li>
				<li>
					<a href="#" class="wh-38 rounded-circle bg-primary bg-opacity-10 d-block text-center position-relative text-decoration-none text-primary hover-bg">
						<i class="ri-add-line fs-20 position-absolute top-50 start-50 translate-middle"></i>
					</a>
				</li>
			</ul>

			<a href="#" class="btn bg-primary bg-opacity-10 fw-bold fs-14 hover-bg">
				مشاهده جزئیات
			</a>
		</div>
	</div>
</div>

<div class="card bg-white border-0 rounded-10 mb-4">
	<div class="card-body p-4">
		<h4 class="fs-18 mb-4">تک کاربر با مثال نشان</h4>

		<div class="d-flex justify-content-between">
            <ul class="ps-0 mb-0 list-unstyled d-flex align-items-center gap-1">
                <li>
                    <a href="#" class="position-relative d-block">
                        <img src="assets/images/user-1.jpg" class="wh-38 rounded-circle border border-2 border-color-white" alt="user">
                        <div class="position-absolute top-0 end-0 p-1 bg-success border border-2 border-white rounded-circle"></div>
                    </a>
                </li>
                <li>
                    <a href="#" class="position-relative d-block">
                        <img src="assets/images/user-2.jpg" class="wh-38 rounded-circle border border-2 border-color-white" alt="user">
                        <div class="position-absolute top-0 end-0 p-1 bg-primary border border-2 border-white rounded-circle"></div>
                    </a>
                </li>
                <li>
                    <a href="#" class="position-relative d-block">
                        <img src="assets/images/user-3.jpg" class="wh-38 rounded-circle border border-2 border-color-white" alt="user">
                        <div class="position-absolute top-0 end-0 p-1 bg-warning border border-2 border-white rounded-circle"></div>
                    </a>
                </li>
            </ul>

            <a href="#" class="btn bg-primary bg-opacity-10 fw-bold fs-14 hover-bg">
                View Details
            </a>
        </div>
	</div>
</div>