ショッピングカートコンポーネント
ネオン/グロー効果と企業の青の配色を備えたレスポンシブショッピングカートコンポーネントで、ダークモードをサポートします。商品リスト、数量調整、および全体の概要を掲載しています。
HTMLコード
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 duration-300 p-4 sm:p-6 lg:p-8 flex items-center justify-center">
<div class="w-full max-w-6xl bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden mb-8 transform transition-all duration-500 scale-95 md:scale-100
dark:border dark:border-blue-700 dark:shadow-blue-500/30 shadow-lg">
<div class="relative p-6 sm:p-8 bg-gradient-to-r from-blue-600 to-blue-800 dark:from-blue-800 dark:to-blue-950 text-white
before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-blue-400/20 before:to-transparent before:animate-pulse-slow
dark:before:from-blue-600/30 dark:before:to-transparent">
<h2 class="relative z-10 text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-2 leading-tight tracking-tight text-shadow-lg
dark:text-blue-200 dark:shadow-blue-300/50">
Your Shopping Cart
</h2>
<p class="relative z-10 text-lg sm:text-xl font-light opacity-90">
Review your items before checkout.
</p>
<div class="absolute inset-0 pointer-events-none glowing-lines"></div>
</div>
<div class="p-4 sm:p-6 lg:p-8 grid grid-cols-1 lg:grid-cols-3 gap-6 sm:gap-8">
<div class="lg:col-span-2 space-y-6 sm:space-y-8">
<!-- Cart Item 1 -->
<div class="flex flex-col sm:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-3 sm:p-4 shadow-md
dark:border dark:border-blue-600/50 dark:hover:shadow-blue-500/40 transition-all duration-300 hover:shadow-lg">
<img src="https://picsum.photos/seed/item1/150/150" alt="Product Image" class="w-24 h-24 sm:w-32 sm:h-32 rounded-md object-cover mr-4 sm:mr-6 flex-shrink-0 border border-blue-300 dark:border-blue-500 shadow-md">
<div class="flex-grow text-center sm:text-left mt-3 sm:mt-0">
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">
Ergonomic Wireless Mouse
</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Color: Midnight Blue</p>
<div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-800 dark:text-gray-200">
<button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
-
</button>
<span class="font-medium text-lg">1</span>
<button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
+
</button>
<span class="ml-4 text-basesm:text-lg font-bold text-gray-900 dark:text-gray-100">$49.99</span>
</div>
</div>
<button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1 glow-on-hover">
<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"></path>
</svg>
</button>
</div>
<!-- Cart Item 2 -->
<div class="flex flex-col sm:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-3 sm:p-4 shadow-md
dark:border dark:border-blue-600/50 dark:hover:shadow-blue-500/40 transition-all duration-300 hover:shadow-lg">
<img src="https://picsum.photos/seed/item2/150/150" alt="Product Image" class="w-24 h-24 sm:w-32 sm:h-32 rounded-md object-cover mr-4 sm:mr-6 flex-shrink-0 border border-blue-300 dark:border-blue-500 shadow-md">
<div class="flex-grow text-center sm:text-left mt-3 sm:mt-0">
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Premium USB-C Hub</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Ports: 7-in-1</p>
<div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-800 dark:text-gray-200">
<button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
-
</button>
<span class="font-medium text-lg">2</span>
<button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
+
</button>
<span class="ml-4 text-basesm:text-lg font-bold text-gray-900 dark:text-gray-100">$75.00</span>
</div>
</div>
<button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1 glow-on-hover">
<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"></path>
</svg>
</button>
</div>
<!-- Cart Item 3 -->
<div class="flex flex-col sm:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-3 sm:p-4 shadow-md
dark:border dark:border-blue-600/50 dark:hover:shadow-blue-500/40 transition-all duration-300 hover:shadow-lg">
<img src="https://picsum.photos/seed/item3/150/150" alt="Product Image" class="w-24 h-24 sm:w-32 sm:h-32 rounded-md object-cover mr-4 sm:mr-6 flex-shrink-0 border border-blue-300 dark:border-blue-500 shadow-md">
<div class="flex-grow text-center sm:text-left mt-3 sm:mt-0">
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1 leading-tight">Noise-Cancelling Headphones</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Model: ProAudio 3000</p>
<div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-800 dark:text-gray-200">
<button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
-
</button>
<span class="font-medium text-lg">1</span>
<button class="px-2 py-0.5 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-700
text-blue-700 dark:text-blue-300 font-bold glow-on-hover">
+
</button>
<span class="ml-4 text-basesm:text-lg font-bold text-gray-900 dark:text-gray-100">$199.99</span>
</div>
</div>
<button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1 glow-on-hover">
<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"></path>
</svg>
</button>
</div>
<div class="flex justify-between items-center mt-6">
<button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 flex items-center space-x-2 transition-colors duration-200
py-2 px-4 rounded-lg border border-blue-400 dark:border-blue-700 hover:bg-blue-50 dark:hover:bg-blue-900 glow-on-hover">
<svg class="w-5 h-5" 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 19l-7-7m0 0l7-7m-7 7h18"></path>
</svg>
<span>Continue Shopping</span>
</button>
<button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 flex items-center space-x-2 transition-colors duration-200
py-2 px-4 rounded-lg border border-red-400 dark:border-red-700 hover:bg-red-50 dark:hover:bg-red-900 glow-on-hover">
<svg class="w-5 h-5" 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m7 4v6m-4-6v6m4-6v6M6 7V4a1 1 0 011-1h10a1 1 0 011 1v3M4 7h16"/>
</svg>
<span>Clear Cart</span>
</button>
</div>
</div>
<!-- Order Summary -->
<div class="lg:col-span-1 bg-gray-50 dark:bg-gray-700 rounded-lg p-4 sm:p-6 shadow-xl
dark:border dark:border-blue-600/50 dark:shadow-blue-500/30
relative overflow-hidden before:content-[''] before:absolute before:inset-0 before:bg-blue-500/10 before:blur-md before:animate-pulse-light">
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 sm:mb-6 leading-tight relative">Order Summary</h3>
<div class="space-y-3 sm:space-y-4 text-lg text-gray-800 dark:text-gray-200 relative z-10">
<div class="flex justify-between items-center">
<span>Subtotal (4 items)</span>
<span class="font-semibold">$400.00</span>
</div>
<div class="flex justify-between items-center">
<span>Shipping</span>
<span class="font-semibold">$15.00</span>
</div>
<div class="flex justify-between items-center">
<span>Tax (8%)</span>
<span class="font-semibold">$32.00</span>
</div>
<div class="h-px bg-gray-300 dark:bg-gray-600 my-4"></div>
<div class="flex justify-between items-center font-bold text-xl sm:text-2xl text-blue-700 dark:text-blue-300">
<span>Total</span>
<span>$447.00</span>
</div>
</div>
<button class="mt-6 w-full py-3 px-6 rounded-lg text-white font-bold text-lg sm:text-xl
bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800
focus:outline-none focus:ring-4 focus:ring-blue-500/50 dark:focus:ring-blue-400/50
transition-all duration-300 transform hover:scale-105 shadow-lg border border-blue-700 dark:border-blue-900
relative overflow-hidden glowing-button">
Proceed to Checkout
<span class="absolute top-0 left-0 w-full h-full bg-blue-500 opacity-0 animate-pulse-effect"></span>
</button>
<p class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400 relative z-10">
Shipping calculated at next step.
</p>
</div>
</div>
</div>
<!-- Tailwind JIT / Custom styles for glow effects -->
<style>
@keyframes pulse-slow {
0%, 100% { opacity: 0.1; }
50% { opacity: 0.3; }
}
@keyframes pulse-light {
0%, 100% { opacity: 0.05; }
50% { opacity: 0.15; }
}
@keyframes button-glow {
0%, 100% { box-shadow: 0 0 5px var(--glow-color), 0 0 10px var(--glow-color), 0 0 15px var(--glow-color); }
50% { box-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color), 0 0 30px var(--glow-color); }
}
@keyframes text-shadow-glow {
0%, 100% { text-shadow: 0 0 2px rgba(255,255,255,0.7), 0 0 5px rgba(255,255,255,0.5); }
50% { text-shadow: 0 0 3px rgba(255,255,255,0.9), 0 0 8px rgba(255,255,255,0.7); }
}
@keyframes pulse-effect {
0% { transform: scale(0); opacity: 0.5; }
100% { transform: scale(1); opacity: 0; }
}
.animate-pulse-slow { animation: pulse-slow 5s infinite ease-in-out; }
.animate-pulse-light { animation: pulse-light 4s infinite ease-in-out; }
.text-shadow-lg { text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.dark .text-shadow-lg { text-shadow: 0 2px 4px rgba(0,0,0,0.4); }
.dark .text-shadow-glow {
text-shadow: 0 0 5px #60A5FA, 0 0 10px #3B82F6;
animation: text-shadow-glow 3s infinite alternate;
}
.glowing-button {
--glow-color: #3B82F6;
transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.dark .glowing-button {
--glow-color: #60A5FA;
box-shadow: 0 0 5px var(--glow-color), 0 0 10px var(--glow-color) !important;
}
.glowing-button:hover {
box-shadow: 0 0 8px var(--glow-color), 0 0 15px var(--glow-color), 0 0 25px var(--glow-color) !important;
}
.dark .glowing-button:hover {
box-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color), 0 0 30px var(--glow-color) !important;
}
.glowing-button:focus {
box-shadow: 0 0 0 4px var(--glow-color), 0 0 10px var(--glow-color) !important;
}
.glow-on-hover {
transition: box-shadow 0.3s, background-color 0.3s;
}
.glow-on-hover:hover {
box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}
.dark .glow-on-hover:hover {
box-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
}
.glowing-lines {
pointer-events: none;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle at top left, transparent 50%, rgba(59, 130, 246, 0.2) 70%, transparent 80%),
radial-gradient(circle at bottom right, transparent 50%, rgba(59, 130, 246, 0.2) 70%, transparent 80%);
filter: blur(10px);
opacity: 0.6;
animation: glowing-lines-effect 8s infinite alternate;
}
.dark .glowing-lines {
background: radial-gradient(circle at top left, transparent 50%, rgba(96, 165, 250, 0.2) 70%, transparent 80%),
radial-gradient(circle at bottom right, transparent 50%, rgba(96, 165, 250, 0.2) 70%, transparent 80%);
}
@keyframes glowing-lines-effect {
0% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.02); opacity: 0.7; }
100% { transform: scale(1); opacity: 0.6; }
}
.animate-pulse-effect {
animation: pulse-effect 1.5s infinite;
}
</style>
</div>関連コンポーネント
ショッピングカートコンポーネント
レトロ/ビンテージ デザイン、補色配色、ダーク モードのサポートを備えたシンプルでレスポンシブなショッピング カート コンポーネントで、Tailwind CSS を使用して構築されています。
ショッピングカートコンポーネント
グレースケールの配色、適度な複雑さ、ダークテーマをサポートするレスポンシブデザインを備えたレトロ/ビンテージスタイルのショッピングカートコンポーネント。Tailwind CSSを使用するビジネス/企業のWebサイト向けに設計されています。JavaScriptはなく、Tailwindクラスを含むHTMLのみ。画像にはpicsum.photosを使用し、アバターには randomuser.me を使用します。
ショッピングカートコンポーネント
Tailwind CSSを使用したシンプルでミニマリストのショッピングカートコンポーネントで、アースカラーの配色、ソーシャルメディアの目的、ダークテーマのサポートを備えています。レスポンシブで、サンプルアイテムが含まれています。このコンポーネントは、最小限の要素で JavaScript を使用しない基本的な表示用に設計されています。