Slide Tabs code

Site URL: https://www.sinsfunfactory.com/

Hi there and good day.  On my site SinsFunFactory.com I have this code block with code for the Slide Tabs, image below, that I need help editing.  What I want to be able to do is either have each tab be a different color or have a banner image.  If anyone has the time in helping me with this I would greatly appreciate it.  Here is the code I am using:

 

<!-- Source: https://codepen.io/skkhan/pen/MWWdXbb -->
<!-- Tweak by @tuanphan -->

<ul class="main-box">
    <li class="box active"><span>Monday Night Raw</span>

        <div class="detail active">
            <p> <a href="/wwe">11/25/2022</a>
             <p>

           
           The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
            </p>
        </div>
    </li>
    <li class="box"><span>NXT 2.0</span>
        <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            <p>
            
           
           The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
            </p>
        </div>
    </li>
    <li class="box"><span>Friday Night Smackdown</span>

        <div class="detail">
              <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            <p>
            
           
           The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
            </p>
        </div>
    </li>
    <li class="box"><span>Premium Live Enents</span>
    <div class="detail">
          <p>  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            <p>
            
           
           The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
            </p>
    </div>
</li>
</ul>

<style>
  @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');

body 

.main-box
{
    display: flex;
    background: #bdc2c9;
    margin: 20px auto 20px auto;
    padding:0;
    width: 991px;
}
.box
{

height: 600px;
padding:15px;
border-right: 1px solid white;
webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
position: relative;
overflow: hidden;
list-style: none;
}
.detail
{
    width: 90%; 5px;
    height: 100%;
    position: absolute;
    right: 0;
    top:0;
    background: #8da2c2;
    color:black;
    opacity: 0;
    padding:30px;
    box-sizing:border-box;
    webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.box.active
{
    width: 500% !important;
}

.box.active .detail
{
    opacity: 1;
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
    transform: none;
}

.box span {
    writing-mode: vertical-rl;
    font-size: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    width: 40px;
    transform: rotate(180deg);
    font-weight: 400;
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  
}

.box.active span 
{
    left:25px;
    right:auto;
    margin:0;
  font-weight:600
}

.box p 
{
    line-height: 23px;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    var getslide = $('.main-box li').length - 1;

    var slidecal = 30/getslide+'%';

    $('.box').css({"width": slidecal});

    $('.box').click(function(){
        $('.box').removeClass('active');
       $(this).addClass('active');
    });
</script>

Site-wide password?

aswd1234

Try adding this into Code Block

<style>
  li.box:nth-child(1) {
  	background-color: red;
  }
  li.box:nth-child(2) {
  	background-color: green;
  }
  li.box:nth-child(3) {
  	background-color: violet;
  }
  li.box:nth-child(4) {
  	background-color: pink;
  }
</style>

That was the answer I needed. Thanks all!