- Published on
💻コードテスト

商品リンク
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"></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"></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>
CSS
/* ボタン */
.simple-btn a {
text-decoration: none;
color: inherit !important;
}
.simple-btn p {
margin: 0;
}
