JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="masthead">
  <div class="container">
    <nav class="nav">
      <a class="nav-item " href="/">Home</a>
      <a class="nav-item" href="/tasks">Before Auth Menu</a>
      <a class="nav-item" href="/signout">
  Sign Out
</a>
      <a class="nav-item" href="/profile">
  [email protected]
</a>
      <a class="nav-item active" href="/tasks">After Auth Menu</a>
    </nav>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-sm">
      <div class="alert alert-success">
        <p>Created Tasks successfully.</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12 main">
      <div class="row">
        <div class="col-sm-11">
          <h2>Tasks</h2>
        </div>
        <div class="col-sm-1">
          <a class="btn btn-success btn-sm" href="/tasks/new">New</a>
        </div>
      </div>
      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Name</th>
              <th>Description</th>
              <th>Done</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>asdfasdf</td>
              <td>sadfasdf</td>
              <td>0</td>
              <td>
                <span>
            <a href="/tasks/1" class="btn btn-primary btn-sm">read</a>
            <a href="/tasks/1/edit" class="btn btn-success btn-sm">edit</a>
            <a...

CSS

/*
 * Globals
 */

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #555;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin-top: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  color: #333;
}

/*
 * Override Bootstrap's default container.
 */

@media (min-width: 1200px) {
  .container {
    width: 970px;
  }
}

/*
 * Masthead for nav
 */

.masthead {
  background-color: #f4994b;
  -webkit-box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.1);
}

/* Nav links */

.nav-item {
  position: relative;
  display: inline-block;
  padding: 10px;
  font-weight: 500;
  color: #ffe4cd;
}

.nav-item:hover,
.nav-item:focus {
  color: #fff;
  text-decoration: none;
}

/* Active state gets a caret at the bottom */

.nav .active {
  color: #fff;
}

.nav .active:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -5px;
  vertical-align: middle;
  content: " ";
  border-right: 5px solid transparent;
  border-bottom: 5px solid;
  border-left: 5px solid transparent;
}

.main {
  padding-top: 20px;
}

#logo {
  background-color: #f4994b;
  background-image: url(/dist/images/logo.png);
  background-size: contain;
  width: 200px;
  height: 278px;
}

/* Hide logo in small screens */

@media (max-width: 767px) {
  #logo {
    display: none;
  }
}

.table td,
.table th {
  vertical-align: middle;
}

.alert {
  margin-top: 1em;
}

.alert p {
  margin-top: 0;
  margin-bottom: 0;
}

/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJtYWluLmJ1bmRsZS5jc3MiLCJzb3VyY2VSb290IjoiIn0=*/

JavaScript

/* Auth 관련 메뉴 (Sign Out, [email protected])을 네비게이션의 오른쪽에 출력하라
제한조건 : 템플릿은 class, id추가 외에는 변형하면 안됨
제한조건 : 새로운 메뉴가 템플릿의 Auth 메뉴 앞뒤로 추가될수 있어야한다 (edited) */