Tailwind CSSの入門に!コピペで簡単に利用できるUIコンポーネントのまとめ

Webサイトやスマホアプリで見かけるUIコンポーネントをTailwind CSSで実装されたコンポーネント集を紹介します。

Tailwind CSSを初めて触れる人にも簡単で、デフォルト構成で機能し、HTMLをコピペするだけで簡単に使用できます。

Tailwind CSSで実装されたUIコンポーネント集 -Flowrift

Flowrift
Flowrift -GitHub

他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。

Flowriftは、Tailwind CSSで実装されたUIコンポーネントのライブラリです。通常のHTMLに、Tailwind CSSのデフォルト構成で機能します。コンポーネントを組み合わせて、ページレイアウトを作成することもできます。

サイトのキャプチャ

Flowrift

ライセンスが明記されていなかったので、作者様にメールで尋ねたところ、Flowrift Code Licenseが付与されました。独自ライセンスで、生成されたコードは商用プロジェクトでもコピー・変更・配布して使用できます。
※アプリのソースコードではありません。

Flowriftの特徴

Flowriftの特徴

  • 成長するライブラリ
    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

top of page

©2021 coliss