JSFiddle - React, Tailwind, and code Playground

by Artem Borovikov

HTML

<div class="block">
    <img src="https://images.unsplash.com/photo-1605553700345-8c23ee508da0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=987&q=80" alt="">
</div>

CSS

.block {
    overflow: hidden;
    width: 200px;
    height: 200px;
    background-color: greenyellow;
    border-radius: 50% 10px 50% 50%;
}

.block img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
}