<div class="wrapper">
	<div class="buttons">
		<button type="button" class="button" data-filter="all">All</button>
		<button type="button" class="button" data-toggle=".frontend">Frontend</button>
		<button type="button" class="button" data-toggle=".backend">Backend</button>
		<button type="button" class="button" data-toggle=".sql">SQL</button>
		<button type="button" class="button" data-toggle=".other">Other</button>
	</div>
	
	<div class="flex">
		<div class="container">
			<i class="devicon-html5-plain-wordmark colored frontend"></i>
			<i class="devicon-css3-plain-wordmark colored frontend"></i>
			<i class="devicon-sass-original colored frontend"></i>
			<i class="devicon-javascript-plain colored frontend"></i>
			<i class="devicon-typescript-plain colored frontend"></i>
			<i class="devicon-php-plain colored backend"></i>
			<i class="devicon-laravel-plain colored backend"></i>
			<i class="devicon-ruby-plain colored backend"></i>
			<i class="devicon-nodejs-plain-wordmark colored backend"></i>
			<i class="devicon-mysql-plain-wordmark colored sql"></i>
			<i class="devicon-postgresql-plain-wordmark colored sql"></i>
			<i class="devicon-sqlite-plain-wordmark colored sql"></i>
			<i class="devicon-docker-plain-wordmark colored other"></i>
			<i class="devicon-webpack-plain-wordmark colored other"></i>
			<i class="devicon-babel-plain colored other"></i>
			<i class="devicon-ubuntu-plain-wordmark colored other">
			</i>
			<i class="devicon-fedora-plain colored other"></i>
			<i class="devicon-vscode-plain colored other"></i>
		</div>
		<div class="logs"></div>
	</div>
</div>
.wrapper {
	margin: 3rem;
}

.flex {
	display: flex;
	align-items: flex-start;
}

.logs {
	border: 1px dotted #333;
	padding: 1rem;
	width: 300px;
	margin-left: 2rem;
	
	p {
		margin: 0 0 .5rem;
	}
}

.buttons {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 3rem;
}

.button {
	border: 1px solid #333;
	border-right: none;
	color: #333;
	padding: .5rem 1rem;
	background-color: transparent;
	cursor: pointer;
	width: 100px;
	transition: .3s ease;
	position: relative;
	
	&:first-child {
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
	}
	
	&:last-child {
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		border-right: 1px solid #333;
	}
	
	&.mixitup-control-active {
		color: #f0f0f0;
		background-color: #333;
	}
	
	&:after {
		position: absolute;
		content: '';
		width: 25px;
		height: 3px;
		bottom: -1rem;
		left: 50%;
		transform: translateX( -50% );
		background-color: #000;
	}

	&[data-filter] {
		&:after {
			content: none;
		}
	}

	&[data-toggle=".frontend"] {
		&:after {
			background-color: #1976D2;
		}
	}
	
	&[data-toggle=".backend"] {
		&:after {
			background-color: #388E3C;
		}
	}
	
	&[data-toggle=".sql"] {
		&:after {
			background-color: #FFA000;
		}
	}
	
	&[data-toggle=".other"] {
		&:after {
			background-color: #455A64;
		}
	}
}

.container {
	max-width: 550px;
	width: 550px;
	gap: .5rem;
	display: flex;
	flex-wrap: wrap;

	i {
		font-size: 100px;
		border-radius: 4px;
		border: 2px solid #000;
		background-color: #f0f0f0;
		padding: .5rem;
		display: block;

		&.frontend {
			border-color: #1976D2;
			background-color: #E3F2FD;
		}
		
		&.backend {
			border-color: #388E3C;
			background-color: #E8F5E9;
		}
		
		&.sql {
			border-color: #FFA000;
			background-color: #FFF8E1;
		}
		
		&.other {
			border-color: #455A64;
			background-color: #ECEFF1;
		}
	}
}
View Compiled
import mixitup from "https://cdn.skypack.dev/mixitup@3.3.1";

mixitup( '.container', {
	selectors: {
        target: 'i'
    },
	animation: {
        effects: 'fade rotateY(-90deg)',
		duration: 350,
		easing: 'ease-in-out',
		queue: false,
		clampHeight: false
    },
	callbacks: {
		onMixStart: ( state, futureState ) => {
			displayLog( `mixStart` );
		},
		onMixBusy: ( state ) => {
			displayLog( `mixBusy` );
		},
		onMixEnd: ( state ) => {
			displayLog( `mixEnd` );
		},
		onMixFail: ( state ) => {
			displayLog( `mixFail` );
		},
		onMixClick: ( state, originalEvent ) => {
			displayLog( `mixClick` );
		}
	}
});

const displayLog = log => {
	const logBox = document.querySelector( '.logs' );
	const p = document.createElement( 'p' );
	p.textContent = log;

	logBox.appendChild( p );
};

// icon shuffle
const icons = document.querySelectorAll( '.container i' );
const iconsArr = shuffle( Array.from( icons ) );
const container = document.querySelector( '.container' );
container.innerHTML = '';
iconsArr.forEach( icon => container.appendChild( icon ) );

function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
	return array;
}

External CSS

  1. https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.