JSFiddle - React, Tailwind, and code Playground

by Ace Tributon

HTML

<!DOCTYPE html>
<html>
    <head>
    <style id='infest'></style>
    </head>

    <body><center><h2>Are you ready to witness oro greatness?
    </h2><button onclick='loading();'>Gimme Squares!</button><button onclick='ready();'>I'm Ready</button></center>
    <div id='thid'>If you see this after you click the buttons, your Javascript may not be supported!</div></body>
    <script>
		var $=(ele,input)=>document.querySelectorAll(ele).forEach(input),
				add=(ele,...input)=>$(ele,i=>i.innerHTML+=input.join('')),
      	search=()=>alert('search has been initializd!'),
      	carni=()=>document.querySelectorAll('.herbivore').forEach(i=>i.style="display:none;")+document.querySelectorAll('.carnivore').forEach(i=>i.style="display:block;"),
        herbi=()=>document.querySelectorAll('.carnivore').forEach(i=>i.style="display:none;")+document.querySelectorAll('.herbivore').forEach(i=>i.style="display:block;transition:2s;"),
        toggle=(item)=>{
          	if(`${item}:visible`.length){
            	document.querySelectorAll(item).forEach(i=>i.style="display:none;");
            } else {
            	document.querySelectorAll(item).forEach(i=>i.style="display:block;");            	
            }
          },
        omni=()=>document.querySelectorAll('.carnivore, .herbivore').forEach(i=>i.style="display:block;"),
        loop=(iterate,output)=>{
          	for(i=0;iterate[i];i++){
            	output.call(iterate[i],i);
            }
          };
	
      function loading(){
        var svg = (h, w, id) => `<p style="text-align:center;">You can click Loading button to change the squares!</p><svg height='${h}' width='${w}' id='${id}' style='border:5px solid orange;margin:0 auto;'>Sorry, your browser does not support inline SVG.</svg>`,
            paths = (style, ...points) => `<polygon points='${points.join(' ')}' style='${style}' />`,
            rand = (num) => Math.random()*100+num,
            coords = (a,b) => `${a},${b}`;
       ...

CSS

* {
 margin: 0 auto;
 box-sizing: border-box;
 padding: 1%;
}

JavaScript

{
[
`Psittacosaurus

Field Report Information:
Psittacosaurus, more commonly called the “Taco”, is the smallest herbivore present on Isla Nycta, and supports much of the carnivorous ecosystem.  Small and skittish in nature, these harmless creatures roam the island looking for berries and small plants to eat.  While not as sophisticated as modern animal societies, these creatures will often group together for safety, and behave similarly to modern prairie-dogs, chattering away until one of their number, a designated sentry, sees a threat (usually anything carnivorous) which leads to cries of alarm, and the group scattering for cover.  In these cases, anything will do.  Dead bodies, larger herbivores, rocky holes, bushes, tall grass, anything that can provide them with a safe place to hide is free game for a scared Taco.  Field studies conclude it is hardly a threat to humans, and is at worst a lousy tasting survival food.

Quick Notes:
Tier: 1
Max Herd Size: Unlimited
Nest Size: Cannot Nest
• Patreon Exclusive Freebie or Raffle
• Can herd with any herbivore even when nesting.
• Skittish in nature. 
• Chatty until a threat is seen then they go silent.

Avoid List: 
• When solo/paired/herded: Avoids all carnivores`,

`Orodromeus
Field Report Information:
The Orodromeus is the second of Isla Nycta’s small herbivores, and is usually seen around other herds of larger plant-munching creatures.  Called the “Oro” or even “Oreo” by some, these creatures tend to stick close to their larger herbivore overlords, eating from plants nearby, and generally using the size of the other herbivores as protection from danger.  The other herbivores don’t seem to mind these birdlike creatures, as they’re no danger to their young, and can actually serve as an alarm system.

When a predator nears, the shrill cries of the Oros near the herd can alert the bigger animals of danger to their young they might not otherwise see.  In return, when something attacks the Oro group, they will often...