Develop Reference

How to change a scroll bar height?

This is my tailwind scroll bar and I want to change its height how can I do that? The below image shows its height. I cannot change the sm:h-96 can you suggest to me an method to change the height ?
{/** Chat Scroll View */}
<div class=" text-gray-500 bg-white rounded-lg border w-full max-w-xl sm:h-96 p-4 overflow-y-scroll scrollbar border-solid border-2 border-red-500">
<div class="space-y-1">
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/300"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-green-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Ryann Remo</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
<div>
<small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
23
</small>
</div>
</div>
</div>
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/300"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-green-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Ryann Remo</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
<div>
<small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
23
</small>
</div>
</div>
</div>
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/500"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Karp Bonolo</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
<div>
<small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
10
</small>
</div>
</div>
</div>
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/500"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Karp Bonolo</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
<div>
<small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
10
</small>
</div>
</div>
</div>
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md border-l-4 border-red-500">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/200"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Mercedes Yemelyan</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
</div>
</div>
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/600"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Cadi Kajetán</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
</div>
</div>
<div className="entry cursor-pointer transform hover:scale-105 duration-300 transition-transform bg-white mb-4 rounded p-4 flex shadow-md">
<div className="flex-2">
<div className="w-12 h-12 relative">
<img
className="w-12 h-12 rounded-full mx-auto"
src={"https://picsum.photos/650"}
alt="chat-user"
/>
<span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
</div>
</div>
<div className="flex-1 px-2">
<div className="truncate w-32">
<span className="text-gray-800">Rina Samuel</span>
</div>
<div>
<small className="text-gray-600">Yea, Sure!</small>
</div>
</div>
<div className="flex-2 text-right">
<div>
<small className="text-gray-500">15 April</small>
</div>
</div>
</div>
</div>
</div>
{/** Chat Scroll View */}

If you want to change the height based on your preference you can use an arbitrary value like h-[120px] or h-[30rem] or h-[180px] for example. you can change the value inside the square brackets according to the height you want.
You can learn more about arbitrary values ​​in the tailwind documentation here:
https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values

Why does my Vue JS app crashes in prod server but works fine in dev?

I have run my Vue JS app in development server multiple times and never faced a single issue with any of the functions. However, as soon as I deploy my application in the production server everything except this specific discount function causes my system to crash.
So after selecting one of the option (either amount or percentage) and as soon as I type in the value inside the input box, my application stops working.
I am still very new to web app development so it would be great if someone can help me out with this. TIA
This is my function that I am using to calculate discounts:
applyDiscount(){
this.balance=this.totalCost-this.totalPaid
if(this.isPercentage=='Percentage'){
if(this.discountAmount<=100 ){
this.discount=(this.totalCost/100)*this.discountAmount
this.form.discount=this.discount
this.str=""
if(this.discount<=this.totalCost-this.totalPaid){
this.adjustment=this.totalCost-this.discount
this.balance=this.balance-this.discount
this.str=""
}
else{
this.str="Discount amount exceeding balance"
}
}
else{
this.str="Percentage is exceeding 100%"
}
}else if(this.isPercentage=='Amount'){
this.str=""
this.discount=this.discountAmount
this.form.discount=this.discount
if(this.discount<=this.totalCost-this.totalPaid){
this.adjustment=this.totalCost-this.discount
this.balance=this.balance-this.discount
this.str=""
}
else{
this.str="Discount amount exceeding balance"
}
}
},
This template code:
<!--discount-->
<form #submit.prevent>
<div class="tracking-widest text-lg text-left title-font font-bold text-gray-500 border-b border-gray-300 ">
Discount:
</div>
<!--discount-->
<div class="inline-flex items-center mt-3 ">
<label for="" class="mb-3 text-gray-800">Give discount in?</label>
<input type="radio" name="test_id" #change="onChange($event)" value="Amount" class="form-radio h-5 w-5 text-indigo-600 mr-2" ><span class="ml-2 mr-2 text-gray-700">Amount</span>
<input type="radio" name="test_id" #change="onChange($event)" value="Percentage" class="form-radio h-5 w-5 text-indigo-600 mr-1"><span class="ml-2 mr-2 text-gray-700">Percentage</span>
</div>
<div class="flex justify-start">
<div class="">
<label class="text-gray-700 dark:text-gray-200" for="discount">Discount Amount</label>
<input #keypress="isNumber($event)" v-model.number="discountAmount" id="discount" type="text"
class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
</div>
</div>
<div>{{this.applyDiscount()}}</div>
<!--discount-->
<div v-if="this.str.length>=1">
<div class=" flex items-center mt-10 px-8">
<svg class="h-6 w-6 fill-current text-red-400 mr-4" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path
d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" />
</svg>
<div>
<p class="font-medium text-red-500">{{str}}</p>
</div>
</div>
</div>
<!--after discount-->
<div class="flex justify-end items-end ml-6" >
<div class=" mt-5 w-full sm:w-2/4 lg:w-1/4">
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Total Cost:</span> <span
class="text-lg rounded ml-2 text-gray-500 "><span class="text-xl" >৳{{this.totalCost}}</span></span> </div>
<div class=" w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Total Paid:</span> <span
class="text-lg rounded ml-2 text-gray-500 "><span class="text-xl" >৳{{this.totalPaid}}</span></span> </div>
<div class=" w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Discount:</span> <span
class="text-lg ml-2 text-gray-600"><span class="text-xl" >৳{{this.discount}}</span></span> </div>
<div class=" w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Adjustment:</span> <span
class="text-lg ml-2 text-gray-600"><span class="text-xl" >৳{{this.totalCost-this.discount}}</span></span> </div>
<div class=" w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Balance:</span> <span
class="text-lg ml-2 text-gray-600"><span class="text-xl" >৳{{this.balance}}</span></span> </div>
<div class="w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
</div>
</div>
</form>
<!--form-->
</div>
</div>
<!--discount-->
I am sort of posting all of it since I can't really figure out what the issue is.

