Tailwind CSSですぐに実装できるUIコンポーネントのまとめ -tailblocks

Webページでよく見かけるUIコンポーネント、ヘッダ・フッタ・ヒーロー・ギャラリー・ステップ・お問い合わせなどをTailwind CSSですぐに実装できるコードをまとめたtailblocksを紹介します。

それぞれのUIコンポーネントにはさまざまなバリエーションもあり、スマホ・タブレット・デスクトップでの表示、ライトモード・ダークモード、テーマカラーの変更など、非常に便利です。

tailblocks -GitHub

• tailblocksの特徴
• tailblocksのデモ

tailblocksの特徴

tailblocksは、Tailwind CSSですぐに実装できるUIコンポーネントをまとめたものです。Tailwind CSSはUIコンポーネントをカスタマイズするためのユーティリティとなるclassを提供するCSSです。
参考: Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる

• UIコンポーネントは、15のカテゴリ。
• レスポンシブ対応。
• ライトモード・ダークモード対応。
• カラーのカスタマイズ。
• MITライセンスで、商用プロジェクトでも無料で利用できます。

シンプルなヘッダを見てましょう。

スマホ・タブレット・デスクトップに対応しており、右上の「View Code」からコードをコピペできます。右端のスイッチで、ライトモード・ダークモードを切り替えることもできます。

tailblocksのデモ

デモでは、さまざまなUIコンポーネントがカテゴリにまとめられています。その中からいくつかピックアップしてみました。

tailblocksのデモ: ヘッダ 4種類

tailblocksのデモ: ヒーロー 6種類

tailblocksのデモ: フッタ 5種類

tailblocksのデモ: ギャラリー 3種類

tailblocksのデモ: 価格表 3種類

tailblocksのデモ: ステップ 3種類

tailblocksのデモ: チーム 3種類

tailblocksのデモ: お客さまの声 3種類

tailblocksのデモ: ブログ 5種類

tailblocksのデモ: お問い合わせ 3種類

tailblocksのデモ: コンテンツ 8種類

tailblocksのデモ: コールトゥアクション 4種類

tailblocksのデモ: コマース 3種類

tailblocksのデモ: 特徴 8種類