最近のWebページでよく使用されているUIコンポーネントをコピペですぐに実装できるコードのまとめ -tailblocks

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

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

最近のWebページでよく使用されているUIコンポーネントをコピペですぐに実装できるコードのまとめ -tailblocks

tailblocks -GitHub

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種類

sponsors

top of page

©2020 coliss