JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<header>
  <a href=""></a>
  <div class="user-login">
    <form method="post" action="" onsubmit="return app.login_user();">
      <table border="0" cellpadding="3" cellspacing="0">
        <tbody>
          <tr>
          <td>Email Address:</td>
          <td><input type="text" name="loginemail" tabindex="1"></td>
          <td rowspan="2"><button tabindex="3">LOG IN</button></td>
          </tr>
          <tr>
          <td>Password:</td>
          <td><input type="password" name="loginpassword" tabindex="2"></td>
          </tr>
        </tbody>
      </table>
      <a href="#forgot" title="Forgot your password? Have us email it to you.">Forgot your password?</a>
    </form>
  </div>
</header>

<div class="panel">
  <div>
  <ul class="panel-menu">
    <li class="selected">Why join?</li>
    <li>Earn points</li>
    <li>FAQs</li>
  </ul>
  <ul class="panel-items">
    <li class="selected">
      <h2>WHY JOIN THE TOOLKIT REWARDS PROGRAM?</h2>
      <p>Here are some of the many benefits you'll enjoy as a Pick-n-Pull Toolkit Rewards Member:</p>
      <ul id="folder1list">
      <li>Get 1 Point for nearly every $1 spent</li>
      <li>Earn 350 points and get a <strong>FREE</strong> $20 reward certificate via   email</li>
      <li>Exclusive offers and events for Toolkit members</li>
      </ul>
    </li>
    <li>
      <h2>WHICH PURCHASES EARN YOU REWARD POINTS?</h2>
                <ul>
                  <li>Part Sales</li>
                  <li>Services</li>
                  <li>Thrift Store   Purchases</li>
                  <li>Admissions</li>
                </ul>
                <p><strong>Which items don't earn points?</strong><br>
                      Purchases paid by reward Certificate, sales tax, state fees, shipping charges, delivery charges, restocking fee, commercial or industrial   purchases, builders (cars), bulk buys or purchases, "core" charges,  ...

CSS

@import url('https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap');

:root {
  --font-main: "Manrope", sans-serif;
  --font-headings: "Manrope", sans-serif;
  --yellow: #ffde00;
  --white: #ffffff;
  --black: #000000;
  --blue: #4040f2;
  --charcoal: #222222;
  --light-gray: #cccccc;
  --med-gray: #999999;
  --red: #E60000;
  --image-logo-header:...

JavaScript

$(document).ready(function(){

	$('.panel ul.panel-menu>li').click(function(){
  
  	$('.panel ul.panel-items>li').removeClass('selected');
    $('.panel ul.panel-items>li').eq($(this).index()).addClass('selected');
    
    $('.panel ul.panel-menu>li').removeClass('selected');
    $(this).addClass('selected');
    
  });

});