JSFiddle - React, Tailwind, and code Playground

by djkojb

HTML

<div>

  <div class="event-wrapper" itemscope itemtype="http://schema.org/Event">
    <div class="event-date" itemprop="startDate" content="2013-09-14T21:30">Sat Sep 14</div>
    <div class="event-title" itemprop="name">Typhoon with Radiation City</div>
    <div class="event-venue" itemprop="location" itemscope itemtype="http://schema.org/Place">
      <span itemprop="name">The Hi-Dive</span>
      <div class="address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <span itemprop="streetAddress">7 S. Broadway</span>
        <br>
        <span itemprop="addressLocality">Denver</span>,
        <span itemprop="addressRegion">CO</span>
        <span itemprop="postalCode">80209</span>
      </div>
    </div>
    <div class="event-time">9:30 PM</div>
    <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <div class="event-price" itemprop="price" content="13.00">$13.00</div>
  <span itemprop="priceCurrency" content="USD" />
  <a itemprop="url" href="http://www.ticketfly.com/purchase/309433">Tickets</a>
 </span>
  </div>

  <div class="event-wrapper" itemscope itemtype="http://schema.org/Event">
    <div class="event-date" itemprop="startDate" content="2013-09-14T21:30">Sat Sep 14</div>
    <div class="event-title" itemprop="name">Typhoon with Radiation City</div>
    <div class="event-venue" itemprop="location" itemscope itemtype="http://schema.org/Place">
      <span itemprop="name">The Hi-Dive</span>
      <div class="address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <span itemprop="streetAddress">7 S. Broadway</span>
        <br>
        <span itemprop="addressLocality">Denver</span>,
        <span itemprop="addressRegion">CO</span>
        <span itemprop="postalCode">80209</span>
      </div>
    </div>
    <div class="event-time">9:30 PM</div>
    <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <div class="event-price" itemprop="price"...

JavaScript

var baseScopes = ['Event', 'BreadcrumbList', 'WebSite', 'Organization', 'Article', 'NewsArticle', 'BlogPosting', 'Book', 'Course', 'ClaimReview', 'JobPosting', 'MusicGroup', 'MusicAlbum', 'Occupation', 'Product', 'Recipe', 'VideoObject'];

var validatorsConf = {
	VideoObject: {
		description: "String",
    name: "String",
    uploadDate: "Date"
  },
	Recipe: {
  	name: "String"
  },
	Product: [{
  	name: "String",
    image: "ImageObject"
  },{
  	name: "String",
    image: "Image"
  }],
	Occupation: {
  	description: "String",
    estimatedSalary: "MonetaryAmountDistribution",
    name: "String",
  },
  MonetaryAmountDistribution: {
  	name: "String",
    currency: "String"
  },
	Organization: [
  	{
    	_id: "CorporateContact", 
      url: "String",
      contactPoint: "ContactPoint"
  	},
    {
    	_id: "Logo", 
      url: "String",
      logo: "String"
  	},
    {
    	_id: "SocialProfile", 
      sameAs: "SocialProfile"
  	},
    {
    	_id: "Organization",
      name: "String",
      url: "String"
    }
  ],
  MusicGroup:{
  	description: "String",
    name: "String",
    url: "String",
    potentialAction: "ListenAction"
  },
  MusicAlbum:{
  	description: "String",
    name: "String",
    url: "String",
    potentialAction: "ListenAction"  
  },
  ListenAction: {
  	expectsAcceptanceOf: "Offer",
    target: "EntryPoint"
  },
  JobPosting: {
  	datePosted: "Date",
    description: "String",
    hiringOrganization: "Organization",
    jobLocation: "Place",
    title: "String",
    validThrough: "DateTime"
  },
  ClaimReview: {
  	_id: "FactCheck",
    author: "Organization",
    claimReviewed: "String",
    datePublished: "DateTime",
    itemReviewed: "CreativeWork",
    url: "String",
    reviewRating: "Rating"
  },
  Rating: {
  	bestRating: "Number",
    ratingValue: "Number",
    worstRating: "Number"
  },
  CreativeWork: [{
  	author: "Organization"
  },{
  	author: "Person"
  }],
  Course: {
  	name: "String",
    description: "String"
  },
  Book:...