JSFiddle - React, Tailwind, and code Playground

by Joseph Perez

HTML

<header>
  <div class="usf-icon">
  </div>
  <span>University of <br>San Francisco</span>
  <span>myUSF</span>
</header>

<body>
  <nav>
    <ul>
      <li><a>Home</a></li>
      <li><a>Search Jobs</a></li>
      <li><a>Create Account</a></li>
      <li><a>Login In</a></li>
      <li><a>Help</a></li>
    </ul>
    <hr>
    <ul>
      <li><a>Our Mission</a></li>
      <li><a>Diversity Statement</a></li>
      <li><a>Nondiscrimination Statement</a></li>
      <li><a>USF History</a></li>
      <li><a>Benefits Overview</a></li>
      <li><a>Background Check Policy</a></li>
      <li><a>Human Resources</a></li>
      <li><a>USF Temporary Positions</a></li>
    </ul>
    
  </nav>
  
  <div class="content-container">
    <span id="position-title">Web Assistant</span>
    <br><br>
    <span class="page-bookmark-print"><a href="">Bookmark this Posting</a> | <a href="">Print Preview</a> |</span>
  
    <div class="content-instructions-box">
      <span>Please see Special Instructions for more details</span>
      <br>
      <p>
      Please email a cover letter and your resume to apply.<br>Contact/hiring manager: Joseph Weaver<br>Email: [email protected]<br>Interview hours: 10 a.m.-4 p.m., Monday-Friday
      </p>
    </div>
    
    <div class="content-header">
      <span>Posting Details</span>
    </div>
    
    <div class="content">
      <span>Position Information</span>

    <table>
    <tbody>
      <tr>
        <td>Job Title</td>
        <td>Web Assistant</td>
      </tr>
      <tr>
        <td>Department</td>
        <td>Web and Digital Communications</td>
      </tr>
      <tr>
        <td>Job Location</td>
        <td>Main Campus - Hilltopt</td>
      </tr>      
      <tr>
        <td>Job Type</td>
        <td>Student Hourly</td>
      </tr>      
      <tr>
        <td>Salary Range</td>
        <td>$13.25/hour</td>
      </tr>      
      <tr>
        <td>Hours per week</td>
        <td>10-20</td>
      </tr>      
      <tr>
        <td>Schedule...

CSS

.*{
  margin: 0;
  padding: 0;
}

header{
  height: 30px;
  width: 100%;
  background-color: green;
  padding: 40px;
}

.usf-icon{
    border: 5px dashed gold;
    float: left;
    height: 50px;
    margin-top: -20px;
    width: 50px;

    -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

header span{
  color: white;
  display: inline-block;
  float: left;
  font-size: 18px;
  padding-left: 10px;
  text-transform: uppercase;
}

header span:first-of-type{
  padding-left: 30px;
  padding-right: 15px;
  border-right: 1px solid white;
}

body{
  background-color: white;
  margin: 0;
}

nav{
  float: left;
  margin: 30px 20px 0 10%;
  max-width: 15%;
}

nav a{
  color: #290000;
  font-size: 16px; 
}

nav ul{ 
  background-color: #ededed;
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li{
  border-bottom: 1px solid #c2c2c2;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 100%;
  text-align: right; 
}

.content-container{
  float: left;
  margin-top: 30px;
  width: 50%;
}

.content-container span{
  display: inline-block;
  font-size: 18px;
  width: 100%;
}

.page-bookmark-print a{
  color: #0d4d00;
  font-weight: bold;
}

.page-bookmark-print a:hover{
  text-decoration: none;
  color: #00244d
}

.content-instructions-box{
  border: 1px solid #c2c2c2;
  padding: 5px;
  width: 100%;
}

.content-instructions-box span{
  font-size: 18px;
  font-weight: bold;
}

.content-header{
  border-bottom: 1px solid #c2c2c2;
  padding: 20px 0px 10px 0px;
}

.content-header span{
  font-size: 20px;
  font-weight: bold;
}

.content{
  padding: 20px 0px 0px 5px;
}

.content span{
  font-size: 18px;
  font-weight: bold;
}

.content  table ul{
  margin: 0;
  padding-left: 30px;
}

.content table td{
  background-color: #efefef;
  padding: 10px 5px;
}

.content table td:first-of-type{
    background-color: #ddd;
}

.supplemental-questions, .applicant-documents{
 ...

JavaScript

/* 10:42 Started
		11:15 finished up to "Posting Details"
	11:32 finished table
  11:41 fnished content div
*/