Banners

1export default function Banner() {
2  return (
3    <>
4      <div className="flex w-full items-center justify-between bg-gradient-to-r from-violet-500 via-[#9938CA] to-[#E0724A] px-4 py-1 text-center text-sm font-medium text-white md:px-14">
5        <p>Get 20% OFF on Your First Order!</p>
6        <div className="flex items-center space-x-6">
7          <button
8            type="button"
9            className="rounded-full bg-white px-7 py-2 font-normal text-gray-800">
10            Claim Offer
11          </button>
12          <button type="button">
13            <svg
14              width="14"
15              height="14"
16              viewBox="0 0 14 14"
17              fill="none"
18              xmlns="http://www.w3.org/2000/svg">
19              <rect
20                y="12.532"
21                width="17.498"
22                height="2.1"
23                rx="1.05"
24                transform="rotate(-45.74 0 12.532)"
25                fill="#fff"
26              />
27              <rect
28                x="12.533"
29                y="13.915"
30                width="17.498"
31                height="2.1"
32                rx="1.05"
33                transform="rotate(-135.74 12.533 13.915)"
34                fill="#fff"
35              />
36            </svg>
37          </button>
38        </div>
39      </div>
40 
41      {/* fake content */}
42      <div className="h-60"></div>
43    </>
44  );
45}