JSFiddle - React, Tailwind, and code Playground

by gentou

HTML

<section class="player">
  <header>
    <div>
      <button class="back"></button>
      <h1>STATIONS</h1>
      <button class="close">
      <img src="https://github.com/netguru/junior-frontend-recruitment-task/blob/master/imgs/switch.png?raw=true" alt="" />
      </button>
    </div>

  </header>
</section>

SCSS

@mixin centerer($horizontal: true, $vertical: true) {
  position: absolute;
  @if ($horizontal and $vertical) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  @else if ($horizontal) {
    left: 50%;
    transform: translate(-50%, 0);
  }
  @else if ($vertical) {
    top: 50%;
    transform: translate(0, -50%);
  }
}

$header-color: #EDAD61;
$body-color: #2E2E38;
$font-color: #969FB0;
$header-font-color: #fff;
$font-size: 36px;

h1{
  font-weight: bold;
  line-height: 0.545;
  font-family: "HelveticaNeue";
  font-size: $font-size;
  color: $header-font-color;
  display: inline-block;
}

header {
  border-top-left-radius: 44px;
  border-top-right-radius: 44px;
  text-align: center;
  height: 164px;
  background-color: $header-color;
  @include centerer($horizontal: true, $vertical: true);
}



.player {
  position: relative;
  width: 640px;
  height: 1010px;
  &>*{
    width: 100%;
  }
  button {
    background-color: transparent;
    border: 0;
    padding: 0;
  }
}