JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="ag-jobs-manager">
  <h1 class="ag-boxed-header"><span>JOB TITLE MANAGER</span></h1>
  <p class="ag-large-paragraph">Manage your organization's job title for users. Add, edit, and remove job titles. Add Job categories to group mutiple job titles together for training and permission purposes.</p>
  <ul class="big-tabs">
    <li class="active">Job Titles</li><li>Work Comp Codes</li>
  </ul>
  <ul class="view-tabs">
    <li class="active"><img...

CSS

/* google fonts */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500;700&display=swap');

/*

some standard styling for the page so it is white with 100 height

*/

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0px;
}

/* 

end page standard styling 

*/

:root {
  /* colors */
  --ag-blue: #356DB0;
  --ag-dark-blue: #124077;
  --ag-green: #009f38;
  --ag-black: #000;
  --ag-warning: tomato;
  --ag-white: #ffffff;
  --ag-light-gray: #ccc;
  --ag-medium-gray: #999;
  
  /* fonts */
  --ag-data-font: helvetica, serif;
  --ag-header-font: 'Roboto', sans-serif;
  
}

/* start agrisphere standardized styles */

/* header styles */

.ag-jobs-manager{
  max-width: 1400px;
  margin: auto;
}
h1.ag-boxed-header{
    position: relative;
    padding: 9px;
    border: solid 1px #666;
    box-shadow: 1px 5px 4px rgb(0 0 0 / 41%);
    margin-left: 50px;
    line-height: 24px;
    font-size: 24px;
    min-height: 20px;
    font-weight: 300;
    font-family: var(--ag-header-font);
    color: var(--ag-green);
    text-transform: uppercase;
    margin-right: auto;
    margin-left: auto;
    margin-top: 50px;
    margin-bottom: 20px;
    word-wrap: break-word;
}
.ag-large-paragraph{
   font-family: var(--ag-data-font);
   margin: auto;
   margin-top: 10px;
   margin-bottom: 15px;
   font-size: 19px;
   font-weight: normal;
}
h1.ag-boxed-header>span{
  color: var(--ag-black);
  text-transform: none;
}
h1.ag-boxed-header:before {
    content: "";
    display: block;
    background-image:...