JSFiddle - React, Tailwind, and code Playground

by gricha2380

HTML

<html>
<!-- https://codepen.io/skilljardev/pen/JNJMVX -->

<head>
  <meta charset="utf-8">

  <link rel="shortcut icon" href="https://everpath-course-content.s3.amazonaws.com/instructor/demo/themes/demo/favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans" rel="stylesheet" type="text/css">
  <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0">

  <title>Skilljar Online Training Software</title>


  <link rel="stylesheet" href="https://academy.skilljar.com/static/css/static-sheets.css">
<link rel="stylesheet" href="https://academy.skilljar.com/static/css/sj_dashboard.css">
<link rel="stylesheet" href="https://academy.skilljar.com/static/css/skilljar.css">
  <link rel="stylesheet" href="https://academy.skilljar.com/theme/pwgfw0liwwi4.css?v=4">

  <script src="https://academy.skilljar.com/static/js/jquery.min.55ced129c632.js"></script>
  
  <style>
    * {font-family: cursive !important;}
    #skilljar-content .coursebox-text {
      font-family: "Times New Roman", serif !important;
    }
    #skilljar-content { padding: 20px; }
  </style>

  <script>
    var isSkilljarTestUser = false;
    var isSkilljarFirstPageviewSinceAuth = false;
    var isSkilljarFirstPageviewSinceNewDomainMembership = false;
  </script>

</head>

<body class="sj-page-catalog">
  <div class="header">
    <h1><span class="welcome">Welcome</span>!</h1>
  </div>
  <div id="skilljar-content" class="grey-bg-d05">
    <div id="catalog-content">
      <div id="catalog-courses" class="course-listing">
        <a href="#" title="Success Metrics for Online Training" class="coursebox-container course theme-color-border-hover theme-no-hover" data-type="-c" data-tags="online-courses" data-oid="2wqfeysb60gch" data-coid="24n5ur4pduprk" data-order="1" data-course="success-metrics-for-online-training">
          <div class="coursebox-image"><img...

CSS

/* 1. Make welcome header red background */

/* 2. Remove "FREE" text from course tiles */


.coursebox-container {font-family: "Times New Roman", serif; }
/* 3. CSS bug - we don't want cursive font - why doesn't this work? */
.header {background-color:red;}
.header h1{margin:0;}
/*#catalog-courses .free {display:none;}*/

JavaScript

var skilljarUser = {
  firstName: "Jason",
  lastName: "Stewart",
  email: "[email protected]"
};

$(document).ready(function(){
  $(".header .welcome").append(`, ${skilljarUser.firstName}`)
   // 4. TODO: add user's first name to welcome message
  // i.e. "Welcome, Jason!"
  // OK to edit the HTML if you want and then write javascript here.

});

$("#hideFree").click(function(){
  // 5. TODO: Hide all free courses
  $(".coursebox-container").find(".free").parent().toggle();
});

// `https://portfolioapp2380.firebaseapp.com/`