Filter HTML elements Vanilla JS

Im trying to create a filter to filter different products but so far no success
ive tried different ways like using a long way by using IF for every filter didnt get it to work and code was way to big, tried for loop also wasnt able to do it
im trying to use "data" attribute in HTML to mark items seems to be a best way to do it?
any help is more then welcome
heres a code bellow
const buttons = document.querySelectorAll('.btn')
const products = document.querySelectorAll('.products')
buttons.forEach(function (button) {
button.addEventListener('click', (event) => {
event.preventDefault()
/* active button */
buttons.forEach((button) => {
button.classList.remove('active')
})
button.className = 'active'
products.forEach(product => {
showProduct = button.textContent
if (product.getAttribute('data-filter') == showProduct.toLowerCase()){
product.style.display = 'block'
} else {
product.style.display = 'none'
}
})
})
})
<!DOCTYPE html>
<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">
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body class="bg-indigo-900 font-mono">
<nav class="mt-4 mb-10 text-white">
<div class="nav-bar">
<ul class="flex flex-row justify-center items-center space-x-8">
<li class=" transition transform duaration-100 hover:scale-110">
<a class="active btn filter-btn" href="#">All</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Cake</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Cookies</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Donuts</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Pudding</a>
</li>
</ul>
</div>
</nav>
<main>
<section class="container mx-auto flex flex-row justify-center items-center ">
<div class="grid grid-flow-row grid-cols-4 grid-rows-4 gap-10 ">
<!-- cakes -->
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='cake' src="https://images.pexels.com/photos/291528/pexels-photo-291528.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='cake' src="https://images.pexels.com/photos/1070850/pexels-photo-1070850.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<!-- cookies -->
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='cookies' src="https://images.pexels.com/photos/890577/pexels-photo-890577.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='cookies' src="https://images.pexels.com/photos/1020585/pexels-photo-1020585.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<!-- donuts -->
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='donuts' src="https://images.pexels.com/photos/2955820/pexels-photo-2955820.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='donuts' src="https://images.pexels.com/photos/3656118/pexels-photo-3656118.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<!-- pudding -->
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='pudding' src="https://images.pexels.com/photos/302468/pexels-photo-302468.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='pudding' src="https://images.pexels.com/photos/3026801/pexels-photo-3026801.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
</div>
</section>
</main>
<script src="/app.js"></script>
</body>
</html>

