<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
screens: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1170px",
},
extend: {
colors: {
"266cfb": "#266cfb",
272727: "#272727",
"9d9c9c": "#9d9c9c",
777777: "#777777",
"96989c": "#96989c",
888888: "#888888",
"e8e8e8": "#e8e8e8",
},
},
},
}
</script>
</head>
<body>
<div class="container mx-auto px-3.5">
<div class="flex flex-row">
<div class="w-3/12">1</div>
<div class="w-9/12">
<div>
<div class="mb-8 shadow-lg">
<div class="p-3.5 flex flex-row">
<div class="w-4/12">
<div>
<a href="#" class="block">
<img src="https://htmldemo.net/abelo/abelo/assets/images/product-image/12.jpg" alt="" />
</a>
</div>
</div>
<div class="w-5/12 flex flex-row">
<div class="mt-5">
<h2 class="font-normal leading-none text-xl">
<a href="#" class="text-272727 transition delay-150 duration-300 ease-in-out hover:text-266cfb">Naham WiFi HD 1080P</a>
</h2>
<a class="block my-2.5 leading-none text-9d9c9c" href="#"><span class="text-xs uppercase">STUDIO DESIGN</span></a>
<div class="product-intro-info">
<p class="py-5 text-sm leading-6 text-777777">
Dimensions (W x H x D): TV without stand: 43.7" x 25.3" x
3", TV with stand: 43.7" x 27.7" x 8.5"
</p>
</div>
</div>
</div>
<div class="w-3/12">
<div class="mt-5 ml-6 flex items-center">
<div class="self-center">
<div class="text-xs text-888888 mb-5 leading-none">
Availability: <span class="text-266cfb">599 In Stock</span>
</div>
<ul class="flex flex-row mb-9 items-baseline">
<li class="text-96989c mr-1.5 text-lg line-through font-normal leading-none">
$21.90
</li>
<li class="text-272727 text-2xl font-semibold leading-none">
$18.50
</li>
</ul>
<button class="uppercase bg-266cfb text-white mb-5 px-10 leading-9 text-sm font-semibold rounded transition delay-150 duration-300 ease-in-out hover:bg-272727">
Add to cart
</button>
<ul class="flex flex-row gap-2.5 justify-center">
<li class="w-9 h-9 cursor-pointer bg-e8e8e8 rounded-full transition delay-150 duration-300 ease-in-out hover:bg-266cfb"></li>
<li class="w-9 h-9 cursor-pointer bg-e8e8e8 rounded-full transition delay-150 duration-300 ease-in-out hover:bg-266cfb"></li>
<li class="w-9 h-9 cursor-pointer bg-e8e8e8 rounded-full transition delay-150 duration-300 ease-in-out hover:bg-266cfb"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-row">
<div class="w-3/12">1</div>
<div class="w-9/12">
<div>
<div class="mb-8 shadow-lg">
<div class="p-3.5 flex flex-row">
<div class="w-4/12">
<div>
<a href="#" class="block">
<img src="https://htmldemo.net/abelo/abelo/assets/images/product-image/12.jpg" alt="" />
</a>
</div>
</div>
<div class="w-5/12 flex flex-row">
<div class="mt-5">
<h2 class="font-normal leading-none text-xl">
<a href="#" class="text-272727 transition delay-150 duration-300 ease-in-out hover:text-266cfb">Naham WiFi HD 1080P</a>
</h2>
<a class="block my-2.5 leading-none text-9d9c9c" href="#"><span class="text-xs uppercase">STUDIO DESIGN</span></a>
<div class="product-intro-info">
<p class="py-5 text-sm leading-6 text-777777">
Dimensions (W x H x D): TV without stand: 43.7" x 25.3" x
3", TV with stand: 43.7" x 27.7" x 8.5"
</p>
</div>
</div>
</div>
<div class="w-3/12">
<div class="mt-5 ml-6 flex items-center">
<div class="self-center">
<div class="text-xs text-888888 mb-5 leading-none">
Availability: <span class="text-266cfb">599 In Stock</span>
</div>
<ul class="flex flex-row mb-9 items-baseline">
<li class="text-96989c mr-1.5 text-lg line-through font-normal leading-none">
$21.90
</li>
<li class="text-272727 text-2xl font-semibold leading-none">
$18.50
</li>
</ul>
<button class="uppercase bg-266cfb text-white mb-5 px-10 leading-9 text-sm font-semibold rounded transition delay-150 duration-300 ease-in-out hover:bg-272727">
Add to cart
</button>
<ul class="flex flex-row gap-2.5 justify-center">
<li class="w-9 h-9 cursor-pointer bg-e8e8e8 rounded-full transition delay-150 duration-300 ease-in-out hover:bg-266cfb"></li>
<li class="w-9 h-9 cursor-pointer bg-e8e8e8 rounded-full transition delay-150 duration-300 ease-in-out hover:bg-266cfb"></li>
<li class="w-9 h-9 cursor-pointer bg-e8e8e8 rounded-full transition delay-150 duration-300 ease-in-out hover:bg-266cfb"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.