<main id="app">
<div class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
<div class="inline-block min-w-full shadow rounded-lg overflow-hidden">
<table class="min-w-full leading-normal table-fixed">
<thead>
<tr class="text-gray-600 bg-white">
<th class="w-1/5 p-5 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider"></th>
<th class="w-2/5 p-5 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider bg-pink-200">
<img src="https://sisainteriors.com/brand/logo.svg" alt="SISA Interiots" class="h-10 w-auto mx-auto" />
</th>
<th class="w-2/5 px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider">Others</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, id) in items" :key="id">
<td class="w-1/5 px-5 py-5 border-b border-gray-200 text-sm">
<p>{{ item.title }}</p>
</td>
<td class="w-2/5 px-5 py-5 border-b border-gray-200 text-sm">
<ul class="h-full w-full">
<li v-for="(sisaItem, j) in item.sisa" :key="j" class="p-2">
<div class="flex items-center space-x-2">
<svg viewBox="0 0 20 20" fill="currentColor" class="check-circle w-6 h-6">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
<span>{{sisaItem}}</span>
</div>
</li>
</ul>
</td>
<td class="w-2/5 px-5 py-5 border-b border-gray-200 text-sm">
<ul class="h-full w-full">
<li v-for="(othersItem, k) in item.others" :key="k" class="p-2">{{othersItem}}</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>new Vue({
el: '#app',
data: {
items: [
{
title: "Expert Team",
sisa: [
"Adroit team with 10+ years of experience in creating your dream homes",
"Offers instant cost estimation on your desired design",
],
others: ["Amateur team or inefficiency in work progress"],
},
{
title: "CUSTOM DESIGN",
sisa: [
"Designing tailor-made 3D visual interior designs using advanced software",
"100% genuine designs, crafted based on the client’s unique needs",
],
others: [
"Cluttered designs with only 2D visuals",
"No assurance on design authenticity",
],
},
{
title: "ACCESSIBILITY",
sisa: [
"Virtual meet-ups with our designer",
"Free Consultation",
"One-stop-shop for home decors",
"Undertake turnkey projects",
],
others: ["Exhausting market trips to get things done"],
},
{
title: "PRODUCT RANGE",
sisa: [
"An extensive range of branded home decor products that fit perfectly for your dream home",
],
others: ["Very few products and repetitive designs to choose from"],
},
{
title: "PRICING",
sisa: [
"No hidden costs",
"Transparent billing structure",
"Price Match Guarantee",
"Affordable pricing",
],
others: [
"Unexplained price hikes between initial and final payment",
"No standard pricing",
"No Transparency ",
],
},
{
title: "PROJECT DELIVERY",
sisa: [
"Move-in exactly on the 30th day from design finalisation",
"Live-track the project and keep up with the updates",
],
others: [
"Uncertain delivery dates",
"Lacks professionalism and work ethics",
],
},
{
title: "QUALITY",
sisa: [
"Uses hardware materials from top brands",
"150 rigorous quality tests",
"100% in-house team",
],
others: [
"Uses low-grade materials for cost cuts",
"Few quality checks",
"Outsourced to small contractors",
],
},
{
title: "WARRANTY",
sisa: ["Up to 10-years material warranty & service warranty"],
others: ["No warranty for products and services"],
},
{
title: "SUPPORT & MAINTENANCE",
sisa: [
"Constant support and maintenance services with our team for up to 5 years",
],
others: ["Short-term support"],
},
],
}
})