So it seems you are looking to hide everything except what button you press.
I would first place a helper class to hide elements I want to filter out of the dom using classList to toggle the class with remove() and add()
I would move the dataset.filter attribute to the parent element .products rather than use the image as a reference and try to travel up the DOM to target the parent element.
Remove and rename your image class to products-img so it is different than the products parent element.
Use a callback to add to your eventListener that checks the targetBtn value or textContent run it through an forEach loop and if statement to handle the All button, showing all elements.
else we run a forEach over products, first hiding all elements and then matching our dataset.filter value using a conditional that checks if it is equal to e.target.textContent button.
See example below:
const buttons = document.querySelectorAll('.btn')
const products = document.querySelectorAll('.products')
function filterButtons(e) {
let targetBtn = e.target.textContent.toLowerCase()
targetBtn === 'all' ?
products.forEach(p => {
p.classList.contains('hide') ?
p.classList.remove('hide') : null
}) :
products.forEach(p => {
p.classList.add('hide')
p.dataset.filter === targetBtn ?
p.classList.remove('hide') : null
})
}
buttons.forEach(function(button) {
button.addEventListener('click', filterButtons)
})
.hide {
display: none;
}
<!DOCTYPE html>
<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">
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body class="bg-indigo-900 font-mono">
<nav class="mt-4 mb-10 text-white">
<div class="nav-bar">
<ul class="flex flex-row justify-center items-center space-x-8">
<li class=" transition transform duaration-100 hover:scale-110">
<a class="active btn filter-btn" href="#">All</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Cake</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Cookies</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Donuts</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Pudding</a>
</li>
</ul>
</div>
</nav>
<main>
<section class="container mx-auto flex flex-row justify-center items-center ">
<div class="grid grid-flow-row grid-cols-4 grid-rows-4 gap-10 parent">
<!-- cakes -->
<div data-filter='cake' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/291528/pexels-photo-291528.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<div data-filter='cake' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/1070850/pexels-photo-1070850.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<!-- cookies -->
<div data-filter='cookies' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/890577/pexels-photo-890577.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<div data-filter='cookies' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/1020585/pexels-photo-1020585.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<!-- donuts -->
<div data-filter='donuts' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/2955820/pexels-photo-2955820.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<div data-filter='donuts' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/3656118/pexels-photo-3656118.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<!-- pudding -->
<div data-filter='pudding' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/302468/pexels-photo-302468.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<div data-filter='pudding' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/3026801/pexels-photo-3026801.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
</div>
</section>
</main>
<script src="/app.js"></script>
</body>
</html>

Overflow issue on mobile device

As you can see from the screen I have a problem with my portion of the page, I state that all the other sections of the site that have overflow work very well. I have tried several times to review the code but I do not know what it can be ... also put the code of the portion that does not work below
<div class="messageDiv w-full h-full flex flex-col justify-start overflow-scroll relative text-xl lg:text-xs">
<!--prototipo di messaggio-->
<% for(var i=messages.length-1 ; i >= 0 ; i--){ %>
<% if(messages[i].id_user == userId){ %>
<div class="flex justify-end items-center">
<div class="talk-bubble tri-right radius right-in bg-gray-900 text-white w-auto px-5 py-2 mb-2 lg:mb-1 mr-5">
<div class="talktext flex flex-col justify-center items-center">
<p class="text-left w-full"><%=messages[i].text%></p>
<div class="info-message flex justify-start items-center w-full pt-1 mt-1 overflow-hidden">
<p class="title text-rigth username"><%=messages[i].username%></p>
<i class="fas fa-circle text-white px-2"></i>
<i class="far fa-clock title"></i>
<p class="title ml-1"><%=messages[i].date.getHours()%>:<%=messages[i].date.getMinutes()%></p>
</div>
</div>
</div>
</div>
<% } else{ %>
<div class="flex justify-start items-center">
<div class="talk-bubble tri-left radius left-in bg-black text-white w-auto px-5 py-2 ml-5 mb-2 lg:mb-1">
<div class="talktext flex flex-col justify-center items-center">
<p class="text-left w-full"><%=messages[i].text%></p>
<div class="info-message flex justify-end items-center w-full pt-1 mt-1 overflow-hidden flex-no-wrap">
<p class="text-giallo text-rigth username"><%=messages[i].username%></p>
<i class="fas fa-circle text-white px-2"></i>
<i class="far fa-clock text-giallo"></i>
<p class="text-giallo ml-1"><%=messages[i].date.getHours()%>:<%=messages[i].date.getMinutes()%></p>
</div>
</div>
</div>
</div>
<% } %>
<% } %>
<!--end-->
</div>
I use tailwind as a css framework and it's how you can guess a project in node.js.
Thanks in advance.

