Tailwind CSSの制作者による

Tailwind CSSで作成された美しいUIコンポーネント。

HTML
React
Vue

500以上のプロがデザインした、完全にレスポンシブで、専門的に作成されたコンポーネントの例をTailwindプロジェクトにドロップして、心ゆくまでカスタマイズできます。

500以上のコンポーネント

アクセシビリティのベストプラクティスに準拠し、カスタマイズが容易な、美しくデザインされ、専門的に作成されたコンポーネント。

React、Vue、およびHTML

Headless UIによって駆動されるReactおよびVueのインタラクティブな例と、必要なJSを自分で記述したい場合はプレーンなHTML。

完全にレスポンシブ

すべての例は完全にレスポンシブであり、あらゆる画面サイズで見栄えがするように慎重に設計および実装されています。

マーケティング

ヒーロー、機能セクション、ニュースレター登録フォームなど、美しいマーケティングWebサイトを構築するために必要なものがすべて揃っています。

ページセクション

要素

フィードバック

ページの例

  • ランディングページ

    4つの例

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • 価格ページ

    3つの例

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • 会社概要ページ

    3つの例

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

アプリケーションUI

フォームレイアウト、テーブル、ダイアログなど、美しいレスポンシブWebアプリケーションを構築するために必要なものがすべて揃っています。

アプリケーションシェル

見出し

  • ページ見出し

    13個のコンポーネント

  • カード見出し

    6個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • セクション見出し

    10個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

データ表示

  • 説明リスト

    7個のコンポーネント

  • 統計

    5個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • カレンダー

    8個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

リスト

  • 積み重ねられたリスト

    17個のコンポーネント

  • テーブル

    20個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • グリッドリスト

    7個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • フィード

    3個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

フォーム

  • フォームレイアウト

    5個のコンポーネント

  • 入力グループ

    21個のコンポーネント

  • 選択メニュー

    7個のコンポーネント

  • サインインと登録

    5個のコンポーネント

  • テキストエリア

    5個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • ラジオグループ

    12個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • チェックボックス

    4個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • トグル

    5個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • アクションパネル

    8個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • コンボボックス

    5個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

フィードバック

  • アラート

    6個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • 空の状態

    6個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

ナビゲーション

  • ナビバー

    11個のコンポーネント

  • ページネーション

    3個のコンポーネント

  • タブ

    9個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • 垂直ナビゲーション

    6個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • サイドバーナビゲーション

    5個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • パンくずリスト

    4個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • ステップ

    8個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • コマンドパレット

    9個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

オーバーレイ

要素

  • アバター

    11個のコンポーネント

  • バッジ

    18個のコンポーネント

  • ドロップダウン

    5個のコンポーネント

  • ボタン

    10個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • ボタン グループ

    5個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

レイアウト

  • コンテナ

    5個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • パネル

    10個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • リストコンテナ

    7個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • メディアオブジェクト

    8個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • 区切り線

    8個のコンポーネント

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

ページの例

  • ホーム画面

    2つの例

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • 詳細画面

    2つの例

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • 設定画面

    2つの例

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

Eコマース

チェックアウトフォーム、ショッピングカート、製品ビューなど、次世代のeコマースフロントエンドを構築するために必要なものがすべて揃っています。

コンポーネント

ページの例

  • ストアフロントページ

    4つの例

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • 製品ページ

    5つの例

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • カテゴリページ

    5つの例

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • ショッピングカートページ

    3つの例

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • チェックアウトページ

    5つの例

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • 注文詳細ページ

    3つの例

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

  • 注文履歴ページ

    5つの例

    PNGプレビューのみ、HTMLを入手するにはアップグレードしてください。

価格

一度購入すれば、永久に使用できます。

すべてのコンポーネントパッケージには、生涯アクセス、無料アップデート、およびReact、Vue、およびプレーンHTMLでの例が含まれています。

オールアクセスを入手

オールアクセスを入手

$299

1回払い
税別

アプリケーションUI、マーケティング、eコマースコンポーネント、およびサイトテンプレートすべてへの生涯アクセスを、1回限りの購入で入手してください。

