Tailwind CSSですぐに実装できるUIコンポーネントのまとめ -tailblocks
Post on:2020年6月3日
Webページでよく見かけるUIコンポーネント、ヘッダ・フッタ・ヒーロー・ギャラリー・ステップ・お問い合わせなどをTailwind CSSですぐに実装できるコードをまとめたtailblocksを紹介します。
それぞれのUIコンポーネントにはさまざまなバリエーションもあり、スマホ・タブレット・デスクトップでの表示、ライトモード・ダークモード、テーマカラーの変更など、非常に便利です。
![最近のWebページでよく使用されているUIコンポーネントをコピペですぐに実装できるコードのまとめ -tailblocks](http://coliss.com/wp-content/uploads-202002/2020060301.png)
tailblocksの特徴
tailblocksは、Tailwind CSSですぐに実装できるUIコンポーネントをまとめたものです。Tailwind CSSはUIコンポーネントをカスタマイズするためのユーティリティとなるclassを提供するCSSです。
参考: Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる
- UIコンポーネントは、15のカテゴリ。
- レスポンシブ対応。
- ライトモード・ダークモード対応。
- カラーのカスタマイズ。
- MITライセンスで、商用プロジェクトでも無料で利用できます。
シンプルなヘッダを見てましょう。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060302.gif)
スマホ・タブレット・デスクトップに対応しており、右上の「View Code」からコードをコピペできます。右端のスイッチで、ライトモード・ダークモードを切り替えることもできます。
tailblocksのデモ
デモでは、さまざまなUIコンポーネントがカテゴリにまとめられています。その中からいくつかピックアップしてみました。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060303-01.png)
tailblocksのデモ: ヘッダ 4種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060303-02.png)
tailblocksのデモ: ヒーロー 6種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060303-03.png)
tailblocksのデモ: フッタ 5種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060303-04.png)
tailblocksのデモ: ギャラリー 3種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060303-05.png)
tailblocksのデモ: 価格表 3種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060303-06.png)
tailblocksのデモ: ステップ 3種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060303-07.png)
tailblocksのデモ: チーム 3種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060303-08.png)
tailblocksのデモ: お客さまの声 3種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060303-09.png)
tailblocksのデモ: ブログ 5種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060303-10.png)
tailblocksのデモ: お問い合わせ 3種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060303-11.png)
tailblocksのデモ: コンテンツ 8種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060303-12.png)
tailblocksのデモ: コールトゥアクション 4種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060303-13.png)
tailblocksのデモ: コマース 3種類
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-202002/2020060303-14.png)
tailblocksのデモ: 特徴 8種類
sponsors