UI ブロックとセクション - より速く構築する
CSS のみの Tailwind CSS UI ブロックとセクション。 JavaScript なし、WCAG AA にアクセス可能、フレームワークに依存しない。ヒーロー、ヘッダー、価格設定セクション、および機能ブロックをコピーして貼り付けます。 Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
ブロックは、Frutjam コンポーネントから組み立てられた実稼働対応のページ セクションです。各ブロックは自己完結型の HTML です。これを Django テンプレート、Laravel Blade ファイル、HTMX ページ、または React コンポーネントにドロップすると、すぐに機能します。ブロックはアクティブな Frutjam テーマを自動的に継承するため、明るいテーマ、暗いテーマ、またはカスタム テーマを切り替えるときに、ブロック HTML を変更する必要はありません。すべてのブロックは CSS のみで、WCAG AA にアクセスでき、Tailwind CSS v4 用に構築されています。JavaScript や Tailwind 自体を超えるビルド パイプラインはありません。
ヘッダ
CSS のみの Tailwind CSS ヘッダー ブロック。ナビゲーションバー、ブランディング、モバイル ドロワーを備えています。スティッキー、透明、レスポンシブなレイアウトのバリエーション。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
ヒーロー
CSS のみの Tailwind CSS ヒーロー ブロック — 中央揃え、分割レイアウト、画像レイアウトを備えた既製のランディング ページ セクション。 JavaScript は必要ありません。WCAG AA にアクセスできます。 Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
価格設定
CSS のみの Tailwind CSS 価格ブロックは、カードとボタンのコンポーネントで構築されています。階層、機能リスト、CTA を含む価格表をコピーして貼り付けます。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
ブロックとは何ですか?
ブロックは、Frutjam コンポーネントを組み合わせて構築された、より大きな既製のページ セクションです。コンポーネントが単一の UI 要素 (ボタン、カード、バッジ) であるのに対し、ブロックは完全なレイアウト セクション (ヒーロー、価格表、サイト ヘッダー) であり、すぐにプロジェクトにコピーして貼り付けることができます。
CSSのみ
すべてのブロックは Frutjam コンポーネントと Tailwind CSS ユーティリティを使用して構築されており、JavaScript や追加の依存関係はありません。
コピー＆ペーストの準備ができました
各ブロックは自己完結型の HTML です。これを Django テンプレート、Laravel Blade、HTMX ページ、または React コンポーネントに貼り付けます。
テーマを意識した
ブロックはアクティブな Frutjam テーマを自動的に継承します。テーマを切り替えると、変更を必要とせずにすべてのブロックが更新されます。
ブロックとコンポーネントの違いは何ですか?
コンポーネントは、ボタン、カード、バッジなどの、再利用可能な単一の UI 要素です。ブロックは、ヒーロー セクション、価格表、ナビゲーション バー付きのサイト ヘッダー、モバイル ドロワーなど、複数のコンポーネントをレイアウトに組み込む完全なページ セクションです。コンポーネントを使用してカスタム レイアウトを構築します。ブロックを使用してページを高速に組み立てます。
ブロックは Django、HTMX、Laravel で動作しますか?
はい - ブロックは Frutjam コンポーネント クラスを使用したプレーン HTML です。これらは、Django、HTMX、Laravel Blade、Rails ERB、Jinja2、静的 HTML など、あらゆるテンプレート システムで動作します。 JavaScript フレームワークはなく、Tailwind CSS 自体を超えるビルド ステップもありません。
ブロックはさらに追加されていますか?
はい - 新しいブロックが定期的に追加されます。プロ プランとチーム プランには、機能セクション、お客様の声、CTA、フルページ テンプレートを含むプレミアム ブロックへのアクセスが含まれます。