コードテスト

2022.12.02

商品リンク

2 カラム

カラム1

カラム2

<div className="sm:flex my-4">
  <div className="sm:basis-1/2">カラム1</div>
  <div className="sm:basis-1/2">カラム2</div>
</div>

人物会話

ここに説明を入れる

<div className="sm:flex my-4 fuki kaiwa">
  <div className="sm:basis-1/6">![ALT](画像)</div>
  <div className="sm:basis-5/6 ring-2 ring-slate-500/60 px-4 py-4 rounded-md sm:ml-4 sm:my-4">
    ここに説明を入れる
  </div>
</div>

左向き

ここに説明を入れる

吹き出し風カラム

ここに説明を入れる。ここに説明を入れる。ここに説明を入れる。ここに説明を入れる。

<div className="sm:flex my-4">
  <div className="sm:basis-3/5">![ALT](画像)</div>
  <div className="sm:basis-2/5 ring-2 ring-slate-500/60 px-4 py-4 rounded-md sm:ml-4 sm:my-4">
    ここに説明を入れる
  </div>
</div>

左向き

ここに説明を入れる

タイトル付きボックス

おはようございます。

こんにちは。

こんばんは。

<div className="my-4 border-solid border-2 border-cyan-400">
  <div className="bg-cyan-400 px-4 py-2">
    <p className="m-0 text-slate-800 font-bold text-lg">おはようございます。</p>
  </div>
  <div className="px-4">
    <p>おはようございます。</p>
    <p>こんにちは。</p>
    <p>こんばんは。</p>
  </div>
</div>

ボタン

<div
  className="duration-300 hover:opacity-80 rounded-3xl bg-green-700 px-4 py-2 mx-1 h-fit my-1 w-fit text-white simple-btn"
>
  [ボタン](URL)
</div>

/* ボタン */
.simple-btn a {
  text-decoration: none;
  color: inherit !important;
}

.simple-btn p {
  margin: 0;
}