検索コンポーネント

カテゴリ

コンポーネントショッピングカート

ショッピングカート

購入するアイテムを集めるためのEコマース機能

ショッピングカートコンポーネント

ブログ/コンテンツ用に設計された、グレースケールの配色を備えた複雑で応答性の高いショッピングカートコンポーネント。Tailwind CSSを使用したマイクロインタラクションを特徴とし、ダークモードをサポートし、JavaScriptはありません。

開けるプレビュー

                <div class="container mx-auto p-4 dark:bg-gray-900">
  <h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Shopping Cart</h1>

  </div>

ショッピングカートコンポーネント

マテリアルデザイン、単色の配色、およびEコマース向けの適度な複雑さを備えたショッピングカートコンポーネント。Tailwind CSSを使用したダークテーマをサポートするレスポンシブデザイン。

開けるプレビュー

                <div class="container mx-auto p-4 bg-gray-lightest dark:bg-gray-dark">
  <h1 class="text-2xl font-bold mb-4 text-gray-darkest dark:text-gray-lightest">Shopping Cart</h1>

  <div class="shadow-md rounded-lg overflow-hidden">
    <!-- Cart Item -->
    <div class="flex items-center p-4 bg-white dark:bg-gray-darker border-b border-gray-200 dark:border-gray-700">
      <img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Product Name 1</h2>
        <p class="text-gray-dark dark:text-gray-light">Price: $19.99</p>
        <div class="flex items-center mt-2">
          <label for="quantity1" class="mr-2 text-gray-dark dark:text-gray-light">Quantity:</label>
          <input type="number" id="quantity1" name="quantity1" value="1" min="1" class="w-16 px-2 py-1 border rounded dark:bg-gray-darkest dark:text-gray-lightest">
        </div>
      </div>
      <button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item -->
    <div class="flex items-center p-4 bg-white dark:bg-gray-darker border-b border-gray-200 dark:border-gray-700">
      <img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Product Name 2</h2>
        <p class="text-gray-dark dark:text-gray-light">Price: $29.99</p>
        <div class="flex items-center mt-2">
          <label for="quantity2" class="mr-2 text-gray-dark dark:text-gray-light">Quantity:</label>
          <input type="number" id="quantity2" name="quantity2" value="2" min="1" class="w-16 px-2 py-1 border rounded dark:bg-gray-darkest dark:text-gray-lightest">
        </div>
      </div>
      <button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Total -->
    <div class="flex justify-between items-center p-4 bg-white dark:bg-gray-darker">
      <span class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Total:</span>
      <span class="text-lg font-bold text-gray-darkest dark:text-gray-lightest">$79.97</span>
    </div>
  </div>

  <!-- Checkout Button -->
  <div class="mt-4 text-right">
    <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded dark:bg-blue-800 dark:hover:bg-blue-900">
      Checkout
    </button>
  </div>
</div>

ショッピングカートコンポーネント

Tailwind CSS を使用したダークモードをサポートする、ソーシャルメディア用の、マイクロインタラクションと類似の色を備えた複雑で応答性の高いショッピングカートコンポーネント。

