JSFiddle - React, Tailwind, and code Playground
HTML
<div class="jobfilter">
<p>content</p>
<p>content</p>
</div>
CSS
html,body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
p{
margin: 0;
padding: 0;
}
.jobfilter{
height: 100%;
background: orange;
width: 100px;
}
.hidden{
transform: translateX(-100%);
}
JavaScript
$(document).ready(function(){
DOaction();
$(window).on('resize',DOaction);
});
function DOaction(){
if($(window).width() <= 400){
$(".jobfilter").addClass('hidden');
}else{
$(".jobfilter").removeClass('hidden');
}
}