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