JSFiddle - React, Tailwind, and code Playground

by Alex Cowan

HTML

<div class="top-bar">
  <div class="logo">
    <a href="#"><img src="https://lh3.googleusercontent.com/pw/AIL4fc-XRqbeJJ7PbU64ATvCvO19rFoWkQPEALzTtavqpUAmNLc3H0YzqmRSTxnw-sbXkK1phCIsXuxpwUPK5s-hwfukneZW1TYmJtWwxCykdr59P38Tkn0=w2400" alt="Logo"></a>
  </div>
  <div class="nav-list">
    <ul>
      <li><a href="#">Skills Assessment</a></li>
      <li><a href="#">Job Fit</a></li>
      <li><a href="#">Skills Builder</a></li>
      <li><a href="#">Interview Prep</a></li>
    </ul>
  </div>
  <div class="login">
    <div id="search-box">
      <input type="text" name="parts-search" placeholder="Search">
    </div>
    <div>
      <a href="#" id="loginButton" class="login-button">Login</a>
    </div>
  </div>
</div>
<div class="colored-bar">
  <h2>Job Fit</h2>
</div>
<div class="button-columns">
  <div class="column">
    <h2>Top 3 Positions</h2>
    <button>Consultant</button>
    <button>Internal Strategy</button>
    <button>Product Manager</button>
  </div>
  <div class="column">
    <h2>Bottom 3 Positions</h2>
    <button>Private Equity</button>
    <button>Investment Banker</button>
    <button>Software Engineer</button>
  </div>
</div>
<div class="progress-columns">
  <div class="progress-column">
    <div class="progress-bar">
      <div class="label-outside">Problem Solving</div>
      <div class="fill" style="width: 80%;"></div>
    </div>
    <div class="progress-bar">
      <div class="label-outside">Cross-functional Teamwork</div>
      <div class="fill" style="width: 65%;"></div>
    </div>
    <div class="progress-bar">
      <div class="label-outside">Strategic Communication</div>
      <div class="fill" style="width: 50%;"></div>
    </div>
  </div>
  <div class="progress-column">
    <div class="progress-bar">
      <div class="label-outside">Work-Life Balance</div>
      <div class="fill" style="width: 80%;"></div>
    </div>
    <div class="progress-bar">
      <div class="label-outside">Designing Software</div>
      <div class="fill" style="width:...

CSS

* {
  font-family: Georgia;
}

.nav-list {
  width: 100%;
  padding-left: 20px;
}
.nav-list ul {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.nav-list a {
  padding: 8px;
  text-decoration: none;
}
.logo img {
  max-height: 74px;
}
.login {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
#search-box input[type="text"] {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 160px;
  margin-right: 20px;
}
#search-box input[type="text"]:focus {
  border-color: #007BFF;
  outline: none;
  box-shadow: 0 0 5px #007BFF;
}
.login a, .nav-list li, .nav-list a {
  background-color: #FFFFFF;
  font-weight: bold;
  font-size: 110%;
  color: #232D4B;
  padding: 10px;
}
.top-bar {
  color: #FFFFFF;
  height: 100px;
  margin: 0px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  align-items: center;
}
.colored-bar {
  background-color: #E57200;
  color: white;
  
  /* Color of the colored bar */
  text-align: center;
  padding: 10px 0;
}
 h2 {
     font-size: 18px;
     margin-bottom: 10px;
}
.colored-bar h2 {
  color: white;
  
  /* Text color for the title */
  margin: 0;
  font-size: 200%;
}
 .image-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px;
     background-color: #ffffff;
     
    /* Background color for the image container */
}
 .image-container img {
     width: 30%;
     
    /* Adjust the width of the images as needed */
     height: auto;
     
    /* Maintain aspect ratio */
}


 .title {
     background-color: #FFFFFF;
     
    /* Color of the colored bar */
     text-align: center;
     padding: 10px 0;
}
 .title h2 {
     color: #232D4B;
     
    /* Text color for the title */
     margin: 0;
     font-size: 200%;
     text-decoration: underline;
}
 .image-container2 {
     display: flex;
     justify-content: center;
     padding: 20px;
    ...