JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meses</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <main class="main">
        <section class="mes enero" id="0">
            <div class="sombra sombra--enero"></div>
        </section>
        <section class="mes febrero" id="1">
            <div class="sombra sombra--febrero"></div>
        </section>
        <section class="mes marzo" id="2">
            <div class="sombra sombra--marzo"></div>
        </section>
        <section class="mes abril" id="3">
            <div class="sombra sombra--abril"></div>
        </section>
        <section class="mes mayo" id="4">
            <div class="sombra sombra--mayo"></div>
        </section>
        <section class="mes junio" id="5">
            <div class="sombra sombra--junio"></div>
        </section>
        <section class="mes julio" id="6">
            <div class="sombra sombra--julio"></div>
        </section>
        <section class="mes agosto" id="7">
            <div class="sombra sombra--agosto"></div>
        </section>
        <section class="mes septiembre" id="8">
            <div class="sombra sombra--septiembre"></div>
        </section>
        <section class="mes octubre" id="9">
            <div class="sombra sombra--octubre"></div>
        </section>
        <section class="mes noviembre" id="10">
            <div class="sombra sombra--noviembre"></div>
        </section>
        <section class="mes diciembre" id="11">
            <div class="sombra sombra--diciembre"></div>
        </section>
    </main>
    <script src="js/app.js"></script>
</body>

</html>

CSS

:root {
    --transparencia: 0.6;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.mes {
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    display: none;
}

.ver {
    display: block;
}

.sombra {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.enero {
    background-image: url(https://cdn.pixabay.com/photo/2020/01/07/20/12/bike-4748495_960_720.jpg);
}

.sombra--enero {
    background-color: hsla(0, 68%, 42%, var(--transparencia));
}

.febrero {
    background-image: url(https://cdn.pixabay.com/photo/2018/04/23/23/59/swan-3346004_960_720.jpg);
}

.sombra--febrero {
    background-color: hsla(304, 53%, 56%, var(--transparencia));
}

.marzo {
    background-image: url(https://cdn.pixabay.com/photo/2019/11/01/17/10/rose-4594713_960_720.jpg);
}

.sombra--marzo {
    background-color: hsla(182, 56%, 39%, var(--transparencia));
}

.abril {
    background-image: url(https://cdn.pixabay.com/photo/2016/02/18/20/02/flower-1207954_960_720.jpg);
}

.sombra--abril {
    background-color: hsla(0, 0%, 100%, var(--transparencia));
}

.mayo {
    background-image: url(https://cdn.pixabay.com/photo/2017/07/25/14/57/rain-2538443_960_720.jpg);
}

.sombra--mayo {
    background-color: hsla(143, 95%, 40%, var(--transparencia));
}

.junio {
    background-image: url(https://cdn.pixabay.com/photo/2020/12/29/23/35/sea-5871912_960_720.jpg);
}

.sombra--junio {
    background-color: hsla(39, 100%, 50%, var(--transparencia));
}

.julio {
    background-image: url(https://cdn.pixabay.com/photo/2020/01/25/11/45/new-year-4792346_960_720.jpg);
}

.sombra--julio {
    background-color: hsla(337, 86%, 47%, var(--transparencia));
}

.agosto {
    background-image: url(https://cdn.pixabay.com/photo/2016/08/07/08/20/beach-1575816_960_720.jpg);
}

.sombra--agosto {
    background-color: hsla(54, 79%, 44%,...

JavaScript

const fechaActual = new Date()
let mesActual = fechaActual.getMonth()
const mes = document.getElementById(mesActual)
mes.classList.add('ver')