BASIC-LIBRARY / SECTION / ECOMMERCE
Ecommerce Four
sale
Nordic Knits
Soft Wool Crewneck
Color
Size
M
XL
$15.00
$30.00
incl. VAT plus shipping
2-4 day shipping
Description
Crafted with 100% responsibly sourced wool, this lightweight
pullover features a timeless silhouette and reinforced collar
stitching. It's designed to be breathable yet warm —
perfect for cool mornings or layering in winter.
Each piece is pre-washed for softness and durability, ensuring a lasting fit. Available in limited seasonal colors and sustainably shipped with recycled packaging.
Each piece is pre-washed for softness and durability, ensuring a lasting fit. Available in limited seasonal colors and sustainably shipped with recycled packaging.
@import url("/template/basic-library/section/ecommerce/ecommerce-four/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-lg 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="space-y-4">
<div class="relative overflow-hidden rounded-lg bg-gray-100">
<img
src="https://media.istockphoto.com/id/1061436448/photo/beautiful-young-woman-in-a-sweater-warmly-smiling.jpg?s=2048x2048&w=is&k=20&c=Qb3hVFOgqMg_04xJ7dYx4Sk_JIduSV9zq_CicNYjVH8="
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>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="overflow-hidden rounded-lg bg-gray-100">
<img
src="https://media.istockphoto.com/id/1061436452/photo/beautiful-young-woman-in-a-sweater-warmly-smiling.jpg?s=2048x2048&w=is&k=20&c=vJxN7ONF0-8XCeZjY_Z38ettl_f6C7oDrehrJx4MsdA="
loading="lazy"
alt="Photo by Himanshu Dewangan"
class="h-full w-full object-cover object-center border"
/>
</div>
<div class="overflow-hidden rounded-lg bg-gray-100">
<img
src="https://media.istockphoto.com/id/1061436438/photo/beautiful-young-woman-in-a-sweater-warmly-smiling.jpg?s=2048x2048&w=is&k=20&c=WCE54YUAa-y03p6b5gqT3ySRfZW6-dRz5GJPklcWqwU="
loading="lazy"
alt="Photo by Himanshu Dewangan"
class="h-full w-full object-cover object-center border"
/>
</div>
</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">Nordic Knits</span>
<h2 class="text-2xl font-bold text-gray-800 lg:text-3xl">
Soft Wool Crewneck
</h2>
</div>
<div class="mb-6 flex items-center md:mb-10">
<div class="-ml-1 flex gap-0.5">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-yellow-400"
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
><svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-yellow-400"
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
><svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-yellow-400"
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
><svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-yellow-400"
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
><svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-300"
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="ml-2 text-sm text-gray-500">4.2</span>
<a
href="#"
class="transition duration-100 active:text-indigo-700 ml-4 text-sm font-semibold text-indigo-500 hover:text-indigo-600"
>
view all 47 reviews
</a>
</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">
$15.00
</span>
<span class="line-through mb-0.5 text-red-500">$30.00</span>
</div>
<span class="text-sm text-gray-500">incl. VAT plus shipping</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">2-4 day shipping</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-4 pr-4 px-4 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"
>
<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 class="mt-10 md:mt-16 lg:mt-20">
<div class="mb-3 text-lg font-semibold text-gray-800">
Description
</div>
<div class="text-gray-500">
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
Crafted with 100% responsibly sourced wool, this lightweight
pullover features a timeless silhouette and reinforced collar
stitching. It's designed to be breathable yet warm —
perfect for cool mornings or layering in winter.
</span>
<br class />
<br class />
<span
data-node-handle="base-text"
class="inline-block h-auto w-auto"
>
Each piece is pre-washed for softness and durability, ensuring a
lasting fit. Available in limited seasonal colors and sustainably
shipped with recycled packaging.
</span>
</div>
</div>
</div>
</div>
</div>
</div>
© 2025 tailsections.com. All rights reserved