Загрузка...

Адаптивная карточка-слайдер на Tailwind CSS для демонстрации продукта. Показывает заголовок, описание, SVG-иллюстрацию. Идеально для каруселей.
<article data-slide=""
class="snap-start min-w-[260px] overflow-hidden sm:min-w-[300px] md:min-w-[320px] lg:min-w-[340px] sm:h-[520px] sm:p-8 xl:min-w-[360px] xl:bg-slate-100 bg-white h-[480px] ring-black/5 ring-1 rounded-3xl px-6 py-6 relative"
data-element-locator="html > body:nth-of-type(1) > main:nth-of-type(2) > section:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > article:nth-of-type(2)">
<div class="relative z-10">
<h3 class="text-3xl sm:text-4xl tracking-tight font-semibold font-space-grotesk text-gray-900">Fast Refunds</h3>
<p class="mt-3 text-sm sm:text-base text-gray-600 max-w-xs font-geist">If something doesn’t go right, we’ve got you
covered. Our fast and easy refund process gets your money back quickly—no hassle.</p>
</div>
<!-- Decorative illustration -->
<div class="-right-20 w-[120%] h-40 absolute bottom-20" style="">
<svg width="100%" height="100%" viewBox="0 0 100% 100%" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-[304px] h-[285px]" stroke-width="2" data-icon-replaced="true"
style="width: 100%; height: 300px; color: rgb(17, 24, 39);">
<path d="M5.0802 188.988L204.836 34.657L298.83 106.863L89.0185 284.417L5.0802 188.988Z" fill="#A1D0E6"
stroke="black" stroke-width="0.25" stroke-miterlimit="10" class=""></path>
<path d="M10.0856 189.47L204.847 38.9963L293.343 106.99L89.3747 279.607L10.0856 189.47Z" fill="#17235D"
stroke="black" stroke-width="0.25" stroke-miterlimit="10" class=""></path>
<path d="M0.993408 178.335L200.749 23.9927L294.755 96.1989L84.9318 273.764L0.993408 178.335Z" fill="#F0DEC0"
stroke="black" stroke-width="0.25" stroke-miterlimit="10" class=""></path>
<path d="M6.01013 178.817L200.76 28.3435L289.268 96.3368L85.2878 268.955L6.01013 178.817Z" fill="#EFBB50"
stroke="black" stroke-width="0.25" stroke-miterlimit="10" class=""></path>
<path
d="M41.9983 112.328C41.9983 112.328 44.3975 94.144 93.4381 105.566L63.4306 131.223L42.0098 122.648V112.328H41.9983Z"
fill="#CE643A" stroke="black" stroke-width="0.25" stroke-miterlimit="10" class=""></path>
<path
d="M201.139 189.86L232.099 159.543C241.34 164.295 248.814 171.803 253.669 183.42C253.669 183.42 240.778 202.109 201.139 189.86Z"
fill="#CE643A" stroke="black" stroke-width="0.25" stroke-miterlimit="10" class=""></path>
<path
d="M302.813 61.4502L243.74 124.438L207.901 162.642L114.779 261.929L20.4285 176.785L201.139 0.516846L302.813 61.4502Z"
fill="#A1D0E6" stroke="black" stroke-width="0.25" stroke-miterlimit="10" class=""></path>
<path d="M25.4563 176.682L201.644 4.83325L297.372 62.208L114.572 257.107L25.4563 176.682Z" fill="#17235D"
stroke="black" stroke-width="0.25" stroke-miterlimit="10" class=""></path>
<path
d="M156.22 154.79C176.596 154.79 193.115 139.773 193.115 121.247C193.115 102.722 176.596 87.7041 156.22 87.7041C135.843 87.7041 119.325 102.722 119.325 121.247C119.325 139.773 135.843 154.79 156.22 154.79Z"
fill="#3F76B7" stroke="black" stroke-width="0.29" stroke-miterlimit="10" class=""></path>
<path opacity="0.13"
d="M243.74 124.439L207.9 162.643C196.651 156.88 182.496 151.542 164.806 147.65L158.998 152.805L123.48 112.202L175.115 90.2871L179.948 97.37C179.948 97.37 218.37 104.832 243.74 124.439Z"
fill="black" stroke="black" stroke-width="0.25" stroke-miterlimit="10" class=""></path>
<path opacity="0.13"
d="M82.0849 146.284C51.7445 135.631 41.9984 120.57 41.9984 120.57L34.9385 167.59C34.9385 167.59 50.1374 193.717 70.1462 197.597L74.0148 204.703L128.875 187.92L87.8821 142.415L82.0734 146.284H82.0849Z"
fill="black" stroke="black" stroke-width="0.25" stroke-miterlimit="10" class=""></path>
<path
d="M128.887 97.3697L180.511 75.4553L185.343 82.5497C185.343 82.5497 253.337 95.7626 268.157 133.14L253.658 183.409C253.658 183.409 237.541 147.639 170.202 132.819L164.405 137.973L128.887 97.3697Z"
fill="#E78052" stroke="black" stroke-width="0.25" stroke-miterlimit="10" class=""></path>
<path
d="M82.0849 138.042C51.7445 127.389 41.9984 112.328 41.9984 112.328L32.39 165.156C32.39 165.156 50.1374 185.487 70.1462 189.367L74.0148 196.473L128.875 179.69L87.8821 134.185L82.0734 138.053L82.0849 138.042Z"
fill="#E78052" stroke="black" stroke-width="0.25" stroke-miterlimit="10" class=""></path>
<path
d="M207.223 25.4964C208.119 25.99 208.624 26.5181 208.727 27.0806C208.831 27.6545 208.578 28.2285 207.97 28.8254C207.442 29.3305 206.845 29.652 206.19 29.7782C206.087 29.8012 205.984 29.8127 205.88 29.8242C205.1 29.9045 204.273 29.6979 203.389 29.2157L195.078 24.6584C194.206 24.1648 193.701 23.6482 193.597 23.0857C193.494 22.5232 193.735 21.9492 194.355 21.3523C194.894 20.8357 195.491 20.5028 196.146 20.388C196.238 20.365 196.341 20.3535 196.433 20.3535C197.213 20.2732 198.04 20.4798 198.912 20.9734L207.223 25.5308V25.4964ZM206.672 28.1022C206.891 27.8956 206.959 27.689 206.868 27.4938C206.776 27.2987 206.535 27.092 206.11 26.851L197.397 22.064C196.984 21.8344 196.639 21.7196 196.364 21.7196C196.295 21.7196 196.226 21.7196 196.169 21.7311C195.974 21.7655 195.79 21.8688 195.629 22.0181C195.411 22.2247 195.342 22.4313 195.434 22.615C195.526 22.8102 195.755 23.0168 196.169 23.2464L204.882 28.0334C205.295 28.2629 205.639 28.3777 205.926 28.3892C206.007 28.3892 206.076 28.3892 206.144 28.3663C206.34 28.3318 206.512 28.24 206.672 28.0908"
fill="#E1E1E1" class=""></path>
<path
d="M202.678 29.8702C203.573 30.3638 204.078 30.8919 204.181 31.4544C204.296 32.0169 204.044 32.6023 203.424 33.1878C202.884 33.7044 202.287 34.0143 201.633 34.1406C201.541 34.1635 201.438 34.175 201.334 34.1865C200.542 34.2669 199.716 34.0602 198.832 33.5781L190.532 29.0092C189.648 28.5271 189.155 27.999 189.051 27.4365C188.937 26.8626 189.189 26.2886 189.809 25.7031C190.349 25.1866 190.945 24.8651 191.6 24.7389C191.692 24.7159 191.795 24.7044 191.887 24.6929C192.667 24.6126 193.494 24.8192 194.378 25.3013L202.678 29.8702ZM202.149 32.4761C202.368 32.2694 202.425 32.0743 202.345 31.8791C202.264 31.684 202.012 31.4659 201.587 31.2363L192.874 26.4493C192.472 26.2197 192.128 26.1049 191.841 26.1049C191.772 26.1049 191.703 26.1049 191.646 26.1164C191.451 26.1508 191.278 26.2427 191.106 26.4034C190.888 26.61 190.831 26.8052 190.9 27.0003C190.991 27.1955 191.232 27.4021 191.646 27.6317L200.359 32.4187C200.772 32.6482 201.116 32.763 201.403 32.7745C201.472 32.7745 201.553 32.7745 201.621 32.763C201.817 32.7286 201.989 32.6253 202.149 32.4761Z"
fill="#E1E1E1" class=""></path>
<path
d="M211.758 21.1112C212.653 21.6048 213.158 22.1328 213.262 22.6953C213.376 23.2578 213.124 23.8318 212.504 24.4287C211.964 24.9453 211.367 25.2667 210.702 25.393C210.598 25.416 210.506 25.4275 210.403 25.4389C209.623 25.5078 208.796 25.3012 207.912 24.819L199.612 20.2617C198.728 19.7795 198.235 19.2515 198.12 18.689C198.005 18.1265 198.269 17.541 198.889 16.9556C199.429 16.4275 200.026 16.1061 200.691 15.9913C200.783 15.9798 200.864 15.9568 200.955 15.9568C201.736 15.8765 202.563 16.0831 203.447 16.5653L211.746 21.1226L211.758 21.1112ZM211.218 23.717C211.425 23.5104 211.494 23.3037 211.402 23.1201C211.322 22.9249 211.069 22.7183 210.644 22.4887L201.931 17.6903C201.518 17.4607 201.174 17.3459 200.898 17.3459C200.829 17.3459 200.76 17.3459 200.691 17.3574C200.496 17.3918 200.324 17.4951 200.163 17.6443C199.945 17.851 199.888 18.0576 199.968 18.2528C200.049 18.4364 200.301 18.6431 200.714 18.8726L209.427 23.6711C209.841 23.9007 210.185 24.0155 210.472 24.0155C210.541 24.0155 210.621 24.0155 210.69 24.004C210.885 23.9696 211.057 23.8777 211.218 23.7285"
fill="#E1E1E1" class=""></path>
<path
d="M186.744 29.0894L198.522 35.5638L199.199 34.898L200.485 35.5983L197.799 38.1926L196.513 37.4809L197.202 36.8036L187.846 31.6723L187.318 32.1888L186.296 31.6378C186.618 31.3279 186.698 31.0638 186.572 30.8228C186.434 30.5817 186.135 30.3406 185.676 30.0881L186.721 29.0894H186.744Z"
fill="#E1E1E1" class=""></path>
<path
d="M183.989 31.7527L197.053 38.9274L195.457 40.4427L185.091 36.7233L183.564 36.1608L183.53 36.2297L184.942 36.8955L194.286 41.5906L192.977 42.8534L179.925 35.6672L181.498 34.1404L191.634 37.7565L193.138 38.319L193.195 38.2616L191.76 37.5843L182.68 33.004L183.989 31.7527Z"
fill="#E1E1E1" class=""></path>
</svg>
</div>
</article>