JSFiddle - React, Tailwind, and code Playground

by amelice

HTML

<body class="page">
<div class="page-detailed-ticket page__bnsf-page i-bem">
  <div class="wrapper">
    <header class="header header_simple">
      <div class="container container_theme_header-simple">
        <a class="button button_type_link button_theme_header button__control back-history-button i-bem">
          Назад
        </a>
        <div class="header__title">Детали перелёта</div>
        <a class="button button_type_link button_theme_header button__control modal-opener i-bem">
          Правила
        </a>
      </div>
    </header>
    <div class="time-line">
    </div>
  </div>
</div>

</body>

CSS

.page {
    font-size: 100%;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    overflow-x: hidden;
}
.wrapper {
    min-height: 100vh;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    background: wheat;
}
.header {
    height: 60px;
}
.container {
    margin: 0 auto;
    padding: 0 10px;
    min-width: 300px;
    -ms-flex: 1;
    flex: 1;
}
.container_theme_header-simple {
    padding: 0 10px;
    height: 59px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    left: 0;
    right: 0;
    position: fixed;
    position: sticky;
    background: #3b3b3b;
    z-index: 21;
}

.button {
    text-align: center;
    border: none;
    outline: none;
    text-decoration: none;
}
.button_theme_header {
    font-size: 14px;
    padding: 10px;
    color: #3ca6f4;
    background: transparent;
}
.button_type_link {
    text-decoration: none;
}
.header__title {
    font-size: 18px;
    color: #fff;
}
.time-line {
  height: 3000px;
}