JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/ef.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">

<style>
.icon:hover{background-color:#727272;}
</style>

<body style="margin:0px;overflow:hidden;"></body>

JavaScript

const { t, inform, exec } = ef

const main = new t`
>div.row.blue-grey.darken-4
	+list
`
const icon = t`
>div.col.s{{size}}.center.flow-text.icon.animated.{{anim}}.{{color = white-text}}.waves-effect.waves-light
	@click = result
	>i.material-icons.small
		%style=padding-top:8px;
		.{{icon}}
	>br
  .{{text}}
`
// For testing on Desktop Browser uncomment Next line  and ...
obj="account_circle,Profile,tada,1\ncomment,Chat,jello,2\nbuild,Config,flip,3\ninfo,About,bounceIn,4"
// comment Next Line
//var obj = window.AppInventor.getWebViewString(); 

var datar = obj.split("\n");

datar.forEach(function(line) {
var k=[];
value = line.split(",")
	  
	if(value[0] != '')
		{
			k['icon'] = value[0]
			k['text'] = value[1]
			k['anim']= value[2]
			k['size'] = parseInt(12 / datar.length)
			k['return'] = value[3]
     

			main.list.push(new icon({$data: k,$methods: { result({state}) 
			{ window.AppInventor.setWebViewString(k.return) } }
			}))
		} 
})
main.$mount({target: document.body})
// Design by Jhim Preston   [email protected]