JSFiddle - React, Tailwind, and code Playground

by hollanditkzn

HTML

<div class="item">
  <div class="item__member">
    <h2 class="item__member-name">Эксперт по интернету</h2>
    <img src="https://d4n5pyzr6ibrc.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/4785B1C2-8734-405D-96DC23A6A32F256B/thul-90efb785-97af-5e51-94cf-503fc81b6940.jpg?response-content-disposition=inline" alt="Картинка" class="item__member-image">
  </div>
    <div class="item__member">
    <h2 class="item__member-name">Эксперт по интернету</h2>
    <img src="https://d4n5pyzr6ibrc.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/4785B1C2-8734-405D-96DC23A6A32F256B/thul-90efb785-97af-5e51-94cf-503fc81b6940.jpg?response-content-disposition=inline" alt="Картинка" class="item__member-image">
  </div>
  <div class="item__member">
    <h2 class="item__member-name">Эксперт по интернету</h2>
    <img src="https://d4n5pyzr6ibrc.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/4785B1C2-8734-405D-96DC23A6A32F256B/thul-90efb785-97af-5e51-94cf-503fc81b6940.jpg?response-content-disposition=inline" alt="Картинка" class="item__member-image">
  </div>
 <div class="item__member">
    <h2 class="item__member-name">Эксперт по интернету</h2>
    <img src="https://d4n5pyzr6ibrc.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/4785B1C2-8734-405D-96DC23A6A32F256B/thul-90efb785-97af-5e51-94cf-503fc81b6940.jpg?response-content-disposition=inline" alt="Картинка" class="item__member-image">
  </div>
</div>

CSS

body{
  padding: 0;
  margin: 0;
  background: #000;
  font-family: Vardana;
}

.item {
  color: whitesmoke;
  display: flex;
}
.item__member{
  width: 25%;
}
.item__member-name{
  text-align: center;
  font-size: 10px;
}

.item__member-image{
  max-width: 100%;
  filter: grayscale(1);
  transition: filter 0.75s ease-in-out;
}
.item__member-image:hover{
  filter: grayscale(0);
}