JSFiddle - React, Tailwind, and code Playground

by takumi091111

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/ress.min.css">
<header class="o-header">
  <img class="o-header__logo" src="http://placehold.jp/320x53.png" alt="logo">
  <div class="o-header__pc">
    <ul class="o-header__menu">
      <li class="o-header__menu-item" data-underline="true">
        <a href="#">サービスの特徴</a>
      </li>
      <li class="o-header__menu-item" data-underline="true">
        <a href="#">連携ツール</a>
      </li>
      <li class="o-header__menu-item" data-underline="true">
        <a href="#">拡張機能</a>
      </li>
      <li class="o-header__menu-item" data-underline="true">
        <a href="#">お問い合わせ</a>
      </li>
      <li class="o-header__menu-item">
        <span>マニュアル</span>
        <div class="o-header__sub-menu">
          <ul class="o-header__sub-menu-inner">
            <li class="o-header__menu-item" data-underline="true">
              マニュアル
            </li>
            <li class="o-header__menu-item" data-underline="true">
              マニュアル
            </li>
            <li class="o-header__menu-item" data-underline="true">
              マニュアル
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <button>ログイン</button>
    <button>申し込む</button>
  </div>
  <div class="o-header__mobile">
    <p>Mobile</p>
  </div>
</header>

SCSS

body {
  margin: 0;
}

.o-header {
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  box-shadow: 0px 0px 8px 0px rgba(63, 63, 63, 0.18);
  @media screen and (max-width: 768px) {
    height: 50px;
  }
  @media screen and (max-width: 1024px) {
    height: 63px;
    padding: 13px 15px;
  }
  &__logo {
    max-width: 222px;
    width: 100%;
    @media screen and (max-width: 768px) {
      max-width: 150px;
    }
  }
  &__pc {
    display: grid;
    grid-auto-flow: column;
    column-gap: 25px;
    @media screen and (max-width: 1024px) {
      display: none;
    }
  }
  &__mobile {
    display: none;
    @media screen and (max-width: 1024px) {
      display: block;
    }
  }
  &__menu {
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    column-gap: 20px;
    list-style: none;
  }
  &__menu-item {
    width: 100%;
    height: 100%;
    position: relative;
    color: #333;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    &[data-underline="true"]::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -6px;
      width: 100%;
      height: 3px;
      background-color: #FFD1CE;
      transform: scale(0, 1);
      transform-origin: center top;
      transition: transform 0.3s;
    }
    &[data-underline="true"]:hover::after {
      transform: scale(1, 1);
    }
    & > a {
      display: inline-block;
      width: 100%;
      height: 100%;
      color: #333;
      text-decoration: none;
      &:hover {
        color: #333;
      }
    }
  }
  &__sub-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 3px);
    background-color: #FFF;
    border-radius: 4px;
    box-shadow: 0 0 8px 0 rgba(63, 63, 63, 0.2);
    opacity: 0;
    max-height: 0;
    transition: opacity 0.3s, max-height 0.5s;
    overflow: hidden;
    z-index: 1;
  }
  &__sub-menu-inner {
    display: grid;
    grid-template-columns: max-content;
   ...