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.