JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Here you can add your custom html code -->
<div class="background-divs black active"></div>
<div class="background-divs tom"></div>
<div class="background-divs peter"></div>
<div class="background-divs michele"></div>
<div class="background-divs colline"></div>
<div class="background-divs esther"></div>
<div class="background-divs factice"></div>


<ul class="links">

 <li>
  <span class="w-text-content tom">
   <a data-background="tom" href="http://www.tomhoops.com" target="_blank" data-action="external" rel="nofollow noopener" class="ui-link link">
    <span class="text-ui-light-shade-color" style="color: var(--ui-light-shade-color);">
     <span style="font-weight: normal;">TOM HOOPS .211</span>
    </span>
   </a>
  </span>
 </li>
  
 <li>
  <span class="w-text-content peter">
   <a data-background="peter" href="http://www.sodhi.com" target="_blank" data-action="external" rel="nofollow noopener" class="ui-link link">
    <span class="text-ui-light-shade-color" style="color: var(--ui-light-shade-color);">
     <span style="font-weight: normal;">PETER SODHI .321</span>
     </span>
   </a>
  </span>
 </li>
  
 <li>
  <span class="w-text-content michele">
   <a data-background="michele" href="http://www.micheleyong.com" target="_blank" data-action="external" rel="nofollow noopener" class="ui-link link">
    <span class="text-ui-light-shade-color" style="color: var(--ui-light-shade-color);">
     <span style="font-weight: normal;">MICHELE YONG .654</span>
    </span>
   </a>
  </span>
 </li>

 <li>
  <span class="w-text-content colline">
   <a data-background="colline" href="http://www.colline-vence.com" target="_blank" data-action="external" rel="nofollow noopener" class="ui-link link">
    <span class="text-ui-light-shade-color" style="color: var(--ui-light-shade-color);">
     <span style="font-weight: normal;">COLLINE VENCE .999</span>
    </span>
   </a>
  </span>
...

CSS

/* Here you can add your custom css code */
.tom, .peter, .michele, .colline, .esther, .factice {
  font-family: 'Akzidenz-Grotesk Pro Extracondensed';  
  font-size: var(--ui-block-title-size);
}

.background-divs {
    width: 100vw;
    height: 100vh;
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    right: 0;
    left: 0;
    visibility: visible;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.background-divs.black {
    background-color: black;
}

.background-divs.tom {
    background: black url(https://res2.weblium.site/res/5e372b744982e300213839ce/5e3ebf3c5db2410021e51e63_optimized) no-repeat center right;
    background-size:50%;
}

.background-divs.peter {
    background-color: blue;
}

.background-divs.michele  {
    background-color: yellow;
}

.background-divs.colline  {
    background-color: green;
}

.background-divs.esther  {
    background-color: red;
}

.background-divs.factice  {
    background-color: grey;
}


.links {
    position: relative;
    z-index: 5;
}

.active {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

JavaScript

// Here you can add your custom js code
$('.link').mouseover(function(e) {
	e.preventDefault();
	var color = $(this).attr('data-background');

	$('.background-divs').removeClass('active');
	$('.background-divs.'+color).addClass('active');

});

$('.link').mouseout(function(e) {
	e.preventDefault();
	var color = $(this).attr('data-background');

	$('.background-divs').removeClass('active');

});