Brutalist_ECommerce_Table
eコマース向けのブルータリズムスタイルのレスポンシブデータテーブルコンポーネントで、ハイコントラスト、補色スキーム(イエロー/パープル)、ダークモードのサポートを特長としています。商品リストや注文管理用に設計されています。
HTMLコード
<div class="font-sans p-4 sm:p-6 md:p-8 bg-yellow-100 dark:bg-purple-900 min-h-screen text-purple-900 dark:text-yellow-100 transition-colors duration-300">
<h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold mb-6 sm:mb-8 text-black dark:text-yellow-300 uppercase tracking-widest border-b-4 border-l-4 border-black dark:border-yellow-300 p-2 transform -skew-x-6 inline-block">
Product Listings
</h2>
<div class="overflow-x-auto border-4 border-black dark:border-yellow-300 bg-purple-200 dark:bg-purple-950 shadow-brutalist">
<table class="w-full text-left border-collapse">
<thead class="border-b-4 border-black dark:border-yellow-300 bg-purple-500 dark:bg-purple-800 text-yellow-100 dark:text-yellow-100">
<tr>
<th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider border-r-4 border-black dark:border-yellow-300">
ID
</th>
<th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider border-r-4 border-black dark:border-yellow-300">
Product
</th>
<th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider hidden sm:table-cell border-r-4 border-black dark:border-yellow-300">
Category
</th>
<th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider border-r-4 border-black dark:border-yellow-300">
Price
</th>
<th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider text-center">
Actions
</th>
</tr>
</thead>
<tbody>
<!-- Product 1 -->
<tr class="border-b-2 border-black dark:border-yellow-300 even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#001</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
<img src="https://picsum.photos/60/60?random=1" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
<span class="font-semibold text-sm sm:text-base">Crude Widget X</span>
</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Electronics</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$19.99</td>
<td class="p-3 sm:p-5 text-center">
<button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
<button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
</td>
</tr>
<!-- Product 2 -->
<tr class="border-b-2 border-black dark:border-yellow-300 even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#002</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
<img src="https://picsum.photos/60/60?random=2" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
<span class="font-semibold text-sm sm:text-base">Bold Apparatus MKII</span>
</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Tools</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$45.00</td>
<td class="p-3 sm:p-5 text-center">
<button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
<button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
</td>
</tr>
<!-- Product 3 -->
<tr class="border-b-2 border-black dark:border-yellow-300 even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#003</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
<img src="https://picsum.photos/60/60?random=3" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
<span class="font-semibold text-sm sm:text-base">Raw Material A</span>
</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Material</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$7.50</td>
<td class="p-3 sm:p-5 text-center">
<button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
<button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
</td>
</tr>
<!-- Product 4 -->
<tr class="even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#004</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
<img src="https://picsum.photos/60/60?random=4" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
<span class="font-semibold text-sm sm:text-base">Unrefined Gadget Z</span>
</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Components</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$12.25</td>
<td class="p-3 sm:p-5 text-center">
<button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
<button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-8 flex justify-between items-center flex-wrap gap-4">
<p class="text-sm sm:text-base font-bold text-black dark:text-yellow-300 tracking-wide">
Showing 1 to 4 of 12 items
</p>
<div class="flex space-x-2">
<button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-4 py-2 sm:px-5 sm:py-2.5 text-sm sm:text-base font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">
Prev
</button>
<button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-4 py-2 sm:px-5 sm:py-2.5 text-sm sm:text-base font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">
Next
</button>
</div>
</div>
</div>
<style>
/* Brutalist Shadow for the table container */
.shadow-brutalist {
box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 1);
}
.dark .shadow-brutalist {
box-shadow: 10px 10px 0px 0px var(--tw-color-yellow-300);
}
</style>関連コンポーネント
Organic_Nature_Dashboard_Data_Table
適度な複雑さで、有機的/自然にインスパイアされたダッシュボード用のデータテーブルコンポーネントで、鮮やかな配色、流れるような線、応答性、ダークモードのサポートが特徴です。
Luxury_Premium_Manufacturing_Data_Table
製造/工業用途向けの複雑で応答性の高いデータテーブルコンポーネントで、黒と白の配色と単一の明るいアクセントカラーを備えた高級/プレミアムデザインが特徴です。ダークモードのサポートとインタラクティブな要素が含まれています。
レトロデータグリッド
Tailwind CSSを使用してレトロ/ビンテージ80年代/90年代の美学でスタイル化されたレスポンシブデータテーブルコンポーネント。ブロック状のデザイン、鮮やかな色のアクセント(ライトモードではパープル/オレンジ、ダークモードではグリーン/ネオン)、ノスタルジックなテック感を演出する等幅フォントが特徴です。このテーブルには、個別のヘッダーと行のスタイル設定、アバターやステータスバッジなどの境界線付きの要素が含まれ、CSSによるダークモードがサポートされています。プレースホルダーデータには、ユーザーアバター、連絡先情報、ステータスバッジ、ロール、および参加日が含まれます。テーブルは、応答性を向上させるために、小さな画面で水平方向にスクロールできます。