JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sun">
    <time>31.08<time>
        <img src="http://htmlbook.ru/files/weather-sun.jpg">
    <span>+20&deg;</span>
</div>

<div class="snow">
    <time>01.09<time>
        <img src="http://htmlbook.ru/files/weather-snow.jpg">
    <span>-3&deg;</span>
    
</div>

<div class="bizzard">
       <time>01.09<time>
        <img src="http://htmlbook.ru/files/weather-blizzard.jpg">
    <span>-10&deg;</span>
</div>

CSS

div {
    width: 114px;
    height: 160px;
    display: inline-block;
}

div:hover {
    box-shadow: 0px 0px 18px 8px #000;
}

time {
    background: #0097B9;
    display: block;
    height: 25px;
    color: #fff;
    padding: 1px 0px 1px 0px;
    font-size: 22px;
    text-align: center;
}

span {
    color: #000;
    font-size: 30px;
}