JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<svg width="545px" height="240px" viewBox="0 0 1090 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<defs>

	<mask id="mask_1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="0" y="0" height="1" fill="white">
			<animate attributeName="width" begin="0" dur="200ms" from="0" to="1" fill="freeze" />      
		</rect>
	</mask>
	<mask id="mask_2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="0" y="0" width="1" fill="white">
			<animate attributeName="height" begin="200ms" dur="200ms" from="0" to="1" fill="freeze" />      
		</rect>
	</mask>
	<mask id="mask_3" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="0" y="0" height="1" fill="white">
			<animate attributeName="width" begin="400ms" dur="200ms" from="0" to="1" fill="freeze" />        
		</rect>
	</mask>
	<mask id="mask_4" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="0" y="1" width="1" fill="white">
			<animate attributeName="height" begin="600ms" dur="200ms" from="0" to="1" fill="freeze" />      
			<animate attributeName="y" begin="600ms" dur="200ms" from="1" to="0" fill="freeze" />      
		</rect>
	</mask>
	<mask id="mask_5" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="0" y="0" height="1" fill="white">
			<animate attributeName="width" begin="800ms" dur="200ms" from="0" to="1" fill="freeze" />        
		</rect>
	</mask>
	<mask id="mask_6" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="0" y="1" width="1" fill="white">
			<animate attributeName="height" begin="1000ms" dur="200ms" from="0" to="1" fill="freeze" />      
			<animate attributeName="y" begin="1000ms" dur="200ms" from="1" to="0" fill="freeze" />      
		</rect>
	</mask>
	<mask id="mask_7" x="0" y="0" width="1" height="1"...