<!--HTML-->
<div class="tweet-main">
<div class="tweet-name-1">
<img src="https://i.imgur.com/kJf016a.png" style="width: 30px; height: 25px; margin-top: 8px; margin-left: 10px;">
<p class="tweet-name-2">Ваше имя</p>
<br><p class="tweet-tweets">0 Твит</p></div>

<!-- ЗДЕСЬ ШАПКА -->
<div class="tweet-pic" style="background-image: url(https://via.placeholder.com/570x157);"></div>
<!-- ЗДЕСЬ АВА (любого размера с одинаковой шириной и высотой) -->
<div class="tweet-ava" style="background-image: url(https://via.placeholder.com/150x150);"></div>

<div class="tweet-table">

<p class="tweet-name-3">Ваше имя</p>
<br><p class="tweet-nick">@вашник</p>
<br><p class="tweet-status">Ваш статус</p>
<br><p class="tweet-info">
<img src="https://i.imgur.com/9LE6tM8.png" style="width: 18px; height: 18px; padding: 0px 5px;">Регистрация: месяц, 2000 г. <img src="https://i.imgur.com/ZcGcjYd.png" style="width: 18px; height: 18px; padding: 0px 5px">Дата рождения: 00, месяц <img src="https://i.imgur.com/ijJWybC.png" style="width: 18px; height: 18px; padding: 0px 5px">Локация</p>
<br><p class="tweet-follow"><span class="follow">0</span> читаемых <span class="follow">0</span> читателей</p></div>
<button class="tweet-button"><a href="#" style="color: #1da1f2;">Изменить профиль</a></button>

<div class="tweet-gallery">
<!-- ЗДЕСЬ СВОИ КАРТИНКИ (любого размера с одинаковой шириной и высотой) -->
<img src="https://via.placeholder.com/80x80"> <img src="https://via.placeholder.com/80x80"> <img src="https://via.placeholder.com/80x80">
<br><img src="https://via.placeholder.com/80x80"> <img src="https://via.placeholder.com/80x80"> <img src="https://via.placeholder.com/80x80">
<!--  -->
</div>
</div>


<style>
.tweet-main {
background-color: #fff;
width: 570px; 
height: auto;
float: left;
border-width: 1px;
border-style: solid;
border-color: #e6ecf0;
}

.tweet-pic {
width: 569.5px; 
height: 157px;
margin-left: 0.5px;
}

.tweet-name-1 {
width: 569.5px; 
height: 44.5px;
background-color: #fff;
margin-left: 0.5px;
margin-top: 0.5px;
}

.tweet-name-2 {
font-size: 15px;
font-family: "Segoe UI";
color: #000;
font-weight: bold;
line-height: 0.6;
text-align: center;
left: -195px;
top: -28px;
position: relative;
}

.tweet-tweets {
left: 55px;
top: -59px;
position: relative;
font-size: 11px;
font-family: "Segoe UI";
color: #657786;
line-height: 0.9;
text-align: left;
}

.tweet-ava {
background-color: #657786;
border: 3px solid #fff;
border-radius: 80px;
width: 140px; 
height: 140px;
margin-top: -90px;
margin-left: 15px;
background-size: 100%;
}

.tweet-button {
width: 180px; 
height: 40px;
border: 1px solid #1da1f2;
color: #1da1f2;
border-radius: 60px;
top: -50px;
left: 118px;
position: relative;
float: left;
outline: none;
background-color: #fff;
}


.tweet-table {
width: 250px; 
height: auto;
float: left;
}

.tweet-gallery {
width: 260px; 
height: 170px;
float: left;
top: -35px;
left: 53px;
position: relative;
}

.tweet-gallery img {
width: 80px; 
height: 80px;
float: left;
border: 2px solid #fff; 
background-size: 100%;
}

.tweet-name-3 {
font-size: 15px;
font-family: "Segoe UI";
color: #000;
font-weight: bold;
line-height: 0.6;
left: 25px;
position: relative;
text-align: left; 
}

.tweet-nick {
font-size: 12px;
font-family: 'Ubuntu', sans-serif;
color: #657786;
line-height: 0.75;
font-weight:  lighter;
left: 25px;
top: -30px;
position: relative;
}

.tweet-status {
font-size: 12px;
font-family: 'Roboto', sans-serif;
color: #000;
line-height: 0.75;
left: 25px;
top: -50px;
position: relative;
}

