JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<div class="wrap">
  <div class="container">
    <div class="parent">
      <div class="box">
        <div class="child dragging">
          <div class="content">
            hello
          </div>
        </div>
        <div class="child translate-y">
          <div class="content">
            hello
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

html, body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.wrap {
  overflow: scroll;
  display: flex;
  flex-direction: column;

  background: #eee;
  
 min-height: 100vh;
}

.container{
  display: flex; 
  justify-content: center; 
  background: #fff;
 
 min-height: 100vh;
}
  
  .parent {
    display: flex;
    flex-direction: column;
     align-items: flex-start;
    padding-bottom: 8px;
    background-color: red;
    padding: 1rem;
  }
 .box {
   min-height: 100px;
 }
  .child {
    width: 100px;
    height: 100px;
    background-color: lightgreen;
    transform: translateY(0px);
    display: flex;
    box-sizing: border-box;
  }
   .dragging {
    position: fixed;
    opacity: .5;
  }
   .translate-y {
    transform: translate(0px, 100px);
  }
  .content {
    flex-grow: 1;
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
  }

JavaScript

const array = [1, 3, '2d', 4, 55, 'abc', '20', 7, 9];
const startItem = '2d';
const endItem = 7;

const filteredArray = array.filter(item => {
  if (typeof item === 'number' && typeof startItem === 'number' && typeof endItem === 'number') {
    return item >= startItem && item <= endItem;
  } else if (typeof item === 'string' && typeof startItem === 'string' && typeof endItem === 'string') {
    return item >= startItem && item <= endItem;
  }
  return false;
});

console.log(filteredArray); // Output: [4, 55, 'abc', '20', 7]