フードデリバリーダッシュボードレイアウトコンポーネント
ダークなUIとキャンディー/スイーツの配色を備えた、複雑でレスポンシブなフードデリバリーダッシュボードのレイアウトで、サイドバー、ヘッダー、メインコンテンツエリア、およびフード/レストランアプリケーション用の複数のインタラクティブ要素を備えています。ダークモードのサポートが含まれています。
HTMLコード
<div class="min-h-screen bg-gray-950 text-gray-100 dark:bg-gray-950 dark:text-gray-100 transition-colors duration-300 font-sans">
<div class="flex flex-col lg:flex-row min-h-screen">
<!-- Sidebar -->
<aside class="w-full lg:w-64 bg-gray-900 border-b border-gray-800 lg:border-r lg:border-b-0 border-pink-600/30 lg:border-pink-600/30 p-4 flex flex-col flex-shrink-0 dark:bg-gray-900 dark:border-gray-800 dark:border-pink-600/30 transition-colors duration-300">
<div class="flex items-center justify-between lg:justify-start mb-6">
<h1 class="text-2xl font-extrabold text-pink-500 tracking-wider">FoodieDash</h1>
<button class="lg:hidden text-gray-400 focus:outline-none focus:ring-2 focus:ring-pink-500 rounded-md p-1 invert dark:invert-0">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
<nav class="flex flex-col space-y-3">
<a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium bg-pink-600 text-white shadow-lg shadow-pink-500/30 hover:bg-pink-700 transition-all duration-200">
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
Dashboard
</a>
<a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium text-gray-300 hover:bg-gray-800 hover:text-pink-400 transition-all duration-200">
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
Orders
</a>
<a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium text-gray-300 hover:bg-gray-800 hover:text-pink-400 transition-all duration-200">
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg>
Menu Items
</a>
<a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium text-gray-300 hover:bg-gray-800 hover:text-pink-400 transition-all duration-200">
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.653-.195-1.264-.544-1.76M7 20v-2a3 3 0 015.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M12 18a6 6 0 100-12 6 6 0 000 12z"></path></svg>
Customers
</a>
<a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium text-gray-300 hover:bg-gray-800 hover:text-pink-400 transition-all duration-200">
<svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
Settings
</a>
</nav>
<div class="mt-auto pt-6 border-t border-gray-800 border-pink-600/30 flex items-center justify-between">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3 border-2 border-mint-400" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<div class="flex flex-col">
<span class="text-sm font-semibold text-gray-200">Jane Doe</span>
<span class="text-xs text-gray-400">Admin</span>
</div>
</div>
<button class="text-gray-400 hover:text-pink-400 focus:outline-none focus:ring-2 focus:ring-pink-500 rounded-md p-1 transform hover:scale-110 transition-transform duration-200">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
</button>
</div>
</aside>
<!-- Main Content Area -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Top Header -->
<header class="flex items-center justify-between p-4 bg-gray-900 border-b border-gray-800 border-mint-600/30 shadow-md dark:bg-gray-900 dark:border-gray-800 dark:border-mint-600/30 transition-colors duration-300 z-10">
<div class="relative w-full max-w-md mx-auto lg:mx-0">
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
<svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
</svg>
</span>
<input type="text" placeholder="Search for food, orders, customers..." class="w-full py-2 pl-10 pr-4 rounded-xl bg-gray-800 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-mint-500 focus:border-transparent transition-all duration-200">
</div>
<div class="flex items-center space-x-4 ml-4">
<button class="p-2 text-gray-400 hover:text-pink-400 focus:outline-none focus:ring-2 focus:ring-pink-500 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors duration-200">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h.01M12 21v-4m0 0V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7m-7 7l4 4m0 0l4-4"></path></svg>
</button>
<button class="p-2 text-gray-400 hover:text-mint-400 focus:outline-none focus:ring-2 focus:ring-mint-500 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors duration-200">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path></svg>
</button>
</div>
</header>
<!-- Main Content -->
<main class="flex-1 overflow-x-hidden overflow-y-auto p-4 md:p-6 bg-gray-950 dark:bg-gray-950 transition-colors duration-300">
<h2 class="text-3xl font-extrabold text-pink-400 mb-6">Dashboard Overview</h2>
<!-- Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
<div class="bg-gray-800 rounded-xl p-5 shadow-lg shadow-gray-700/20 flex flex-col justify-between transform hover:scale-105 transition-transform duration-200">
<div>
<p class="text-sm text-gray-400 mb-2">Total Orders</p>
<p class="text-4xl font-bold text-mint-400">1,234</p>
</div>
<span class="text-xs text-gray-500 mt-3">+12% from last month</span>
</div>
<div class="bg-gray-800 rounded-xl p-5 shadow-lg shadow-gray-700/20 flex flex-col justify-between transform hover:scale-105 transition-transform duration-200">
<div>
<p class="text-sm text-gray-400 mb-2">Revenue</p>
<p class="text-4xl font-bold text-pink-400">$87,654</p>
</div>
<span class="text-xs text-gray-500 mt-3">+8% from last month</span>
</div>
<div class="bg-gray-800 rounded-xl p-5 shadow-lg shadow-gray-700/20 flex flex-col justify-between transform hover:scale-105 transition-transform duration-200">
<div>
<p class="text-sm text-gray-400 mb-2">New Customers</p>
<p class="text-4xl font-bold text-sky-400">234</p>
</div>
<span class="text-xs text-gray-500 mt-3">+5% from last month</span>
</div>
<div class="bg-gray-800 rounded-xl p-5 shadow-lg shadow-gray-700/20 flex flex-col justify-between transform hover:scale-105 transition-transform duration-200">
<div>
<p class="text-sm text-gray-400 mb-2">Pending Orders</p>
<p class="text-4xl font-bold text-orange-400">47</p>
</div>
<span class="text-xs text-gray-500 mt-3">Needs attention</span>
</div>
</div>
<!-- Recent Orders & Top Selling Items -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<!-- Recent Orders -->
<div class="bg-gray-900 rounded-xl p-6 shadow-lg shadow-gray-800/20">
<h3 class="text-xl font-bold text-mint-400 mb-4">Recent Orders</h3>
<div class="overflow-x-auto">
<table class="min-w-full text-left text-gray-300">
<thead>
<tr class="border-b border-gray-700 text-gray-500">
<th class="py-2 px-3">Order ID</th>
<th class="py-2 px-3">Customer</th>
<th class="py-2 px-3">Amount</th>
<th class="py-2 px-3">Status</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-800 hover:bg-gray-800 transition-colors duration-150">
<td class="py-3 px-3 font-semibold">#ORD8765</td>
<td class="py-3 px-3">Alice Smith</td>
<td class="py-3 px-3 text-pink-400">$45.00</td>
<td class="py-3 px-3">
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-mint-600/20 text-mint-400">Delivered</span>
</td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800 transition-colors duration-150">
<td class="py-3 px-3 font-semibold">#ORD8764</td>
<td class="py-3 px-3">Bob Johnson</td>
<td class="py-3 px-3 text-pink-400">$32.50</td>
<td class="py-3 px-3">
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-sky-600/20 text-sky-400">Processing</span>
</td>
</tr>
<tr class="border-b border-gray-800 hover:bg-gray-800 transition-colors duration-150">
<td class="py-3 px-3 font-semibold">#ORD8763</td>
<td class="py-3 px-3">Charlie Brown</td>
<td class="py-3 px-3 text-pink-400">$60.00</td>
<td class="py-3 px-3">
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-orange-600/20 text-orange-400">Pending</span>
</td>
</tr>
<tr class="hover:bg-gray-800 transition-colors duration-150">
<td class="py-3 px-3 font-semibold">#ORD8762</td>
<td class="py-3 px-3">Diana Prince</td>
<td class="py-3 px-3 text-pink-400">$28.75</td>
<td class="py-3 px-3">
<span class="px-2 py-1 text-xs font-semibold rounded-full bg-mint-600/20 text-mint-400">Delivered</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Top Selling Items -->
<div class="bg-gray-900 rounded-xl p-6 shadow-lg shadow-gray-800/20">
<h3 class="text-xl font-bold text-pink-400 mb-4">Top Selling Items</h3>
<ul class="space-y-4">
<li class="flex items-center space-x-4 bg-gray-800 rounded-lg p-3 hover:bg-gray-700 transition-colors duration-200">
<img src="https://picsum.photos/80/80?random=1" alt="Spicy Thai Noodles" class="w-16 h-16 object-cover rounded-md border border-gray-700">
<div>
<p class="font-semibold text-white">Spicy Thai Noodles</p>
<p class="text-sm text-gray-400">150 Orders</p>
<p class="text-md text-mint-400 font-bold">$14.99</p>
</div>
</li>
<li class="flex items-center space-x-4 bg-gray-800 rounded-lg p-3 hover:bg-gray-700 transition-colors duration-200">
<img src="https://picsum.photos/80/80?random=2" alt="Classic Cheeseburger" class="w-16 h-16 object-cover rounded-md border border-gray-700">
<div>
<p class="font-semibold text-white">Classic Cheeseburger</p>
<p class="text-sm text-gray-400">120 Orders</p>
<p class="text-md text-mint-400 font-bold">$12.50</p>
</div>
</li>
<li class="flex items-center space-x-4 bg-gray-800 rounded-lg p-3 hover:bg-gray-700 transition-colors duration-200">
<img src="https://picsum.photos/80/80?random=3" alt="Vegan Buddha Bowl" class="w-16 h-16 object-cover rounded-md border border-gray-700">
<div>
<p class="font-semibold text-white">Vegan Buddha Bowl</p>
<p class="text-sm text-gray-400">98 Orders</p>
<p class="text-md text-mint-400 font-bold">$13.00</p>
</div>
</li>
</ul>
</div>
</div>
<!-- Quick Actions -->
<div class="bg-gray-900 rounded-xl p-6 shadow-lg shadow-gray-800/20 mb-8">
<h3 class="text-xl font-bold text-sky-400 mb-4">Quick Actions</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<button class="flex flex-col items-center p-4 bg-gray-800 rounded-lg group hover:bg-pink-600 transition-all duration-200 transform hover:scale-105 shadow-md shadow-gray-700/20">
<svg class="w-8 h-8 mb-2 text-pink-400 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span class="text-gray-200 font-medium group-hover:text-white">Add New Item</span>
</button>
<button class="flex flex-col items-center p-4 bg-gray-800 rounded-lg group hover:bg-mint-600 transition-all duration-200 transform hover:scale-105 shadow-md shadow-gray-700/20">
<svg class="w-8 h-8 mb-2 text-mint-400 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
<span class="text-gray-200 font-medium group-hover:text-white">View All Orders</span>
</button>
<button class="flex flex-col items-center p-4 bg-gray-800 rounded-lg group hover:bg-orange-600 transition-all duration-200 transform hover:scale-105 shadow-md shadow-gray-700/20">
<svg class="w-8 h-8 mb-2 text-orange-400 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
<span class="text-gray-200 font-medium group-hover:text-white">Manage Categories</span>
</button>
<button class="flex flex-col items-center p-4 bg-gray-800 rounded-lg group hover:bg-sky-600 transition-all duration-200 transform hover:scale-105 shadow-md shadow-gray-700/20">
<svg class="w-8 h-8 mb-2 text-sky-400 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<span class="text-gray-200 font-medium group-hover:text-white">Send Notification</span>
</button>
</div>
</div>
<!-- Customer Reviews (Example Section) -->
<div class="bg-gray-900 rounded-xl p-6 shadow-lg shadow-gray-800/20">
<h3 class="text-xl font-bold text-mint-400 mb-4">Latest Customer Reviews</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gray-800 rounded-lg p-4 flex items-start space-x-4 shadow-md shadow-gray-700/20">
<img class="w-12 h-12 rounded-full border-2 border-pink-400 flex-shrink-0" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Customer Avatar">
<div class="flex-1">
<h4 class="font-semibold text-white">John Davis</h4>
<div class="flex items-center text-yellow-400 text-sm mb-1">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
</div>
<p class="text-gray-300 text-sm">"Great food and fast delivery! Highly recommend the pasta."</p>
<p class="text-xs text-gray-500 mt-2">2 days ago</p>
</div>
</div>
<div class="bg-gray-800 rounded-lg p-4 flex items-start space-x-4 shadow-md shadow-gray-700/20">
<img class="w-12 h-12 rounded-full border-2 border-mint-400 flex-shrink-0" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Customer Avatar">
<div class="flex-1">
<h4 class="font-semibold text-white">Emily White</h4>
<div class="flex items-center text-yellow-400 text-sm mb-1">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
<svg class="w-4 h-4 fill-current text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
</div>
<p class="text-gray-300 text-sm">"The delivery was a bit slow, but the pizza was delicious!"</p>
<p class="text-xs text-gray-500 mt-2">4 days ago</p>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</div>関連コンポーネント
レイアウトコンポーネント
マイクロインタラクションとパステルカラースキームを利用したレスポンシブダッシュボードレイアウトコンポーネントで、ダークモードをサポートするデータ視覚化およびコントロールパネルを表示するように設計されています。
レトロビジネスレイアウト
レトロ/ヴィンテージをテーマにしたビジネスWebサイト用のレイアウトコンポーネントで、グレースケールの配色とシンプルなデザインが特徴です。応答性が高く、ダークモードのサポートが含まれています。
Eコマースレイアウトコンポーネント
グレースケールのマテリアルデザインの美学を備えたシンプルでレスポンシブなeコマースレイアウトコンポーネントで、製品グリッド、ヘッダー、フッターがあり、すべてダークモードがサポートされています。商品画像にはpicsum.photosを使用します。