開けるプレビュー

                <div class="container mx-auto p-4 lg:p-8 dark:bg-gray-900">
    <h1 class="text-2xl font-bold mb-6 dark:text-white">Shopping Cart</h1>
    
    <div class="flex flex-col lg:flex-row gap-6">
        <!-- Cart Items -->
        <div class="lg:w-2/3">
            <!-- Item 1 -->
            <div class="flex items-center border-b pb-4 mb-4 animate-fadeIn dark:border-gray-700">
                <img src="https://picsum.photos/seed/item1/100" alt="Product Image" class="w-16 h-16 object-cover rounded mr-4">
                <div class="flex-grow">
                    <h2 class="text-lg font-semibold dark:text-white">Awesome Product Name</h2>
                    <p class="text-gray-600 dark:text-gray-400">Color: Blue, Size: M</p>
                    <div class="flex items-center mt-2">
                        <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$49.99</span>
                        <span class="text-sm text-gray-500 line-through ml-2 dark:text-gray-500">$59.99</span>
                    </div>
                </div>
                <div class="flex items-center">
                    <input type="number" value="1" min="1" class="w-16 px-2 py-1 border rounded text-center dark:bg-gray-800 dark:border-gray-700 dark:text-white">
                    <button class="ml-4 text-red-600 hover:text-red-800 transition duration-300 ease-in-out transform hover:scale-110">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <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 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </button>
                </div>
            </div>
            
            <!-- Item 2 -->
             <div class="flex items-center border-b pb-4 mb-4 animate-fadeIn dark:border-gray-700">
                <img src="https://picsum.photos/seed/item2/100" alt="Product Image" class="w-16 h-16 object-cover rounded mr-4">
                <div class="flex-grow">
                    <h2 class="text-lg font-semibold dark:text-white">Another Great Product</h2>
                    <p class="text-gray-600 dark:text-gray-400">Color: Red, Size: L</p>
                     <div class="flex items-center mt-2">
                        <span class="text-lg font-bold text-green-600 dark:text-green-400">$29.99</span>
                    </div>
                </div>
                <div class="flex items-center">
                    <input type="number" value="2" min="1" class="w-16 px-2 py-1 border rounded text-center dark:bg-gray-800 dark:border-gray-700 dark:text-white">
                    <button class="ml-4 text-red-600 hover:text-red-800 transition duration-300 ease-in-out transform hover:scale-110">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <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 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Order Summary -->
        <div class="lg:w-1/3 bg-gray-100 p-6 rounded-lg dark:bg-gray-800 animate-slideInRight">
            <h2 class="text-xl font-bold mb-4 dark:text-white">Order Summary</h2>
            <div class="flex justify-between mb-2">
                <span class="dark:text-gray-300">Subtotal:</span>
                <span class="font-semibold dark:text-white">$109.97</span>
            </div>
             <div class="flex justify-between mb-2">
                <span class="dark:text-gray-300">Shipping:</span>
                <span class="font-semibold dark:text-white">$5.00</span>
            </div>
             <div class="flex justify-between mb-4">
                <span class="dark:text-gray-300">Tax:</span>
                <span class="font-semibold dark:text-white">$8.80</span>
            </div>
            <div class="flex justify-between font-bold text-lg mb-6 dark:text-white">
                <span>Total:</span>
                <span>$123.77</span>
            </div>
            <button class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-300 ease-in-out transform hover:scale-105">
                Checkout
            </button>
        </div>
    </div>
</div>

<style>
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-fadeIn {
    animation: fadeIn 0.5s ease-out;
}

.animate-slideInRight {
     animation: slideInRight 0.5s ease-out;
}
</style>

ショッピングカートコンポーネント

Tailwind CSSを使用してNeumorphismスタイルで設計されたレスポンシブショッピングカートコンポーネントで、ダークテーマをサポートするソーシャルメディアインターフェイスに適しています。

開けるプレビュー

                <div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Shopping Cart</h2>
        <div class="space-y-4">
            <!-- Cart Item 1 -->
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
                <img src="https://picsum.photos/80?random=1" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
                <div class="flex-1 mx-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 1</h3>
                    <p class="text-gray-600 dark:text-gray-400">$19.99</p>
                </div>
                <button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
            </div>
            
            <!-- Cart Item 2 -->
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
                <img src="https://picsum.photos/80?random=2" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
                <div class="flex-1 mx-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 2</h3>
                    <p class="text-gray-600 dark:text-gray-400">$29.99</p>
                </div>
                <button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
            </div>
            
            <!-- Cart Item 3 -->
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-inner">
                <img src="https://picsum.photos/80?random=3" alt="Product Image" class="h-20 w-20 rounded-lg shadow-md">
                <div class="flex-1 mx-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 3</h3>
                    <p class="text-gray-600 dark:text-gray-400">$39.99</p>
                </div>
                <button class="text-red-500 font-semibold dark:text-red-300 hover:text-red-700 dark:hover:text-red-400">Remove</button>
            </div>
        </div>
        <div class="mt-6 border-t border-gray-300 dark:border-gray-600 pt-4">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Total: $89.97</h3>
            <button class="mt-4 w-full bg-blue-500 dark:bg-blue-700 text-white rounded-lg py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Checkout</button>
        </div>
    </div>
</div>

ショッピングカートコンポーネント

