JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<nav class="blocks">
  <a href="#" class="block">
    <div class="block__item">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75l3 3m0 0l3-3m-3 3v-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </div>
  </a>
  <a href="#" class="block">
    <div class="block__item">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
      </svg>
    </div>
  </a>
  <a href="#" class="block">
    <div class="block__item">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
      </svg>
    </div>
  </a>
  <a href="#" class="block">
    <div class="block__item">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
        <path stroke-linecap="round" stroke-linejoin="round"...

CSS

@import "https://unpkg.com/open-props/normalize.min.css";
@import "https://unpkg.com/open-props/open-props.min.css";

:root {
  --lerp-0: 1; /* === sin(90deg) */
  --lerp-1: calc(sin(30deg));
  --lerp-2: calc(sin(20deg));
  --lerp-3: calc(sin(10deg));
  --lerp-4: 0;
  --transition: ease;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

h1 {
  position: fixed;
  top: var(--size-4);
  right: var(--size-4);
  margin: 0;
  color: var(--gray-0);
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family:  'Google Sans', sans-serif, system-ui;
  background: var(--gradient-6);
}

/*:root {
  --lerp-0: 1;
  --lerp-1: 0.5625;
  --lerp-2: 0.25;
  --lerp-3: 0.0625;
  --lerp-4: 0;
}*/

.block:nth-of-type(1){--hue: 10;}
.block:nth-of-type(2){--hue: 210;}
.block:nth-of-type(3){--hue: 290;}
.block:nth-of-type(4){--hue: 340;}
.block:nth-of-type(5){--hue: 30;}
.block:nth-of-type(6){--hue: 220;}
.block:nth-of-type(7){--hue: 320;}
.block:nth-of-type(8){--hue: 280;}
.block:nth-of-type(9){--hue: 240;}

.blocks {
  display: flex;
  list-style-type: none;
  padding: var(--size-2);
  border-radius: var(--radius-3);
  gap: var(--size-4);
  background: hsl(0 0% 100% / 0.5);
  box-shadow: 
    0 2px 0 0 hsl(0 0% 100% / 0.5) inset,
    0 2px 0 0 hsl(0 0% 25% / 0.5);
  align-items: center;
  justify-content: center;
  align-content: center;
  backdrop-filter: blur(10px);
}

.blocks:hover {
  --show: 1;
}

.block {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  align-content: center;
  transition: all 0.2s;
  flex: calc(0.2 + (var(--lerp, 0) * 1.5));
  max-width: 100px;
  position: relative;
}

.block:after {
  content: '';
  width: 5%;
  aspect-ratio: 1;
  background: var(--text-1);
  position: absolute;
  bottom: 10%;
  left: 50%;
  border-radius: var(--radius-3);
  transform: translate(-50%, -50%);
  z-index: -1;
}

.block:before {
  content: '';
  position: absolute;
  width: calc(100% + var(--size-4));
  bottom: 0;
  aspect-ratio:...