.tweet-info {
font-size: 13px;
font-family: "Segoe UI";
color: #657786;
line-height: 0.75;
left: 20px;
top: -50px;
position: relative;
}

.tweet-follow {
font-size: 12px;
font-family: "Segoe UI";
color: #657786;
line-height: 0.75;
left: 25px;
top: -50px;
position: relative;
}

.follow {
color: #000;
font-weight: bold;
}

@font-face {
font-family: "Ubuntu"; 
src: url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap") format("truetype"); 
font-style: normal; 
font-weight: normal; 
} 

@font-face {
font-family: "Roboto"; 
src: url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap") format("truetype"); 
font-style: normal; 
font-weight: normal; 
} 
</style>

<!--HTML-->
<div class="tw-post-main">

<div class="tw-post-main-up">
<p class="tw-post-main-up-name">
<!-- ЗДЕСЬ АВАТАР --><img src="https://via.placeholder.com/49x49">
Ваше имя
</p>
<p class="tw-post-main-up-nick">
@вашник · 0 ч
</p>
</div>

<!-- <br> — новая строка, <i></i> — курсив, <b></b> — жирный текст, <h-tag></h-tag>  — выделение тега на русском языке (англ выделяется автоматически) -->

<div class="tw-post-content-main">
<p class="tw-post-content">
Ваш текст <h-tag>#тег</h-tag>

<div class="tw-post-photo">
<!-- ВАШЕ ФОТО любого размера  -->
<img src="https://via.placeholder.com/400x390">
</div>
</p>
</div>

<!-- ЗДЕСЬ КОММЕНТАРИИ, РЕТВИТЫ, ЛАЙКИ -->
<div class="tw-like"><p class="comm">0</p> <p class="repost">0</p> <p class="like-t">0</p></div>

</div>

<style>
.tw-post-main {
background-color: #fff;
width: 570px; 
height: auto;
float: left;
border-width: 1px;
border-style: solid;
border-color: #e6ecf0;
margin-bottom: -50px;
}

.tw-post-main-up {
width: 560px; 
margin-top: 10px;
}

.tw-post-main-up-name img {
width: 49px; 
height: 49px;
border: 1px solid #fff;
border-radius: 80px;
float: left;
padding: 10px;
background-size: 100%;
}

.tw-post-main-up-name {
font-size: 15px;
font-family: "Segoe UI";
color: #000;
font-weight: bold;
line-height: 0.6;
float: left;
padding: 10px;
}

.tw-post-main-up-nick {
font-size: 13px;
font-family: 'Ubuntu', sans-serif;
color: #657786;
line-height: 0.75;
font-weight:  lighter;
float: left;
padding: 10px;
left: 10px;
top: 2px;
position: relative;
}

.tw-post-content-main {
width: 470px; 
height: auto;
left: 72px;
top: -65px;
position: relative;
float: left;
}

.tw-post-content { 
font-size: 14px;
font-family: 'Roboto', sans-serif;
color: #000;
line-height: 0.75;
}

.tw-like {
width: 490px; 
height: 38px;
background-size: 100%;
background-image: url(https://i.imgur.com/owougpA.png);
top: -62px;
margin-left: 57px;
position: relative;
float: left;
}

.comm {
width: 100px; 
height: 20px;
font-size: 12px;
font-family: "Segoe UI";
color: #657786;
line-height: 0.9;
position: relative;
float: left;
padding: 20px;
left: 40px;
top: 12px;
}

.repost {
font-size: 12px;
font-family: "Segoe UI";
color: #657786;
line-height: 0.9;
float: left;
width: 100px; 
height: 20px;
position: relative;
padding: 20px;
top: 12px;
left: 90px;
}

.like-t {
font-size: 12px;
font-family: "Segoe UI";
color: #657786;
line-height: 0.9;
float: left;
width: 100px; 
height: 20px;
position: relative;
padding: 20px;
left: 140px;
top: 12px;
}

.tw-post-photo {
width: 410px; 
height: auto;
}

.tw-post-photo img {
width: 410px;
border: 2px solid #fff; 
background-size: contain;
}

.blue { color: #1da1f2; }

h-tag {
color: #1da1f2;
}

@font-face {
font-family: "Ubuntu"; 
src: url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap") format("truetype"); 
font-style: normal; 
font-weight: normal; 
} 

@font-face {
font-family: "Roboto"; 
src: url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap") format("truetype"); 
font-style: normal; 
font-weight: normal; 
} 
</style>