BASIC-LIBRARY / SECTION / ECOMMERCE
Ecommerce Five
Winterline Apparel
Textured Knit Crewneck
4.7
132 customer reviews
Color
Size
M
XL
$42.00
$59.00
includes tax, shipping calculated at checkout
Ships in 1–3 business days
@import url("/template/basic-library/section/ecommerce/ecommerce-five/raw/styles.css");
<div
class="bg-white pt-6 pb-6 py-6 sm:pt-8 sm:pb-8 sm:py-8 lg:pt-12 lg:pb-12 lg:py-12"
>
<div
class="ml-auto mr-auto mx-auto max-w-screen-xl pl-4 pr-4 px-4 md:pl-8 md:pr-8 md:px-8"
>
<div class="grid md:grid-cols-2 gap-8">
<div class="grid lg:grid-cols-5 gap-4">
<div class="order-last lg:order-none flex gap-4 lg:flex-col">
<div class="overflow-hidden rounded-lg bg-gray-100">
<img
src="https://media.istockphoto.com/id/526193773/photo/fashionable-man-in-winter-knitted-clothes.jpg?s=2048x2048&w=is&k=20&c=jgJYxGUMTycyY5ReB-VdXZX2OW_hcsAMXXZyEqlv-bQ="
loading="lazy"
alt="Photo by Himanshu Dewangan"
class="h-full w-full object-cover object-center"
/>
</div>
<div class="overflow-hidden rounded-lg bg-gray-100">
<img
src="https://media.istockphoto.com/id/526193755/photo/fashionable-man-in-winter-knitted-clothes.jpg?s=2048x2048&w=is&k=20&c=RsUq-XLhTQRnnLFSI5pWQPdu3Qc_2PqX-gW2t2FtxlY="
loading="lazy"
alt="Photo by Himanshu Dewangan"
class="h-full w-full object-cover object-center"
/>
</div>
<div class="overflow-hidden rounded-lg bg-gray-100">
<img
src="https://media.istockphoto.com/id/526193751/photo/fashionable-man-in-winter-knitted-clothes.jpg?s=2048x2048&w=is&k=20&c=HaeMi98HVKqSNaDAKbdLRMotvqh5QydMM7Mi4DshRvE="
loading="lazy"
alt="Photo by Himanshu Dewangan"
class="h-full w-full object-cover object-center"
/>
</div>
</div>
<div
class="relative overflow-hidden lg:col-span-4 rounded-lg bg-gray-100"
>
<img
src="https://media.istockphoto.com/id/526193769/photo/fashionable-man-in-winter-knitted-clothes.jpg?s=2048x2048&w=is&k=20&c=nQsXDtCoaSMKZVuPBhW_FqhJUPLIBJxujh68xpwQd-g="
loading="lazy"
alt="Photo by Himanshu Dewangan"
class="h-full w-full object-cover object-center"
/>
<span
class="left-0 top-0 uppercase tracking-wider absolute rounded-br-lg bg-red-500 pl-3 pr-3 px-3 pt-1.5 pb-1.5 py-1.5 text-sm text-white"
>
sale
</span>
<a
href="#"
class="right-4 top-4 inline-block transition duration-100 active:text-gray-700 absolute rounded-lg border bg-white pl-3.5 pr-3.5 px-3.5 pt-3 pb-3 py-3 text-center text-sm font-semibold text-gray-500 outline-none ring-indigo-300 hover:bg-gray-100 focus-visible:ring md:text-base"
>
<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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
></path>
</svg>
</a>
</div>
</div>
<div class="md:pt-8 md:pb-8 md:py-8">
<div class="mb-2 md:mb-3">
<span class="inline-block mb-0.5 text-gray-500">
Winterline Apparel
</span>
<h2 class="text-2xl font-bold text-gray-800 lg:text-3xl">
Textured Knit Crewneck
</h2>
</div>
<div class="mb-6 flex items-center gap-3 md:mb-10">
<div
class="flex h-7 items-center gap-1 rounded-full bg-indigo-500 pl-2 pr-2 px-2 text-white"
>
<span class="text-sm">4.7</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
></path>
</svg>
</div>
<span class="transition duration-100 text-sm text-gray-500">
132 customer reviews
</span>
</div>
<div class="mb-4 md:mb-6">
<span
class="inline-block mb-3 text-sm font-semibold text-gray-500 md:text-base"
>
Color
</span>
<div class="flex flex-wrap gap-2">
<span
class="ring-offset-1 transition duration-100 h-8 w-8 rounded-full border bg-gray-800 ring-2 ring-gray-800"
></span>
<button
type="button"
class="ring-offset-1 transition duration-100 h-8 w-8 rounded-full border bg-gray-500 ring-2 ring-transparent hover:ring-gray-200"
></button>
<button
type="button"
class="ring-offset-1 transition duration-100 h-8 w-8 rounded-full border bg-gray-200 ring-2 ring-transparent hover:ring-gray-200"
></button>
<button
type="button"
class="ring-offset-1 transition duration-100 h-8 w-8 rounded-full border bg-white ring-2 ring-transparent hover:ring-gray-200"
></button>
</div>
</div>
<div class="mb-8 md:mb-10">
<span
class="inline-block mb-3 text-sm font-semibold text-gray-500 md:text-base"
>
Size
</span>
<div class="flex flex-wrap gap-3">
<button
type="button"
class="transition duration-100 active:bg-gray-200 flex h-8 w-12 items-center justify-center rounded-md border bg-white text-center text-sm font-semibold text-gray-800 hover:bg-gray-100"
>
XS
</button>
<button
type="button"
class="transition duration-100 active:bg-gray-200 flex h-8 w-12 items-center justify-center rounded-md border bg-white text-center text-sm font-semibold text-gray-800 hover:bg-gray-100"
>
S
</button>
<span
class="cursor-default flex h-8 w-12 items-center justify-center rounded-md border border-indigo-500 bg-indigo-500 text-center text-sm font-semibold text-white"
>
M
</span>
<button
type="button"
class="transition duration-100 active:bg-gray-200 flex h-8 w-12 items-center justify-center rounded-md border bg-white text-center text-sm font-semibold text-gray-800 hover:bg-gray-100"
>
L
</button>
<span
class="cursor-not-allowed flex h-8 w-12 items-center justify-center rounded-md border border-transparent bg-white text-center text-sm font-semibold text-gray-400"
>
XL
</span>
</div>
</div>
<div class="mb-4">
<div class="flex items-end gap-2">
<span class="text-xl font-bold text-gray-800 md:text-2xl">
$42.00
</span>
<span class="line-through mb-0.5 text-red-500">$59.00</span>
</div>
<span class="text-sm text-gray-500">
includes tax, shipping calculated at checkout
</span>
</div>
<div class="mb-6 flex items-center gap-2 text-gray-500">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"
></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"
></path>
</svg>
<span class="text-sm">Ships in 1–3 business days</span>
</div>
<div class="flex gap-2.5">
<a
href="#"
class="inline-block transition duration-100 active:bg-indigo-700 flex-1 rounded-lg bg-indigo-500 pl-8 pr-8 px-8 pt-3 pb-3 py-3 text-center text-sm font-semibold text-white outline-none ring-indigo-300 hover:bg-indigo-600 focus-visible:ring sm:flex-none md:text-base"
>
Add to cart
</a>
<a
href="#"
class="inline-block transition duration-100 active:text-gray-700 rounded-lg bg-gray-200 pl-8 pr-8 px-8 pt-3 pb-3 py-3 text-center text-sm font-semibold text-gray-500 outline-none ring-indigo-300 hover:bg-gray-300 focus-visible:ring md:text-base"
>
Buy now
</a>
</div>
</div>
</div>
</div>
</div>
© 2025 tailsections.com. All rights reserved