Tailwind CSSの入門に！コピペで簡単に利用できるUIコンポーネントのまとめ
Post on:2021年10月20日
sponsors
Webサイトやスマホアプリで見かけるUIコンポーネントをTailwind CSSで実装されたコンポーネント集を紹介します。
Tailwind CSSを初めて触れる人にも簡単で、デフォルト構成で機能し、HTMLをコピペするだけで簡単に使用できます。
他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。
Flowriftは、Tailwind CSSで実装されたUIコンポーネントのライブラリです。通常のHTMLに、Tailwind CSSのデフォルト構成で機能します。コンポーネントを組み合わせて、ページレイアウトを作成することもできます。
ライセンスが明記されていなかったので、作者様にメールで尋ねたところ、Flowrift Code Licenseが付与されました。独自ライセンスで、生成されたコードは商用プロジェクトでもコピー・変更・配布して使用できます。
※アプリのソースコードではありません。
-
- 成長するライブラリ
- UIコンポーネントとコレクションが増え続けるライブラリ。
-
- レスポンシブのプレビュー
- プレビュー時にハンドルをつかんでサイズ変更できます。
-
- コード表示
- 上部のボタンをクリックするだけで、コードが表示されます。
-
- コピーも簡単
- コピーボタンを押すだけで、クリップボードにコピーされます。
-
- カテゴリ分け
- すべてのUIコンポーネントはカテゴリ分けされています。
-
- キーボードショートカット
- 操作を便利にするショートカットも用意。
-
- ダークモード
- ダークモードにも対応しています。
FlowriftにコレクションされているUIコンポーネントを見てましょう。
各コンポーネントは、20のカテゴリに分けられています。
Tailwind CSSで実装された: Blog
まずは、ブログ記事のコンポーネント。
各コンポーネントをクリックすると、プレビューになります。
上部のコードボタンをクリックすると、コードが表示されます。バニラHTMLで、Tailwind CSSのデフォルト構成で機能します。
カテゴリには、ヘッダ・フッタ・ヒーローをはじめ、ギャラリー・価格表・フォーム・FAQ・ニュースレター・特徴・チームなど、Webページでよく使用されるUIコンポーネントが揃っています。
Tailwind CSSで実装された: Call to Action
Flowriftで使用されている画像はUnsplashで、アイコンはHero Iconsです。どちらも商用利用無料です。
他のカテゴリも見てましょう。
Tailwind CSSで実装された: FAQ
Tailwind CSSで実装された: Features
Tailwind CSSで実装された: Footer
Tailwind CSSで実装された: Form
Tailwind CSSで実装された: Gallery
Tailwind CSSで実装された: Hero
Tailwind CSSで実装された: Pricing
Tailwind CSSで実装された: Testimonials
sponsors