eコマースに適した、鮮やかな色彩の現実世界のデザインを模倣したシンプルなレスポンシブショッピングカートコンポーネント。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Shopping Cart</h2>
    <ul class="mt-4 space-y-4">
        <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md">
            <div class="flex-1 ml-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
            </div>
            <input type="number" value="1" min="1" class="w-16 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 rounded-md text-center">
        </li>
        <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md">
            <div class="flex-1 ml-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Product</h3>
                <p class="text-gray-600 dark:text-gray-400">$49.99</p>
            </div>
            <input type="number" value="1" min="1" class="w-16 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 rounded-md text-center">
        </li>
    </ul>
    <div class="mt-6">
        <button class="w-full py-3 text-lg font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">
            Checkout
        </button>
    </div>
</div>

レトロ/ビンテージショッピングカート

レトロ/ビンテージスタイル、パステルカラーの配色、シンプルな複雑さを備えたショッピングカートコンポーネント。Tailwind CSSを使用したダークテーマをサポートするレスポンシブデザイン。

開けるプレビュー

                <div class="container mx-auto p-6 bg-gradient-to-br from-purple-300 to-pink-300 dark:from-purple-700 dark:to-pink-700 font-mono">
  <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
    <div class="px-6 py-4">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Your Cart</h2>
      
      <!-- Cart Item -->
      <div class="flex items-center mb-4">
        <img class="h-12 w-12 rounded-full object-cover mr-4" src="https://picsum.photos/seed/retro1/50/50" alt="Product Image">
        <div class="flex-grow">
          <p class="text-gray-700 dark:text-gray-300 font-semibold">Radical Sneakers</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$89.99</p>
        </div>
        <span class="text-gray-700 dark:text-gray-300">x1</span>
      </div>
      
      <!-- Cart Item -->
      <div class="flex items-center mb-4">
        <img class="h-12 w-12 rounded-full object-cover mr-4" src="https://picsum.photos/seed/retro2/50/50" alt="Product Image">
        <div class="flex-grow">
          <p class="text-gray-700 dark:text-gray-300 font-semibold">Awesome Mixtape</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$12.50</p>
        </div>
        <span class="text-gray-700 dark:text-gray-300">x2</span>
      </div>
      
      <!-- Total -->
      <div class="flex justify-between items-center border-t border-gray-300 dark:border-gray-600 pt-4 mt-4">
        <p class="text-xl font-bold text-gray-800 dark:text-white">Total:</p>
        <p class="text-xl font-bold text-gray-800 dark:text-white">$114.99</p>
      </div>
      
    </div>
    
    <div class="bg-gray-200 dark:bg-gray-700 px-6 py-4">
      <button class="block w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
        Checkout
      </button>
    </div>
    
  </div>
</div>

ショッピングカートコンポーネント

電子商取引用のニューモーフィックスタイルのショッピングカートコンポーネントで、単色の配色、豊富なインタラクティブ要素、Tailwind CSSを使用したダークテーマのサポートが特徴です。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-6">
  <div class="bg-white dark:bg-gray-800 shadow-inner rounded-xl p-8 max-w-md w-full">
    <h2 class="text-gray-800 dark:text-white text-2xl font-semibold mb-6 text-center">Shopping Cart</h2>
    <div class="space-y-4">
      <div class="flex items-center justify-between bg-gray-200 dark:bg-gray-700 rounded-lg p-4">
        <img src="https://picsum.photos/60/60" alt="Product" class="rounded-md shadow-md">
        <div class="flex-1 ml-4">
          <h3 class="text-gray-800 dark:text-white font-medium">Product Title</h3>
          <p class="text-gray-600 dark:text-gray-400">$29.99</p>
        </div>
        <div class="flex items-center">
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">-</button>
          <span class="mx-2">1</span>
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">+</button>
        </div>
      </div>
      <div class="flex items-center justify-between bg-gray-200 dark:bg-gray-700 rounded-lg p-4">
        <img src="https://picsum.photos/60/60" alt="Product" class="rounded-md shadow-md">
        <div class="flex-1 ml-4">
          <h3 class="text-gray-800 dark:text-white font-medium">Another Product</h3>
          <p class="text-gray-600 dark:text-gray-400">$19.99</p>
        </div>
        <div class="flex items-center">
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">-</button>
          <span class="mx-2">2</span>
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">+</button>
        </div>
      </div>
    </div>
    <div class="mt-6 bg-gray-300 dark:bg-gray-600 rounded-lg p-4 flex justify-between items-center">
      <span class="text-gray-800 dark:text-white font-bold">Total:</span>
      <span class="text-lg text-gray-800 dark:text-white font-semibold">$69.97</span>
    </div>
    <div class="mt-4 flex justify-center">
      <button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow">
        Checkout
      </button>
    </div>
  </div>
