JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<!-- ヘッダー -->
  <div class="container">
    <header class="site-header">
      <div class="logo">
        <p>英会話、TOEIC対策</p>
        <h1><a href=""><img src="img/logo.png" alt="BRIDGE英会話スクール"></a></h1>
      </div>
  
      <div class="header-utility">
        <!-- 上部 -->
        <div class="header-utility-menu">
          <a href="#">サイトマップ</a>
          <a href="#">よくあるご質問</a>
          <a href="#" class="header-utility-login">受講生ログイン</a>
        </div>
  
        <!-- 下部 -->
        <div class="header-utility-contact">
          <p class="header-utility-tel">
            <span>お問い合わせ</span>
            <img src="img/freecall.png" alt="フリーコール">
            <a href="tel:0120-123-456">0120-123-456</a>
          </p>
          <a href="#" class="header-utility-request">資料請求はこちら</a>
          <a href="#" class="header-utility-free-lesson">無料体験レッスン申込み</a>
        </div>
      </div>
    </header>
  </div>

SCSS

@charset 'utf-8';

// 色
$primary: #2A3897;
$accent: #F18F2E;
$base: #fff;
$text : #555;
$text-accent : #000;

// フォントサイズ
$fz-s: .875rem;  // 14px
$fz-xs: .75rem;  // 12px
$fz-n: 1rem;     // 16px
$fz-l: 1.125rem; // 18px

// メディアクエリ
// @include tablet{ スタイル }

@mixin tablet {
  @media (max-width: 767px){
    @content;
  }
}
@mixin sp {
  @media (max-width: 575px){
    @content;
  }
}

// 残らないコメント
/* 残るコメント */

// 共通スタイル
* {
  box-sizing: border-box;
}
body {
  font-size: 16px;
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Open Sans', YuGothic, '游ゴシック体', '游ゴシック Medium', 'Yu Gothic Medium', 'Yu Gothic', Meiryo, sans-serif;
  color: $text;
}

img {
  vertical-align: top;
}

.container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.heading {
  font-size: 1.2rem;
  font-weight: bold;
  color: $primary;

  &-subtext {
    display: block;
    font-size: $fz-s;
    font-weight: normal;
    color: $text-accent;
    font-style: italic;
    letter-spacing: .08rem;
  }
}

.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

.btn-more {
  border: 1px solid $primary;
  color: $primary;
  display: inline-block;
  font-size: $fz-s;
  text-align: center;
  text-decoration: none;
  padding: 3px 20px;

  &:after {
    content: '>'; 
    margin-left: 5px;
  }
}

.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}
// .justify-start {
//   justify-content: flex-start;
// }
// .justify-end {
//   justify-content: flex-end;
// }

.align-start {
  align-items: flex-start;
}


// ヘッダー
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  p {
    font-size: .75rem;
  }
}

.header-utility {
  &-menu {
    text-align: right;
    margin-bottom: 10px;

    a + a {
      margin-left: 20px;
    }
  
    a {
      text-decoration: none;
      font-size: $fz-s;
  
      &:not(:last-child) {
        color: $text;
      }
    }
  }

 ...