JSFiddle - React, Tailwind, and code Playground

Playing with alignment and flexbox

by asemahle

HTML

<div class="area" id="box">
    <div class="content">
        <p>THIS IS</p>
        <p>TEXT</p>
        <p>THAT IS CENTERED</p>
        <p>IFF THERE IS</p>
        <p>ENOUGH</p>
        <p>SPACE!</p>
    </div>
</div>

CSS

.area{
    width: 100px;
    background: red;
    margin:10px;
    display:flex;
    flex-direction:column;
    overflow: hidden;
}
.content {
  margin: auto;
}

JavaScript

let dt = 0;
let $0 = $('#box');
setInterval(() => {
	$0.css({
  	height: (Math.sin(dt) * 250) + 250 + 'px'
  });
  dt += 0.005
}, 1)