Avatar Basic
<section class="flex items-center justify-center p-8">
<div class="avatar">
<div class="w-24 rounded">
<img src="https://i.pravatar.cc/300?img=1" alt="Profile picture" />
</div>
</div>
</section>
<style>
.avatar {
position: relative;
display: inline-flex;
}
.avatar > div {
display: block;
overflow: hidden;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
Copied to clipboard