JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Профиль</title>
	<link rel="stylesheet" href="../style.css">
</head>
<body>
	<header>
		<div class="shopping-bag-menu">
			<div>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>	
		<div class="shopping-bag-title">
			
		</div>	
		<div class="shopping-bag-icon">
			<a href="#open-block-2" class="link-open-block"><img src="edit.svg" alt="Редактировать"></a>
		</div>	
	</header>
	<section>
		<div class="top-profile">
			<div class="top-profile-avatar">
				<img src="noun-photo.svg" alt="Photo">
				<div class="download-photo-profile"><p><img src="download.svg" alt="Download">&#160;&#160;Загрузить</p></div>
			</div>
			<p class="profile-name-user">Корнеев Александр</p>
			<p class="balance-user-profile"><img src="gift.svg" alt="Gift">У Вас 30 бонусов</p>
		</div>
		
		<div class="login-info_user_profile">
			<div class="data-user-profile">
				<div>AlexanderKorneev@yandex.ru</div>
				<div>E-mail</div>
			</div>
			<hr>
			<div class="data-user-profile">
				<div>AlexanderKorneev1411</div>
				<div>Логин</div>
			</div>
		</div>

		<div class="logout-of-account">Выйти</div>

		<div id="open-block-2">
		    <div class="open-block-inner">
		        <div class="open-block-text">
		            <a href="#" class="open-block-close" title="close"><img src="close-popup.svg" alt=""></a>
		            <h3>Редактировать данные</h3>
		            <a href="#" class="open-block-close" title="close">Сбросить пароль</a>
		        </div>
		    </div>     
		</div>
	</section>
</body>
</html>

CSS

.top-profile{
	width: 100%;
	background: white;
}
.top-profile-avatar{
	width: 92px;
	height: 92px;
	overflow: hidden;
	margin: 0 auto;
	padding: 20px 0;
	position: relative;
}
.top-profile-avatar img{
	width: 100%;
    height: auto;
}
.top-profile-avatar .download-photo-profile{
	width: 100%;
	height: 22px;
	background: black;
	opacity: 0.5;
	position: absolute;
	bottom: 0;
}
.top-profile-avatar .download-photo-profile p{
    text-align: center;
    color: white;
    font: 11px "Rubik-Medium";
    margin-top: 4px;
}
.top-profile-avatar .download-photo-profile img{
	width: auto;
}
.profile-name-user{
	width: 100%;
	text-align: center;
	font: 20px "Rubik-Medium";
	color: rgb(5,22,72);
	margin-bottom: 7px;
}
.balance-user-profile{
	width: 100%;
	text-align: center;
	font: 13px "Rubik-Regular";
	color: rgb(13,30,204);
}
.balance-user-profile img{
	margin-right: 7px;
}
.login-info_user_profile{
	width: 100%;
	background: white;
	margin: 15px 0;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	padding: 12px 0;
}
.login-info_user_profile hr{
	margin: 12px 0;
	border: 1px solid rgb(226,227,230)
}
.data-user-profile{
	width: 100%;
	display: flex;
}
.data-user-profile div:nth-child(odd){
	flex-basis: 70%;
	word-break: break-word;
	margin-left: 20px;
	font: 16px "Rubik-Regular";
	color: rgb(5,22,72);
}
.data-user-profile div:nth-child(even){
	flex-basis: 30%;
	white-space: nowrap;
	text-align: right;
	margin-right: 20px;
	font: 16px "Rubik-Regular";
	color: rgb(167,170,179);
}
.logout-of-account{
	width: 100%;
	text-align: center;
	height: 45px;
	background: white;
	color: rgb(255,61,12);
	font: 16px "Rubik-Regular";
	cursor: pointer;
	line-height: 45px;
}
.link-open-block{
    display: inline-block;
    padding: 20px 30px;
    text-decoration: none;
    outline: none;
}
[id^=open-block]{
    visibility: hidden;
    opacity: 0;
    position: fixed; top: 0; left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;    
    background: rgba(0,0,0,0.7);
   ...