JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<nav>
  <svg viewBox="0 0 32 32" width="16" height="16" class="back">
  <path d="M 4.22 14.03 C 3.53 14.15 3 14.77 3 15.5 C 3 16.25 3.53 16.86 4.24 16.98 L 4.02 17.19 L 14.36 27.51 C 14.65 27.81 15.05 28 15.5 28 C 16.33 28 17 27.33 17 26.5 C 17 26.05 16.8 25.65 16.49 25.38 L 16.55 25.32 L 8.22 17 L 27.51 17 C 28.33 17 29 16.33 29 15.5 C 29 14.67 28.33 14 27.51 14 L 8.2 14 L 16.55 5.66 C 16.81 5.34 17 4.94 17 4.5 C 17 3.68 16.33 3 15.5 3 C 15.06 3 14.66 3.2 14.39 3.5 L 14.36 3.47 L 4 13.81 Z"></path>
</svg>
  <svg viewBox="0 0 32 32" width="16" height="16" class="forward">
  <path d="M 27.78 14.03 C 28.47 14.15 29 14.77 29 15.5 C 29 16.25 28.47 16.86 27.76 16.98 L 27.98 17.19 L 17.64 27.51 C 17.35 27.81 16.95 28 16.5 28 C 15.67 28 15 27.33 15 26.5 C 15 26.05 15.2 25.65 15.51 25.38 L 15.45 25.32 L 23.78 17 L 4.49 17 C 3.67 17 3 16.33 3 15.5 C 3 14.67 3.67 14 4.49 14 L 23.8 14 L 15.45 5.66 C 15.19 5.34 15 4.94 15 4.5 C 15 3.68 15.67 3 16.5 3 C 16.94 3 17.34 3.2 17.61 3.5 L 17.64 3.47 L 28 13.81 Z"></path>
</svg>
  <svg viewBox="0 0 32 32" width="16" height="16" class="reload">
<path d="M 25.1 20.15 L 25.08 20.14 C 23.51 23.59 20.04 26 16 26 C 10.48 26 6 21.52 6 16 C 6 10.48 10.48 6 16 6 C 19.02 6 21.72 7.34 23.55 9.45 L 23.55 9.45 L 19 14 L 25.8 14 L 28.83 14 L 30 14 L 30 3 L 25.67 7.33 C 23.3 4.67 19.85 3 16 3 C 8.82 3 3 8.82 3 16 C 3 23.18 8.82 29 16 29 C 21.27 29 25.8 25.86 27.84 21.34 C 27.96 21.13 28.03 20.88 28.03 20.61 C 28.03 19.78 27.36 19.11 26.53 19.11 C 25.87 19.11 25.3 19.55 25.1 20.15 Z"></path>
</svg>

  <div class="input">
    <div class="pre">https://www.google.com/</div>
    <input type="text" value="abc">
  </div>

</nav>

SCSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: white;
  margin: 10px 0;
}

nav {
  height: 36px;
  background: rgb(242, 242, 242);
  display: flex;
  align-items: center;
  padding: 0 6px;
  border-top: .5px solid lighten(rgb(141, 142, 143), 25%);
  border-bottom: .5px solid lighten(rgb(141, 142, 143), 30%);
  /* box-shadow: -5px 0 0 rgb(176, 174, 176); */
}

.back,
.forward,
.reload {
  fill: rgb(109, 109, 109);
  padding: 4px;
  transition: background .2s;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  margin: 0 3px;
  &:hover {
    background: rgb(223, 223, 223);
  }
  &:active {
    // guess
    background: rgb(215, 215, 215);
  }
}

.input {
  height: 26px;
  border: 0.5px solid rgb(183, 183, 183);
  border-radius: 3px;
  background: white;
  margin-left: 6px;
  &:focus {
    border-color: rgb(126, 170, 213);
    outline: none;
  }
  font-family: Source Sans Pro;
  font-size: 14px;
  flex: 1;
}

.input {
  display: flex;
  .pre {
    left: 0;
    top: 0;
    padding: 2px 4px 2px 8px;
  background: rgb(242, 242, 242);
  height: 24px;
  border-radius: 3px;
  }
  input {
    border: none;
    font-family: inherit;
    font-size: inherit;
  height: 24px;
    padding-left: 2px;
    &:focus {
      outline: none;
    }
  }
}