JSFiddle - React, Tailwind, and code Playground

by Nonamenonamevi4

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Прогноз погоды</title>
</head>
<body>
<div class="container">
  <div class="wrapper">
    <div class="date">31.08</div>
    <img src="http://htmlbook.ru/files/weather-sun.jpg" alt="Солнечная погода">
    <span>20&deg;</span>
  </div>
   <div class="wrapper">
    <div class="date">01.09</div>
    <img src="http://htmlbook.ru/files/weather-snow.jpg" alt="Снег">
    <span>-3&deg;</span>
  </div>
   <div class="wrapper">
    <div class="date">02.09</div>
    <img src="http://htmlbook.ru/files/weather-blizzard.jpg" alt="Метель">
    <span>-10&deg;</span>
  </div>
</div>
</body>
</html>

CSS

.container {
  display: flex;
  font-size: large;
}

.wrapper {
  margin-right: 5px;
  position: relative;
}

.wrapper:hover {
  box-shadow: 0 0 15px black
}

.date {
  display: flex;
  width: 114px;
  height: 30px;
  background-color: #0097b9;
  color: #fff;
  justify-content: center;
  align-items: center;
}

span {
  display: flex;
  justify-content: center;
}