JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<div id="description-container" class="processflow">
						<div class="flow-selection-block" role="navigation">
								<div class="flow-selection-item active menu" data-flow-selection="4">
										<h3>Kies uw scenario</h3>
										<p>Autorisatie voor grote bestellingen en bewaken afspraken leverancier incl. controle op tijdige levering in relatie tot betalen.</p>
										<ul role="menu">
												<li data-flow-selection="1">Volautmatisch</li>
												<li data-flow-selection="2">Accorderen</li>
												<li data-flow-selection="6">Completeren</li>
												<li data-flow-selection="3">Budgetbewaking</li>
												<li data-flow-selection="5">Eigen scenario</li>
										</ul>
								</div>
								<div class="flow-selection-item" data-flow-selection="1" data-toggle="tooltip" title="" data-original-title="Dit is het ideale scenario voor het inkoopproces. Alle aanvragen voor artikelen
uit de catalogus worden direct besteld.">
										<h3><span>1</span> Volautomatisch</h3>
										<p>Ideaal scenario, waarbij je een artikel aanvraagt en het direct besteld en geleverd gaat worden</p>
								</div>
								<div class="flow-selection-item" data-flow-selection="2" data-toggle="tooltip" title="" data-original-title="In dit scenario worden aanvragen eerst geaccordeerd m.b.t. inhoudelijke
bevoegdheden en het fiatteren van grote bestellingen.">
										<h3><span>2</span> Accorderen</h3>
										<p>Alles is te bestellen, met aandacht voor inhoudelijke controles en sturing op het beperken van het aantal artikelen en leveranciers</p>
								</div>
								<div class="flow-selection-item" data-flow-selection="6" data-toggle="tooltip" title="" data-original-title="Dit scenario gaat over het completeren van aanvragen door inkoop, daar waar
het de juiste keuze voor artikelen en afspraken met leveranciers betreft.">
										<h3><span>3</span> Completeren</h3>
										<p>Bij overschrijding budgetruimte aanvullende acties nodig, inclusief aandacht...

CSS

#description-container {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		background-color: rgba(0,0,0,.1);
		z-index: 5;
}


		#description-container .description-text {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-flex: 0;
				-ms-flex: 0 0 auto;
				flex: 0 0 auto;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				-ms-flex-direction: column;
				flex-direction: column;
				color: rgb(255,255,255);
				padding: .7em;
		}

.description-text h1 {
		font-size: 1.2rem;
}

.description-text p {
		font-size: .8rem;
		letter-spacing: .05em;
}



.workflow-content {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: center;
		padding: .5em;
}

		.workflow-content .flow-box {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-flex: 0;
				-ms-flex: 0 0 60px;
				flex: 0 0 60px;
				padding: .25em;
				height: 50px;
		}

.flow-box .flow-item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-pack: distribute;
		justify-content: space-around;
		border-radius: 3px;
		background-color: rgba(255,255,255,1);
		padding: .2em;
		text-align: center;
		line-height: 1.2;
		box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
		transition: all .3s ease-in;
}

.flow-box .flow-item-blank {
		display: -webkit-box;
		display: -ms-flexbox;
		display:...