JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<section class="home">
	<header>
	<div class="kvf_fotografia"></div>
	<nav class="main-nav">
		<ul>
		<li class="nav-home">Home</li>
		<li class="nav-eventos">Eventos</li>
		<li class="nav-portfolio">Portfolio</li>
		<li class="nav-contacto">Contacto</li>
		</ul>
	</nav>
</header>
</section>
<section class="eventos">
	<h2>Eventos</h2>
	<ul>
	<li class="e1">
		<img src="img/eventos1.png">
		<div class="29er-desc">
		<p class="29er-p">29er</p>
		<p class="ver-eventos">ver eventos</p>
		</div>
	</li>
	<li class="e2">
		<img src="img/eventos2.png">
		<div class="420-desc">
		<p class="420-p">420</p>
		<p>ver eventos</p>
		</div>
	</li>
	<li class="e3">
		<img src="img/eventos3.png">
		<div class="cadet-desc">
		<p class="cadet-p">Cadet</p>
		<p>ver eventos</p>
		</div>
	</li>
	<li class="e4">
		<img src="img/eventos4.png">
		<div class="F18-desc">
		<p class="F18-p">F18</p>
		<p class="ver-eventos">ver eventos</p>
		</div>
	</li>
	<li class="e5">
		<img src="img/eventos5.png">
		<div class="J24-desc">
		<p class="J24-p">J24</p>
		<p>ver eventos</p>
		</div>
	</li>
	<li class="e6">
		<img src="img/eventos6.png">
		<div class="Laser-desc">
		<p class="Laser-p">Laser</p>
		<p>ver eventos</p>
		</div>
	</li>
	<li class="e7">
		<img src="img/eventos7.png">
		<div class="Od27-desc">
		<p class="Od27-p">Od27</p>
		<p class="ver-eventos">ver eventos</p>
		</div>
	</li>
	<li class="e8">
		<img src="img/eventos8.png">
		<div class="Paraolimpicos-desc">
		<p class="Paraolimpicos-p">Paraolimpicos</p>
		<p>ver eventos</p>
		</div>
	</li>
	<li class="e9">
		<img src="img/eventos9.png">
		<div class="Optimist-desc">
		<p class="Optimist-p">Optimist</p>
		<p>ver eventos</p>
		</div>
	</li>
	</ul>
</section>
	<footer></footer>
	
</body>
</html>

CSS

body{
	font-family: "Futura Condensed Medium";
	overflow-x:hidden;
}
/*---------------------------FONT FACE--------------------------*/

@font-face {
    font-family: "Futura Condensed Medium";
    src: url("../fonts/futura-condensed-medium.woff");
    font-weight: bold;
}

/* --------------------- EMPIEZA SECTION HOME ------------------*/

section.home{
	background:url("../img/header.png");
	background-size:cover;
	top:0;
	left:0;
	position:absolute;
	width:100%;
	overflow-x:hidden;
	height:800px;
}
/*----------------------EMPIEZA HEADER-------------------------*/
header{
	width:100%;
	height:100px;
	top:30px;
	position:absolute;
}
li{
	list-style: none;
	display:inline-block;
	text-transform: uppercase;
}
nav.main-nav{
  	float:right;
  	font-family: "Futura Condensed Medium";
  	color: rgb(255, 255, 255);
  	line-height: 0.656;
  	text-align: left;
 	position: absolute;
  	left: 906px;
  	top: 20px;
  	z-index: 18;
}
.main-nav ul li{
	font-size: 21.333px;
	margin-right: 10px;
}
.fixed{
	position:fixed !important;
	background-color:rgb(153, 149, 149);
}
/*---------------EMPIEZA SECTION EVENTOS------------------------*/
.eventos h2{
	text-transform:uppercase;
	text-align:center;
	background-color:#fff;
	/*color:#000;*/
	font-weight:bold;
	font-size: 46.333px;
	color: rgb(2, 2, 2);
	/*line-height: 0.302;*/
	margin-top:-20px;
}
.kvf_fotografia {
  font-size: 71px;
  font-family: "Futura";
  color: rgb(255, 255, 255);
  line-height: 0.824;
  text-align: left;
  position: absolute;
  left: 90.906px;
  top: 95.278px;
  background:url("../img/logo-kvf.png");
  background-size:cover;
  z-index: 20;
}
.eventos{
  /*font-size: 46.333px;*/
  font-family: "Futura Condensed Medium";
  position: absolute;
  /*left: 527.937px;*/
  top: 886.504px;
  z-index: 23;
  width:100%;
}
section.eventos ul{
	margin:-7px;
	display:inline-block;
	width:100.7%;
	left:0px;
	padding:0 !important;
}
section.eventos ul li {
    width: 33.34%;
    margin: 0;
    padding: 0;
    float: left;
   ...

JavaScript

$(document).ready(function(){
    $(".420-desc").css("background-color", "e4e3e3");
});