Styling the Tape Cover: the colour rows

The Problem

So as we know, I wanted to make this resemble a retro VCR tape cover, but the goal was to make things interactive.

First part was create the colour bars that take up large section of the cover.

Initially I believed this just required stacking them at 20% height for each ribbon, and with my responsive goals, initially i just slapped a grow on each and made the container flex.

Here I am just using h-40 as an example

<div className="flex flex-col h-40">
	<div className="bg-tape-cover-blue grow" />
	<div className="bg-tape-cover-green grow" />
	<div className="bg-tape-cover-yellow grow" />
	<div className="bg-tape-cover-orange grow" />
	<div className="bg-tape-cover-pink grow" />
</div>

But this raised another issue, I wanted to make the rows interactive and grow on a mouse hover, finger tap, and in my head this would only increase the size of the ribbon, that wasn't the desired interaction.

So back to the draw board, what I needed was each being a rectangle, that ignored the placing of each other rectangle, laid on top of each other, so they would grow from beneath.

This meant the parent div needed to shift from a flex to position: relative, this would ensure the child elements are all positioned to this container.

The children divs are then adjusted to be position: absolute, and the inset-0 sets them to take up the full height and width of the parent container, while ignoring each other.

Then they just needed to have their heights set, since there are 5 and the all take up a 20% increments, that allowed me to use the h-[number]/5 in Tailwind setting them in 20% increments.

And finally since they are technically inverted, I updated the order, so it was blue from the bottom that took up 100% by using the order-[position] feature.

<div className="relative h-52">
	<div className="absolute inset-0 order-5 h-full bg-tape-cover-blue " />
	<div className="absolute inset-0 order-4 h-4/5 bg-tape-cover-green " />
	<div className="absolute inset-0 order-3 h-3/5 bg-tape-cover-yellow " />
	<div className="absolute inset-0 order-2 h-2/5 bg-tape-cover-orange " />
	<div className="absolute inset-0 order-1 h-1/5 bg-tape-cover-pink " />
</div>