JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

CSS

/* GENERAL */
body, .background_2xT { background-color: #111!important; }
a:hover, a:focus, a:active  { cursor: pointer!important; }



/* POPUP CLOSE BUTTON */
.close-button_1Za {
position: fixed!important;
}


/* FONT-SIZE */
.ui-headingLg {
line-height: 0.9!important;
margin-top: 0px!important;
}

h1, h1.wl-title-home {
font-size: calc(24px + 15vw)!important;
}

h2.wl-la-salle {
font-size: calc(22px + 11vw)!important;
}

h2 {
font-size: calc(12px + 7.5vw)!important;
}

h3 {
font-size: calc(10px + 3.9vw)!important;
letter-spacing: initial!important;
}

.wl-small-text {
font-size: calc(7px + 2.1vw)!important;
}

.wl-small-ten {
font-size: 11px!important;
margin-top: 0px!important;
}

/* BIG TITLE SECTION LEFT / RIGHT / CENTER */
.wl-title-center h1 {
position: absolute!important;
left: 0!important;
right: 0!important;
z-index: -1!important;
}

h1.wl-title-home span {
white-space: nowrap!important;
text-overflow: ellipsis!important;
overflow: visible!important;
}

.wl-title-left h1 {
position: absolute!important;
left: -3%!important;
white-space: nowrap!important;
text-overflow: ellipsis!important;
overflow: visible!important;
/* 
color: #f24908!important;
padding: 40px 80px 40px 0px!important;
background: -webkit-linear-gradient(#f00, #fe601b)!important;
border-radius: 38px!important;
transform: skew(340deg)!important;
 */
}

.wl-title-right h1 {
position: absolute!important;
right: -1%!important;
white-space: nowrap!important;
text-overflow: ellipsis!important;
overflow: visible!important;
/* 
color: #f24908!important;
padding: 40px 0px 40px 80px!important;
background: -webkit-linear-gradient(#f00, #fe601b)!important;
border-radius: 38px!important;
transform: skew(340deg)!important;
 */
}






/* IMG - NON SELECT + BORDER RADIUS */
img[src], .w-picture-wrapper {
pointer-events: none!important;
border-radius: 38px!important;
}

.wl-no-border img[src],
.wl-no-border .w-picture-wrapper {
pointer-events: none!important;
border-radius:...

JavaScript

$(".wl-social-section .wl-social-clone").clone().insertAfter(".wl-responsive-menu-logo a .ui-logo--mobile_1SD");
$(".header__burger_3P8 ul li.menu__item_1eM").append("<div class='hr-style-menu'></div>");
$(".header__burger_3P8 ul.menu_1QC").append("<span class='footer-on-menu'>©2022  -  MADE  BY  <a class='' href='https://www.agenceccmg.com' target='blank'>AGENCECCMG</a></span>");

  


$(window).bind('mousewheel', function(event) {
    if   (event.originalEvent.wheelDelta >= 0) { $(".sticky-wrapper_6A4 header .w-section--header").show("normal");}
    else { $(".sticky-wrapper_6A4 header .w-section--header").hide("normal");}
});
  

 

  
  
$(document).ready(function(){
	$(".wl-contentinside-one .w-section__content, .wl-contentinside-two .w-section__content, .wl-contentinside-three .w-section__content").hide();
    $('.wl-la-salle .text-ui-light-shade-color').after('<h2 class="wl-la-salle plus-icon" style="display:inline; color: #fff; float: right;"></h2>');
  
    $('.wl-lessmore-one').click(function() {
      $('html, body').animate({ scrollTop: $(".wl-lessmore-one").offset().top }, 0);
      $('.wl-contentinside-one .w-section__content').toggle(); 
      $('.wl-lessmore-one .plus-icon').toggleClass('minus-icon');
      $('.wl-contentinside-two .w-section__content, .wl-contentinside-three .w-section__content').hide();
      $('.wl-lessmore-two .wl-la-salle .plus-icon, .wl-lessmore-three .wl-la-salle .plus-icon').removeClass("minus-icon");
    });
    
    $('.wl-lessmore-two').click(function() {
      $('html, body').animate({ scrollTop: $(".wl-lessmore-one").offset().top }, 0);
      $('.wl-contentinside-two .w-section__content').toggle(); 
      $('.wl-lessmore-two .plus-icon').toggleClass('minus-icon');
      $('.wl-contentinside-one .w-section__content, .wl-contentinside-three .w-section__content').hide();
      $('.wl-lessmore-one .wl-la-salle .plus-icon, .wl-lessmore-three .wl-la-salle .plus-icon').removeClass("minus-icon");
    });
    
   
   ...