templatetemplate

HOME >
Template

ベースは Tailwind を使い、複雑なデザインは Emotion を使う。極力 SCSS は使わない。

Slider

Tailwind 版

レスポンシブは、max-md: をつける

Emotion 版

Emotionのインポートと、css関数を使用してCSSを定義。

Google Map

Google Map API は不要。src の中に、GoogleMap の埋め込みコードのURL の部分だけ貼り付ける

TextSplit

位置（offset）、繰り返し（repeat）を指定できる

テキストを分割して順に表示する

Btn

Modal

ScrollAnim

位置（offset）、遅延（1）、方向（up,down,left,right）を指定できる

スクロールアニメーションで表示されるテキスト

TabSwicher

Tab 1

Tab 2
Tab 3

Content of Tab 1

Accordion

Content for Accordion 1 goes here.

Content for Accordion 2 goes here.

Content for Accordion 3 goes here.

Toggle

Content for Toggle 1 goes here.

Content for Toggle 2 goes here.

Content for Toggle 3 goes here.

Table

Icon

デフォルト

arrow

check

circle-black

mail

than-thin

width

w-200

w-400

w-50p(50%)

border-radius

rounded-20

rounded-40