<div className="fixed inset-0 z-50 flex justify-end bg-background/80">
  <div
    className="relative flex h-full w-full max-w-sm flex-col gap-6 overflow-y-auto rounded-l-2xl border-l border-accent/10 bg-background px-4 pb-8"
  >
    <div className="absolute right-4 top-4">
      <button aria-label="close cart">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M18 6l-12 12" />
          <path d="M6 6l12 12" />
        </svg>
      </button>
    </div>
    <div className="pt-8">
      <h4 className="text-xl font-bold">Your cart</h4>
    </div>

    <div className="flex flex-col gap-1.5">
      <div
        className="relative flex w-full gap-4 rounded-md bg-card-background p-2 pr-10 shadow ring-1 ring-inset ring-accent/10"
      >
        <div className="flex-none">
          <img
            src="/product.png"
            height="{500}"
            width="{500}"
            alt=""
            className="h-20 w-20"
          />
        </div>
        <div className="flex-0 overflow-hidden">
          <h6
            className="overflow-hidden text-ellipsis text-nowrap text-lg font-medium"
          >
            Nike Air Max Men&apos;s Shoes Lorem ipsum dolor sit amet,
            consectetur adipisicing elit. Debitis quod quis dolor doloremque
            reiciendis, unde ab, natus quibusdam nemo accusamus asperiores
            veniam distinctio nostrum facilis porro ut, corporis mollitia
            dolores.
          </h6>
          <span className="text-sm opacity-60">$99</span>
          <div className="flex items-center">
            <label htmlFor="quantity" className="sr-only">
              Expected Quantity
            </label>
            <button
              className="h-5 w-5 rounded-md bg-accent/10 text-xs ring-1 ring-inset ring-accent/20 active:scale-95"
            >
              -
            </button>
            <input
              id="quantity"
              className="w-8 border-0 bg-transparent px-0 text-center text-sm"
              type="text"
              inputMode="numeric"
              value="1"
            />
            <button
              className="h-5 w-5 rounded-md bg-accent/10 text-xs ring-1 ring-inset ring-accent/20 active:scale-95"
            >
              +
            </button>
          </div>
        </div>
        <div className="absolute right-3 top-3">
          <button aria-label="Remove Product from Cart">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="h-4 w-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M4 7l16 0" />
              <path d="M10 11l0 6" />
              <path d="M14 11l0 6" />
              <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
              <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
            </svg>
          </button>
        </div>
      </div>
      <div
        className="relative flex w-full gap-4 rounded-md bg-card-background p-2 pr-10 shadow ring-1 ring-inset ring-accent/10"
      >
        <div className="flex-none">
          <img
            src="/product.png"
            height="{500}"
            width="{500}"
            alt=""
            className="h-20 w-20"
          />
        </div>
        <div className="flex-0 overflow-hidden">
          <h6
            className="overflow-hidden text-ellipsis text-nowrap text-lg font-medium"
          >
            Nike Air Max Men&apos;s Shoes Lorem ipsum dolor sit amet,
            consectetur adipisicing elit. Debitis quod quis dolor doloremque
            reiciendis, unde ab, natus quibusdam nemo accusamus asperiores
            veniam distinctio nostrum facilis porro ut, corporis mollitia
            dolores.
          </h6>
          <span className="text-sm opacity-60">$99</span>
          <div className="flex items-center">
            <label htmlFor="quantity" className="sr-only">
              Expected Quantity
            </label>
            <button
              className="h-5 w-5 rounded-md bg-accent/10 text-xs ring-1 ring-inset ring-accent/20 active:scale-95"
            >
              -
            </button>
            <input
              id="quantity"
              className="w-8 border-0 bg-transparent px-0 text-center text-sm"
              type="text"
              inputMode="numeric"
              value="1"
            />
            <button
              className="h-5 w-5 rounded-md bg-accent/10 text-xs ring-1 ring-inset ring-accent/20 active:scale-95"
            >
              +
            </button>
          </div>
        </div>
        <div className="absolute right-3 top-3">
          <button aria-label="Remove Product from Cart">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="h-4 w-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M4 7l16 0" />
              <path d="M10 11l0 6" />
              <path d="M14 11l0 6" />
              <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
              <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
            </svg>
          </button>
        </div>
      </div>
      <div
        className="relative flex w-full gap-4 rounded-md bg-card-background p-2 pr-10 shadow ring-1 ring-inset ring-accent/10"
      >
        <div className="flex-none">
          <img
            src="/product.png"
            height="{500}"
            width="{500}"
            alt=""
            className="h-20 w-20"
          />
        </div>
        <div className="flex-0 overflow-hidden">
          <h6
            className="overflow-hidden text-ellipsis text-nowrap text-lg font-medium"
          >
            Nike Air Max Men&apos;s Shoes Lorem ipsum dolor sit amet,
            consectetur adipisicing elit. Debitis quod quis dolor doloremque
            reiciendis, unde ab, natus quibusdam nemo accusamus asperiores
            veniam distinctio nostrum facilis porro ut, corporis mollitia
            dolores.
          </h6>
          <span className="text-sm opacity-60">$99</span>
          <div className="flex items-center">
            <label htmlFor="quantity" className="sr-only">
              Expected Quantity
            </label>
            <button
              className="h-5 w-5 rounded-md bg-accent/10 text-xs ring-1 ring-inset ring-accent/20 active:scale-95"
            >
              -
            </button>
            <input
              id="quantity"
              className="w-8 border-0 bg-transparent px-0 text-center text-sm"
              type="text"
              inputMode="numeric"
              value="1"
            />
            <button
              className="h-5 w-5 rounded-md bg-accent/10 text-xs ring-1 ring-inset ring-accent/20 active:scale-95"
            >
              +
            </button>
          </div>
        </div>
        <div className="absolute right-3 top-3">
          <button aria-label="Remove Product from Cart">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="h-4 w-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M4 7l16 0" />
              <path d="M10 11l0 6" />
              <path d="M14 11l0 6" />
              <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
              <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
            </svg>
          </button>
        </div>
      </div>
      <div
        className="relative flex w-full gap-4 rounded-md bg-card-background p-2 pr-10 shadow ring-1 ring-inset ring-accent/10"
      >
        <div className="flex-none">
          <img
            src="/product.png"
            height="{500}"
            width="{500}"
            alt=""
            className="h-20 w-20"
          />
        </div>
        <div className="flex-0 overflow-hidden">
          <h6
            className="overflow-hidden text-ellipsis text-nowrap text-lg font-medium"
          >
            Nike Air Max Men&apos;s Shoes Lorem ipsum dolor sit amet,
            consectetur adipisicing elit. Debitis quod quis dolor doloremque
            reiciendis, unde ab, natus quibusdam nemo accusamus asperiores
            veniam distinctio nostrum facilis porro ut, corporis mollitia
            dolores.
          </h6>
          <span className="text-sm opacity-60">$99</span>
          <div className="flex items-center">
            <label htmlFor="quantity" className="sr-only">
              Expected Quantity
            </label>
            <button
              className="h-5 w-5 rounded-md bg-accent/10 text-xs ring-1 ring-inset ring-accent/20 active:scale-95"
            >
              -
            </button>
            <input
              id="quantity"
              className="w-8 border-0 bg-transparent px-0 text-center text-sm"
              type="text"
              inputMode="numeric"
              value="1"
            />
            <button
              className="h-5 w-5 rounded-md bg-accent/10 text-xs ring-1 ring-inset ring-accent/20 active:scale-95"
            >
              +
            </button>
          </div>
        </div>
        <div className="absolute right-3 top-3">
          <button aria-label="Remove Product from Cart">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="h-4 w-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M4 7l16 0" />
              <path d="M10 11l0 6" />
              <path d="M14 11l0 6" />
              <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
              <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
            </svg>
          </button>
        </div>
      </div>
      <div
        className="relative flex w-full gap-4 rounded-md bg-card-background p-2 pr-10 shadow ring-1 ring-inset ring-accent/10"
      >
        <div className="flex-none">
          <img
            src="/product.png"
            height="{500}"
            width="{500}"
            alt=""
            className="h-20 w-20"
          />
        </div>
        <div className="flex-0 overflow-hidden">
          <h6
            className="overflow-hidden text-ellipsis text-nowrap text-lg font-medium"
          >
            Nike Air Max Men&apos;s Shoes Lorem ipsum dolor sit amet,
            consectetur adipisicing elit. Debitis quod quis dolor doloremque
            reiciendis, unde ab, natus quibusdam nemo accusamus asperiores
            veniam distinctio nostrum facilis porro ut, corporis mollitia
            dolores.
          </h6>
          <span className="text-sm opacity-60">$99</span>
          <div className="flex items-center">
            <label htmlFor="quantity" className="sr-only">
              Expected Quantity
            </label>
            <button
              className="h-5 w-5 rounded-md bg-accent/10 text-xs ring-1 ring-inset ring-accent/20 active:scale-95"
            >
              -
            </button>
            <input
              id="quantity"
              className="w-8 border-0 bg-transparent px-0 text-center text-sm"
              type="text"
              inputMode="numeric"
              value="1"
            />
            <button
              className="h-5 w-5 rounded-md bg-accent/10 text-xs ring-1 ring-inset ring-accent/20 active:scale-95"
            >
              +
            </button>
          </div>
        </div>
        <div className="absolute right-3 top-3">
          <button aria-label="Remove Product from Cart">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="h-4 w-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M4 7l16 0" />
              <path d="M10 11l0 6" />
              <path d="M14 11l0 6" />
              <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
              <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div className="h-fit bg-card-background ring-1 ring-inset ring-accent/10">
      <div
        className="gap-8 rounded-md bg-card-background p-4 ring-1 ring-inset ring-accent/10"
      >
        <h4>Order Summary</h4>
        <div className="text-sm">
          <div className="mt-1 flex items-center justify-between">
            <span className="block opacity-60">Subtotal</span>
            <span className="block font-bold">$395.96</span>
          </div>
          <div className="mt-1 flex items-center justify-between">
            <span className="block opacity-60">Savings on discount</span>
            <span className="block font-bold">$00.00</span>
          </div>
          <div className="mt-1 flex items-center justify-between">
            <span className="block opacity-60">Shipping</span>
            <span className="block font-bold">$53.47</span>
          </div>
        </div>
        <div className="mt-2 h-[1px] w-full bg-accent/5"></div>
        <div className="mt-2 flex items-center justify-between">
          <span className="block opacity-60">Total</span>
          <span className="block font-bold">$449.43</span>
        </div>
        <div className="mt-6">
          <form action="#">
            <label htmlFor="giftCode" className="text-xs font-medium opacity-40">
              Enter a gift code for a disccount
            </label>
            <div className="flex gap-2">
              <input
                type="text"
                id="giftCode"
                placeholder="XXXXXX"
                className="flex-1 rounded-md border-none bg-accent/5 text-xs ring-1 ring-inset ring-accent/10"
              />
              <button
                type="submit"
                className="rounded-md bg-primary p-2 text-xs font-medium text-primary-foreground"
              >
                Apply
              </button>
            </div>
          </form>
        </div>
        <div>
          <button
            className="mt-6 w-full rounded-md bg-primary p-2 font-medium text-primary-foreground"
          >
            Go to checkout
          </button>
        </div>
        <div className="mt-6">
          <h6 className="text-lg opacity-60">Accepted Payments</h6>
          <div className="mt-2 flex items-center gap-1">
            <div
              className="rounded-md bg-accent/5 p-1 ring-1 ring-inset ring-accent/10"
            >
              <span className="sr-only block">Visa Card</span>
              <svg
                className="h-8 w-full"
                xmlns="http://www.w3.org/2000/svg"
                x="0px"
                y="0px"
                width="100"
                height="100"
                viewBox="0 0 48 48"
              >
                <path
                  fill="#1565C0"
                  d="M45,35c0,2.209-1.791,4-4,4H7c-2.209,0-4-1.791-4-4V13c0-2.209,1.791-4,4-4h34c2.209,0,4,1.791,4,4V35z"
                ></path>
                <path
                  fill="#FFF"
                  d="M15.186 19l-2.626 7.832c0 0-.667-3.313-.733-3.729-1.495-3.411-3.701-3.221-3.701-3.221L10.726 30v-.002h3.161L18.258 19H15.186zM17.689 30L20.56 30 22.296 19 19.389 19zM38.008 19h-3.021l-4.71 11h2.852l.588-1.571h3.596L37.619 30h2.613L38.008 19zM34.513 26.328l1.563-4.157.818 4.157H34.513zM26.369 22.206c0-.606.498-1.057 1.926-1.057.928 0 1.991.674 1.991.674l.466-2.309c0 0-1.358-.515-2.691-.515-3.019 0-4.576 1.444-4.576 3.272 0 3.306 3.979 2.853 3.979 4.551 0 .291-.231.964-1.888.964-1.662 0-2.759-.609-2.759-.609l-.495 2.216c0 0 1.063.606 3.117.606 2.059 0 4.915-1.54 4.915-3.752C30.354 23.586 26.369 23.394 26.369 22.206z"
                ></path>
                <path
                  fill="#FFC107"
                  d="M12.212,24.945l-0.966-4.748c0,0-0.437-1.029-1.573-1.029c-1.136,0-4.44,0-4.44,0S10.894,20.84,12.212,24.945z"
                ></path>
              </svg>
            </div>
            <div
              className="rounded-md bg-accent/5 p-1 ring-1 ring-inset ring-accent/10"
            >
              <span className="sr-only block">MasterCard</span>

              <svg
                className="h-8 w-full"
                xmlns="http://www.w3.org/2000/svg"
                x="0px"
                y="0px"
                width="100"
                height="100"
                viewBox="0 0 48 48"
              >
                <path
                  fill="#3F51B5"
                  d="M45,35c0,2.209-1.791,4-4,4H7c-2.209,0-4-1.791-4-4V13c0-2.209,1.791-4,4-4h34c2.209,0,4,1.791,4,4V35z"
                ></path>
                <path
                  fill="#FFC107"
                  d="M30 14A10 10 0 1 0 30 34A10 10 0 1 0 30 14Z"
                ></path>
                <path
                  fill="#FF3D00"
                  d="M22.014,30c-0.464-0.617-0.863-1.284-1.176-2h5.325c0.278-0.636,0.496-1.304,0.637-2h-6.598C20.07,25.354,20,24.686,20,24h7c0-0.686-0.07-1.354-0.201-2h-6.598c0.142-0.696,0.359-1.364,0.637-2h5.325c-0.313-0.716-0.711-1.383-1.176-2h-2.973c0.437-0.58,0.93-1.122,1.481-1.595C21.747,14.909,19.481,14,17,14c-5.523,0-10,4.477-10,10s4.477,10,10,10c3.269,0,6.162-1.575,7.986-4H22.014z"
                ></path>
              </svg>
            </div>
            <div
              className="rounded-md bg-accent/5 p-1 ring-1 ring-inset ring-accent/10"
            >
              <span className="sr-only block">Paypal</span>

              <svg
                className="h-8 w-full"
                xmlns="http://www.w3.org/2000/svg"
                x="0px"
                y="0px"
                width="100"
                height="100"
                viewBox="0 0 48 48"
              >
                <path
                  fill="#1565C0"
                  d="M18.7,13.767l0.005,0.002C18.809,13.326,19.187,13,19.66,13h13.472c0.017,0,0.034-0.007,0.051-0.006C32.896,8.215,28.887,6,25.35,6H11.878c-0.474,0-0.852,0.335-0.955,0.777l-0.005-0.002L5.029,33.813l0.013,0.001c-0.014,0.064-0.039,0.125-0.039,0.194c0,0.553,0.447,0.991,1,0.991h8.071L18.7,13.767z"
                ></path>
                <path
                  fill="#039BE5"
                  d="M33.183,12.994c0.053,0.876-0.005,1.829-0.229,2.882c-1.281,5.995-5.912,9.115-11.635,9.115c0,0-3.47,0-4.313,0c-0.521,0-0.767,0.306-0.88,0.54l-1.74,8.049l-0.305,1.429h-0.006l-1.263,5.796l0.013,0.001c-0.014,0.064-0.039,0.125-0.039,0.194c0,0.553,0.447,1,1,1h7.333l0.013-0.01c0.472-0.007,0.847-0.344,0.945-0.788l0.018-0.015l1.812-8.416c0,0,0.126-0.803,0.97-0.803s4.178,0,4.178,0c5.723,0,10.401-3.106,11.683-9.102C42.18,16.106,37.358,13.019,33.183,12.994z"
                ></path>
                <path
                  fill="#283593"
                  d="M19.66,13c-0.474,0-0.852,0.326-0.955,0.769L18.7,13.767l-2.575,11.765c0.113-0.234,0.359-0.54,0.88-0.54c0.844,0,4.235,0,4.235,0c5.723,0,10.432-3.12,11.713-9.115c0.225-1.053,0.282-2.006,0.229-2.882C33.166,12.993,33.148,13,33.132,13H19.66z"
                ></path>
              </svg>
            </div>
            <div
              className="rounded-md bg-accent/5 p-1 ring-1 ring-inset ring-accent/10"
            >
              <span className="sr-only block">Bitcoin</span>

              <svg
                className="h-8 w-full"
                xmlns="http://www.w3.org/2000/svg"
                x="0px"
                y="0px"
                width="100"
                height="100"
                viewBox="0 0 48 48"
              >
                <path
                  fill="#ffc107"
                  d="M44,24c0,11.044-8.956,20-20,20S4,35.044,4,24S12.956,4,24,4S44,12.956,44,24z"
                ></path>
                <path
                  fill="#fff8e1"
                  d="M17,34V14h8.199c2.41,0,4.234,0.465,5.48,1.395s1.867,2.293,1.867,4.086c0,0.98-0.25,1.844-0.746,2.59c-0.5,0.746-1.195,1.293-2.086,1.641c1.016,0.258,1.816,0.773,2.402,1.555C32.703,26.043,33,26.992,33,28.121c0,1.922-0.609,3.379-1.828,4.367S28.219,33.98,25.965,34H17z M21,22h4.363c2.063-0.035,3.098-0.824,3.098-2.445c0-0.906-0.262-1.559-0.785-1.957S26.328,17,25.199,17H21V22z M21,25v6h4.844C26.805,31,29,30.531,29,28.391S27.883,25.027,26,25H21z"
                ></path>
                <path
                  fill="#fff8e1"
                  d="M20 11h3v5h-3V11zM25 11h3v5h-3V11zM20 32h3v5h-3V32zM25 32h3v5h-3V32z"
                ></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
#Cart Using Table Element

#Modal Like with Cart on Right

#Two Columns Cart Items on Left Summary on Right
