JSFiddle - React, Tailwind, and code Playground

by takumi091111

HTML

<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<div class="p-setting">
  <header class="m-header">
    <img src="https://placehold.jp/32x32.png">
    <p>Test</p>
  </header>
  <main>
    <h1 class="a-heading" data-level="1">設定</h1>
    <form action="">
      <h2 class="a-heading" data-level="2">スクリーンショット画像の保存形式</h2>
      <div class="m-input-with-label">
        <input type="radio">
        <label for="">jpeg</label>
      </div>
      <div class="m-input-with-label">
        <input type="radio">
        <label for="">png</label>
      </div>
    </form>    
  </main>
</div>

SCSS

body {
  font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #333333;
  background-color: #FFE5DB;
  font-size: 15px;
}

.p-setting {
  display: grid;
  grid-template-rows: repeat(2, auto);
  row-gap: 25px;
  max-width: 480px;
  background-color: #FFF;
  border-radius: 6px;
  padding: 30px 30px 40px;
  margin: 80px auto;
  box-sizing: border-box;
  box-shadow: 3px 3px 6px 0px rgb(186 132 112 / 14%);
}

.m-header {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: 1fr;
  column-gap: 8px;
  align-items: flex-end;
  justify-content: left;
}

.m-input-with-label {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: 1fr;
  column-gap: 8px;
  align-items: center;
  justify-content: left;
  padding: 1px 0;
}