tailblocks - Tailwindをベースにしたブロックデザインパターン
CSSフレームワークとしてTailwindが知られています。画一的なデザインを提供するBootstrapなどと異なり、個別のスタイルのみを提供します。UI部品にする際には、それらのスタイルを組み合わせて自作する必要があります。より自由度が高く、作業を効率化してくれるフレームワークです。 そんなTailwindを使ってブロック機能を提供するのがtailblocksになります。
tailblocksの使い方
様々なデモがあります。これは一例です。
こんな感じの表示も。汎用性が高そうです。
テーマに合わせてカラーリングの変更も可能です。
縦型のブロックも。
タブレットやスマートフォンサイズもサポートしています。
ライト、ダークテーマも。
Webサイトでそのまま使えそうなデザインも用意されています。
他にもたくさんのパターンがあります。
ECサイトで使えるものも。
それぞれコードがありますので、貼り付けて使えます。
tailblocksで用意されているのはカラム型、縦型のブロックなど様々です。機能を解説するような形、プライスリスト、製品紹介など様々な場面で使えるでしょう。Tailwindを使ってWebサイトを構築している際にはチェックして欲しいライブラリです。
tailblocksはCSS/JavaScript製のオープンソース・ソフトウェア(MIT License)です。
tailblocks — Ready-to-use Tailwind CSS blocks mertJF/tailblocks: ? Ready-to-use Tailwind CSS blocks.