For mobile devices use:-
touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up|pan-down ] || pinch-zoom ] | manipulation
This is same as overflow axis.

Unknown custom element

I want to create a tab in vuejs but all i get is an error, Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I have already import all needed components including the tab component but still get the error.
Any help will be appreciated
Profile Component
<template>
<layout>
<div class="mt-4 md:mt-10">
<div class="mx-auto px-3 sm:px-6 xl:px-16">
<div class="flex flex-wrap justify-between">
<div class="md:w-2/6 lg:w-1/5 w-full mb-6 lg:mb-0 lg:block md:order-last lg:order-none">
<div class="bg-white rounded shadow">
</div>
</div>
</div>
<div>
<div class="text-center justify-center flex-col">
<div class="border-t border-b flex justify-center items-center">
<p class="px-3 py-1 flex-col">
<span class="font-bold text-sm">543</span>
<span class="text-gray-500 text-xs">Posts</span>
</p>
<p class="px-3 border-l py-1 flex-col">
<span class="font-bold text-sm">436</span>
<span class="text-gray-500 text-xs">Following</span>
</p>
</div>
</div>
</div>
</div>
<div class="p-4 bg-white shadow mt-4">
<div class="flex items-center">
<i data-feather="map-pin" class="text-gray-600 w-4 h-4"></i>
<span class="text-sm ml-3 font-semibold text-gray-800">Lagos, Nigeria</span>
</div>
<div class="flex items-center mt-2">
<i data-feather="calendar" class="text-gray-600 w-4 h-4"></i>
<span class="text-sm ml-3 font-semibold text-gray-800">Joined, January 2018</span>
</div>
<div class="flex items-center mt-2">
<i data-feather="link" class="text-gray-600 w-4 h-4"></i>
<span class="text-sm ml-3 font-semibold text-gray-800 hover:underline">https://twingle.io</span>
</div>
<div class="flex items-center mt-2">
<i data-feather="globe" class="text-gray-600 w-4 h-4"></i>
<span class="text-sm ml-3 font-semibold text-gray-800 hover:underline">https://omike.me</span>
</div>
</div>
<div class="p-4 bg-white shadow mt-4">
<div>
<p class="font-bold">My Skills</p>
</div>
<div class="mt-3">
<ul class="inline">
<li class="inline mr-2">Javascript</li>·
<li class="inline mr-2">PHP</li>·
<li class="inline mr-2">Laravel</li>·
<li class="inline mr-2">NodeJS</li>·
<li class="inline">VueJS</li>
</ul>
</div>
</div>
</div>
<div class="w-full md:w-3/7 lg:w-1/2">
<tabs>
<tab name="Services" :selected="true">
<h1>What we do</h1>
</tab>
<tab name="Pricing">
<h1>How much we do it for</h1>
</tab>
<tab name="About Us">
<h1>Why we do it</h1>
</tab>
</tabs>
</div>
<div class="hidden lg:block md:w-2/6 lg:w-1/4">
<Info/>
</div>
</div>
</div>
</div>
</layout>
</template>
<script>
import Info from '#/Shared/Info'
import Layout from '#/Shared/Layout'
import UserFeed from '#/Components/User/UserFeed'
import Tabs from '#/Components/Tabs'
export default {
components:{
Info,
UserFeed,
Layout,
Tabs,
},
}
</script>
Tabs Component
<template>
<div>
<div class="bg-white shadow rounded px-4 mb-6">
<ul class="list-reset flex pro-tab">
<li class="pro-tab-active py-2">Posts</li>
<li class="ml-6 py-2">Achievements</li>
<li class="ml-6 py-2 hidden sm:block">Activities</li>
</ul>
</div>
<div class="tab-details">
<slot></slot>
</div>
</div>
</template>
<script>
import Tab from '#/components/Tab'
export default {
component:{Tab},
mounted(){
console.log(this.$children);
}
}
</script>
<style>
</style>
Tab Component
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

Try adding the Tab component to the ProfileComponent:
components:{
Info,
UserFeed,
Layout,
Tabs,
Tab
},
Even though you've already added it to the Tabs components object, that's not accessible to the template processor when parsing the ProfileComponent, which is where Tab appears. You should also be able to remove the import from the Tabs component.