import React from 'react'

const AvatarSizes = () => {
    return (
        <div className="col-xxl-6">
            <div className="card p-0 overflow-hidden position-relative radius-12">
                <div className="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
                    <h6 className="text-lg mb-0">Avatar Sizes</h6>
                </div>
                <div className="card-body p-24">
                    <div className="d-flex align-items-center flex-wrap gap-3">
                        <img
                            src="assets/images/avatar/avatar1.png"
                            className="w-24-px h-24-px rounded-circle object-fit-cover"
                            alt="Avatar"
                        />
                        <img
                            src="assets/images/avatar/avatar1.png"
                            className="w-32-px h-32-px rounded-circle object-fit-cover"
                            alt="Avatar"
                        />
                        <img
                            src="assets/images/avatar/avatar1.png"
                            className="w-40-px h-40-px rounded-circle object-fit-cover"
                            alt="Avatar"
                        />
                        <img
                            src="assets/images/avatar/avatar1.png"
                            className="w-44-px h-44-px rounded-circle object-fit-cover"
                            alt="Avatar"
                        />
                        <img
                            src="assets/images/avatar/avatar1.png"
                            className="w-56-px h-56-px rounded-circle object-fit-cover"
                            alt="Avatar"
                        />
                        <img
                            src="assets/images/avatar/avatar1.png"
                            className="w-64-px h-64-px rounded-circle object-fit-cover"
                            alt="Avatar"
                        />
                        <img
                            src="assets/images/avatar/avatar1.png"
                            className="w-72-px h-72-px rounded-circle object-fit-cover"
                            alt="Avatar"
                        />
                        <img
                            src="assets/images/avatar/avatar1.png"
                            className="w-80-px h-80-px rounded-circle object-fit-cover"
                            alt="Avatar"
                        />
                    </div>
                    <div className="d-flex align-items-center flex-wrap gap-3 mt-24">
                        <img
                            src="assets/images/avatar/avatar2.png"
                            className="w-24-px h-24-px radius-8 object-fit-cover"
                            alt="Avatar"
                        />
                        <img
                            src="assets/images/avatar/avatar2.png"
                            className="w-32-px h-32-px radius-8 object-fit-cover"
                            alt="Avatar"
                        />
                        <img
                            src="assets/images/avatar/avatar2.png"
                            className="w-40-px h-40-px radius-8 object-fit-cover"
                            alt="Avatar"
                        />
                        <img
                            src="assets/images/avatar/avatar2.png"
                            className="w-44-px h-44-px radius-8 object-fit-cover"
                            alt="Avatar"
                        />
                        <img
                            src="assets/images/avatar/avatar2.png"
                            className="w-56-px h-56-px radius-8 object-fit-cover"
                            alt="Avatar"
                        />
                        <img
                            src="assets/images/avatar/avatar2.png"
                            className="w-64-px h-64-px radius-8 object-fit-cover"
                            alt="Avatar"
                        />
                        <img
                            src="assets/images/avatar/avatar2.png"
                            className="w-72-px h-72-px radius-8 object-fit-cover"
                            alt="Avatar"
                        />
                        <img
                            src="assets/images/avatar/avatar2.png"
                            className="w-80-px h-80-px radius-8 object-fit-cover"
                            alt="Avatar"
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default AvatarSizes