HourlyForecastTile.html

<style>
    .hourlyForecastTile {
        background-color: #2F2F2F;
        flex-direction: row;
        border-radius: 1vh;
    }

    .hourlyForecastTile .icon {
        font-size: 10vmin;
    }

    .hourlyForecastTile .content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 95%;
        height: 85%;
    }

    .hourlyForecastTile .entry {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        height: 100%;
    }

    .hourlyForecastTile .icon {
        padding-top: 1vmin;
        padding-bottom: 0.5vmin;
        font-size: 3.5vmin;
    }

    .hourlyForecastTile .hour {
        font-size: 1.5vmin;
    }

    .hourlyForecastTile .temperature {
        font-size: 2vmin;
        font-weight: bold;
    }

    .hourlyForecastTile .rain {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 1.5vmin;
    }

    .hourlyForecastTile .rain i {
        font-size: 2.5vmin;
    }

    .hourlyForecastTile .rainProbability {
        padding-left: 1vmin;
    }

    .hourlyForecastTile .windSpeed{
        font-size: 1.3vmin;
    }
</style>

<div class="hourlyForecastTile">
    <div class="content">
        {% for item in data %}
            <div class="entry">
                <div class="hour">{{ item['hour'] }} Uhr</div>
                <i class="wi {{ item['icon'] }} icon" style="color: {{ item['iconColor'] }};" title="{{ item['description'] }}"></i>
                <div class="temperature" style="color: {{ item['temperatureColor'] }}">{{ item['temperature'] }}&deg;C</div>
                <div class="rain">
                    <i class="wi wi-raindrops"></i>
                    <div class="rainProbability">{{ item['rainProbability'] }}</div>
                </div>
                <div class="windSpeed" style="color: {{ item['windSpeedColor'] }}">{{ item['windSpeed'] }}</div>
            </div>
        {% endfor %}
    </div>
</div>