</div>

ショッピングカートコンポーネント

Glassmorphismエフェクトでデザインされたショッピングカートコンポーネントで、補色の配色を利用し、ダークモード用に最適化されています。ポートフォリオの使用、作品や製品の展示に最適です。

開けるプレビュー

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg backdrop-blur-md bg-opacity-30 border border-gray-200 dark:border-gray-600 p-6 w-full max-w-md">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white text-center">Shopping Cart</h2>
        <div class="mt-4">
            <div class="flex items-center justify-between border-b pb-2 mb-2">
                <img src="https://picsum.photos/50/50" alt="Product Image" class="rounded-md" />
                <div class="flex-1 mx-2">
                    <h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Product Name</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">$29.99</p>
                </div>
                <span class="text-gray-600 dark:text-gray-200">Quantity: 1</span>
            </div>
            <div class="flex items-center justify-between border-b pb-2 mb-2">
                <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-md" />
                <div class="flex-1 mx-2">
                    <h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Another Product</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">$19.99</p>
                </div>
                <span class="text-gray-600 dark:text-gray-200">Quantity: 2</span>
            </div>
        </div>
        <div class="flex items-center justify-between border-t pt-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Total:</h3>
            <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$69.97</span>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">Checkout</button>
    </div>
</div>

ショッピングカートコンポーネント

Neumorphismデザインとダークテーマをサポートするための補色スキームを備えたシンプルなレスポンシブショッピングカートコンポーネント。

開けるプレビュー

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Shopping Cart</h2>  <ul class="space-y-4">    <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600">      <img src="https://picsum.photos/50/50" alt="Product Image" class="mr-4 rounded">      <div class="flex-1">        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name</h3>        <p class="text-gray-600 dark:text-gray-400">$19.99</p>      </div>      <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button>    </li>    <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600">      <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="mr-4 rounded">      <div class="flex-1">        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Product</h3>        <p class="text-gray-600 dark:text-gray-400">$29.99</p>      </div>      <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button>    </li>  </ul>  <div class="mt-6">    <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Total: <span class="text-blue-500">$49.98</span></h4>  </div>  <button class="mt-4 bg-green-500 text-white rounded-full px-4 py-2 shadow transition duration-300 hover:bg-green-600">Checkout</button>  <footer class="mt-6 text-center text-gray-600 dark:text-gray-400">    <p>Created for Portfolio</p>  </footer> </div>

ショッピングカートコンポーネント

レトロ/ビンテージデザイン、補色配色、ダークモードのサポートを備えたシンプルでレスポンシブなショッピングカートコンポーネントで、Tailwind CSS を使用して構築されています。

開けるプレビュー

                <div class="container mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
    <div class="space-y-4">
      <!-- Cart Item -->
      <div class="flex justify-between items-center border-b pb-4 border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-16 h-16 object-cover rounded mr-4 filter sepia" src="https://picsum.photos/seed/retro1/100/100" alt="Product Image">
          <div>
            <h3 class="text-gray-800 dark:text-white font-medium">Retro T-Shirt</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Size: L</p>
          </div>
        </div>
        <div class="text-gray-700 dark:text-gray-200 font-semibold">$29.99</div>
      </div>
      <!-- Cart Item -->
      <div class="flex justify-between items-center border-b pb-4 border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-16 h-16 object-cover rounded mr-4 filter sepia" src="https://picsum.photos/seed/retro2/100/100" alt="Product Image">
          <div>
            <h3 class="text-gray-800 dark:text-white font-medium">Vintage Jeans</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Size: 32</p>
          </div>
        </div>
        <div class="text-gray-700 dark:text-gray-200 font-semibold">$59.99</div>
      </div>
    </div>
    <div class="flex justify-between items-center mt-6">
      <div class="text-xl font-bold text-gray-800 dark:text-white">Total:</div>
      <div class="text-xl font-bold text-gray-800 dark:text-white">$89.98</div>
    </div>
    <button class="mt-6 w-full bg-rose-500 hover:bg-rose-600 text-white font-bold py-2 px-4 rounded dark:bg-teal-500 dark:hover:bg-teal-600 filter sepia">Checkout</button>
  </div>
</div>