JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<div class="user">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Faenza-avatar-default-symbolic.svg/1024px-Faenza-avatar-default-symbolic.svg.png" alt="user image">
		<div class="title">
			Evgeniy G.
		</div>
		<div class="service_price">
			9999 за час консультации
		</div>
		<button class="message">Написать</button>
	</div>
</div>

SCSS

.container {
	width: 100%;
	min-height: calc(100vh - 61px);
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	background: #f2f2f2;

	.user {
		width: 24%;
		height: 200px;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		background: #fff;
		margin-left: 1%;
		margin-top: 20px;
		border-radius: 4px;

		img {
			width: 70px;
			height: 70px;
			border-radius: 50%;
			background: #f2f2f2;
			margin: 10px;
		}

		.title {
			width: calc(100% - 90px);
			margin-top: 10px;
		}

		.service_price {
			width: calc(100% - 90px);
		}

	}

}