オールアクセスの特徴

  • 500以上のコンポーネント — 美しいアプリケーションUI、マーケティングサイト、eコマースストアなどを構築するために必要なものすべて。

  • すべてのサイトテンプレート — ReactやNext.jsなどの最新テクノロジーを使用して構築された、美しくデザインされ、専門的に作成されたウェブサイトテンプレート。

  • 生涯アクセス — 現在のすべてに即座にアクセスできるだけでなく、今後追加される新しいコンポーネントとテンプレートにもアクセスできます。

チームで利用可能 — すべてのコンポーネントとテンプレート、および将来のアップデートにチーム全体でアクセスできます。

  • $149税別

    ヒーロー、機能セクション、ニュースレター登録フォームなど、美しいマーケティングウェブサイトを構築するために必要なすべてのコンポーネント。

  • $149税別

    フォームレイアウト、テーブル、ダイアログなど、美しいレスポンシブWebアプリケーションを構築するために必要なすべてのコンポーネント。

  • $149税別

    チェックアウトフォーム、ショッピングカート、製品ビューなど、次世代のeコマースフロントエンドを構築するために必要なすべてのコンポーネント。

お客様の声

TailwindとTailwind UIのおかげで、フロントエンド作業が劇的にスピードアップしています。現時点では、Tailwind UIは間違いなく私が今まで購入した中で最も高いROIのデジタル資産です。

Ben Barbersmith@benbarbersmith

よくある質問

知っておくべきことすべて

一般

「生涯アクセス」とは具体的にどういう意味ですか?

Tailwind UI製品は 1回限りの購入であり、定期的なサブスクリプションはありません。Tailwind UI製品を購入すると、その製品のすべてのコンテンツに永久にアクセスできます。

「無料アップデート」には何が含まれますか?

Tailwind UI製品を購入すると、その製品に対して当社が行う改善や追加する新しいコンテンツは、その製品の所有者であれば常に無料になります。

個々のコンポーネントパッケージ: マーケティング、アプリケーションUI、またはeコマースのコンポーネントパッケージを個別に購入すると、今後これらのパッケージに追加される新しいコンポーネントを無料で入手できます。

新しいアイデアが生まれたときはいつでも、これらのパッケージに新しいコンポーネントを定期的に追加します。過去のアップデートがどのようなものであったかについては、 変更履歴.

をご覧ください。リリースされる新しいコンポーネントパッケージは、別の製品と見なされ、アップグレード価格で購入できます。

オールアクセス: オールアクセスライセンスを購入すると、現在利用可能なすべてのコンポーネントパッケージすべてのサイトテンプレートにアクセスできるだけでなく、今後リリースされる追加のコンポーネントパッケージやテンプレートにも追加料金なしでアクセスできます。

つまり、「ジャーナリズム」のようなまったく新しいコンポーネントパッケージを追加したり、新しいソーシャルメディアウェブサイトテンプレートを設計したりした場合、それらの製品へのアクセスは、元の購入に含まれており、アップグレード費用はかかりません。

互換性

Figma、Sketch、またはAdobe XDファイルは含まれていますか?

いいえ、Figma、Sketch、またはAdobe XDなどのツール用のデザインアセットは含まれていません。

当社では、独自の設計および開発プロセスの一部として高品質のデザイン成果物を生成していません。そのため、これらの追加リソースを構築することは、最大の価値を提供できると信じているコードで新しい例を作成する時間を減らすことを意味します。

どのJSフレームワークが使用されていますか?

Tailwind UIのすべてのコンポーネントは、React、Vue、およびバニラHTMLの3つの形式で提供されています。

ReactとVueの例は、すぐに使用できる状態で、 Headless UIによって動作しています。Headless UIは、Tailwind CSSと完全に統合されるように設計されたスタイリングされていないコンポーネントのライブラリです。Headless UIはReactとVue 3の両方をサポートしますが、Vue 2とは互換性がありません。

バニラHTMLの例にはJavaScriptは含まれておらず、必要なJavaScriptを自分で記述することを好む人向けに設計されています。

ほとんどのコンポーネントはJSに依存していませんが、依存しているもの(ドロップダウン、ダイアログなど)については、異なる状態(トグルスイッチのオンまたはオフなど)に使用する必要があるクラスや、要素を画面に出入りさせるときに推奨するクラス(ダイアログを開くなど)など、HTMLにいくつかの簡単なコメントを記載して説明しています。

