JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<div class="friends-block">
    <div class="task-list">
        <div class="task-info">
            <div class="task-image">
                <img src="https://i.imgur.com/8Km9tLL.png" alt="Avatar">
            </div>
            <div class="task-details">
                <p class="task-title">daniil_ik</p>
            </div>
        </div>
        <div class="task-reward">
            <img src="https://skb44.ru/upload/Icon_tap/token.png" alt="Token Icon">
            <span>9 342</span>
        </div>
    </div>
</div>

CSS

.friends-block {
  margin: 20px;
  border-radius: 10px;
  background-color: #1c1c1e;
  padding: 10px;
  box-sizing: border-box;
}

.task-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.task-info {
  display: flex;
  align-items: center;
}

.task-image {
  width: 40px; /* Ширина блока для изображения */
  display: flex;
  justify-content: center;
  align-items: center;
}

.task-image img {
  width: 40px; /* Изображение занимает всю ширину блока */
  height: auto;
  border-radius: 50%; /* Круглое изображение */
}

.task-details {
  margin-left: 10px;
}

.task-title {
  font-weight: bold;
  font-size: 16px;
  color: #fff;
}

.task-reward {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #fff;
}

.task-reward img {
  width: 25px;
  height: 16px;
  margin-right: 5px;
}