JSFiddle - React, Tailwind, and code Playground

HackerEarth imitation.

by jshacker

HTML

<div class="topbar">
  <nav class="topnav">
    <a href="https://www.hackerearth.com/" class="logo">h</a>
    <div class="menu first">
      <a href="https://www.hackerearth.com/challenges/" class="menu-item"
        >challenges</a
      >
      <a href="https://www.hackerearth.com/problems/" class="menu-item"
        >problemset</a
      >
      <a class="menu-item">learn</a>
      <a class="menu-item">jobs</a>
      <a href="https://www.hackerearth.com/ama/" class="menu-item">ama</a>
    </div>
    <div class="menu second">
      <input type="text" placeholder="Search developers, problems etc." />
      <a class="menu-item">A</a>
      <a class="menu-item">M</a>
      |
      <a class="menu-item">Profile</a>
    </div>
  </nav>
</div>

<div class="challenge-cards">
  <div class="challenge-card">
    <h3 class="challenge-heading">
      First Challenge is what you need to solve.
    </h3>
  </div>
  <div class="challenge-card">
    <h3 class="challenge-heading">
      First Challenge is what you need to solve.
    </h3>
  </div>
  <div class="challenge-card">
    <h3 class="challenge-heading">
      First Challenge is what you need to solve.
    </h3>
  </div>
</div>

SCSS

$min-doc-width: 900px;

body {
  margin: 0;
  padding: 0;
  min-width: $min-doc-width;
  font-size: 12px;
}

$base-back-color: #323754;
.topbar {
  background-color: $base-back-color;
  /* height: 3em; */
  width: 100%;
  padding: 1em;
}
.topnav {
  width: 98%;
  margin: auto;
  height: 100%;
  color: white;
  display: flex;
  flex-wrap: no-wrap;
  flex-direction: row;
}

.logo {
  text-decoration: underline;
  color: white;
  font-size: 3em;
  line-height: 1em;
  position: relative;
  order: 0;
  margin-right: 0.3em;
}

.menu.first,
.menu.second {
  font-size: 1em;
  line-height: 3em;
  order: 1;
}

.menu.second {
  order: 2;
  margin-left: auto;
  padding-right: 1em;
}

.menu-item {
  text-transform: uppercase;
  font-weight: bold;
  margin: 0.5em;
  cursor: pointer;
  color: rgba(229, 231, 232, 0.75);
}

.menu-item:hover {
  color: white;
}

input[type="text"] {
  background-color: $base-back-color - #111111;
  border: thin solid $base-back-color + #111111;
  color: white;
  padding: 0.5em;
  font-size: 1.4em;
  border-radius: 0.5em;
}

.challenge-cards {
  height: fit-content;
  /* width: 90%; */
  /* margin: 5%; */

  display: flex;
}

.challenge-card {
  min-width: 198px;
  width: 20%;
  order: 0;
  margin: auto;
}

.challenge-heading {
  /* height: 1em; */
}

.ellipses {
  white-space: nowrap;
  text-overflow: ellipses;
}