これが実際にどのように見えるかをよりよく理解するには、 ドキュメントをご覧ください.

どのバージョンのTailwind CSSが使用されていますか?

Tailwind UIのすべてのものは、Tailwind CSSの最新バージョン(現在はTailwind CSS v)向けに設計および開発されています。3.4.

どのブラウザがサポートされていますか?

Tailwind UIのコンポーネントは、Chrome、Firefox、Safari、Edgeなどの主要なブラウザの最新の安定版で動作するように設計されています。

Internet Explorer 11はサポートしていません。

ライセンス

後でチームライセンスにアップグレードできますか?

はい!あなたがソロ開発者であれば、個人ライセンスから開始し、後で他の開発者がチームに参加した場合はチームライセンスにアップグレードできます。

ログイン後、Tailwind UIアプリ内の「アカウント」メニューに「チームライセンスにアップグレード」オプションがあります。

チームオールアクセスライセンスのみを提供しており、個々のコンポーネントパッケージのチームライセンスは提供していません。

作業するプロジェクトごとにライセンスを購入する必要がありますか?

他のほとんどのテンプレート/テーマとは異なり、新しいプロジェクトでTailwind UIを使用するたびに新しいライセンスを購入する必要はありません。

構築するものがライセンスに従って許可されている限り、追加のライセンスを購入することなく、必要な数のサイトを構築できます。

詳細と例については、 ライセンスをお読みください.

Tailwind UIをクライアントプロジェクトに使用できますか?

はい!構築するものが単一のクライアント向けに開発されたカスタムウェブサイトである限り、Tailwind UIのコンポーネントとテンプレートを構築に活用できます。

できないことは、複数のクライアントに再販されるウェブサイトまたはテンプレートをTailwind UIで構築することだけです。

詳細と例については、ライセンスをお読みください

Tailwind UIを自分の商用プロジェクトに使用できますか?

もちろんです!ライセンスにより、簡単な公開ウェブサイトであろうと、エンドユーザーがアクセスするために料金を支払う必要があるSaaSアプリケーションであろうと、必要な数のプロジェクトを構築する許可が与えられます。

構築するものが、Tailwind UIから派生した要素を使用して顧客が独自のサイトを作成するために使用できるウェブサイトビルダーやその他のツールでない限り、問題ありません。

詳細と例については、 ライセンスをお読みください..

Tailwind UIをオープンソースプロジェクトで使用できますか?

はい!構築するものが何らかの実際のウェブサイトであり、コンポーネントライブラリ、テーマビルダー、または当社のコンポーネントを再パッケージ化して再配布することが主な目的であるその他の派生製品ではない限り、そのプロジェクトがオープンソースであってもまったく問題ありません。

何が許可され、何が許可されないかの詳細と例については、 ライセンスをお読みください.

Tailwind UIで構築したテンプレート/テーマを販売できますか?

いいえ、Tailwind UIを使用して、テーマ、UIキット、ページビルダー、または当社のコンポーネントやテンプレートを再パッケージ化して再配布し、他のユーザーが独自のサイトを構築するために使用するような派生製品を作成することはできません。

何が許可され、何が許可されないかの詳細と例については、 ライセンスをお読みください.

サポート

技術サポートを提供していますか?

Tailwind UIはセルフサービス製品です。つまり、アカウント管理やライセンスに関する懸念事項についてはカスタマーサポートを提供していますが、お客様が製品を正常に使用するためにTailwind CSS、HTML、React、およびVueの必要な知識を持っていることが前提となります。

すべてのプロジェクトは異なり、独立して作成されたコードが相互に作用する方法は複雑で理解に時間がかかる可能性があるため、 技術サポートやコンサルティングは提供していません.

Tailwind UIのお客様は、質問をしたり、他の人の質問に答えたりできるプライベートDiscordコミュニティにアクセスできますが、当社自身がここで直接的な技術サポートやコンサルティングを提供することはありません。

返金ポリシーは何ですか?

購入にご満足いただけなかった場合は、その理由を問わず、30日以内に support@tailwindui.comまでメールでお問い合わせください。全額返金いたします。