all

.eslintcache

@@ -0,0 +1 @@
+[{"/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/index.js":"1","/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/reportWebVitals.js":"2","/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/App.js":"3","/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/Instructions.js":"4"},{"size":500,"mtime":1607266233636,"results":"5","hashOfConfig":"6"},{"size":362,"mtime":1607266233637,"results":"7","hashOfConfig":"6"},{"size":21731,"mtime":1607340449312,"results":"8","hashOfConfig":"6"},{"size":12558,"mtime":1607338863269,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},"d40mw9",{"filePath":"13","messages":"14","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"12"},{"filePath":"15","messages":"16","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"17","messages":"18","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/index.js",[],["19","20"],"/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/reportWebVitals.js",[],"/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/App.js",["21","22"],"/Users/evrardtserstevens/Documents/HuggingFace/datasetcard/src/Instructions.js",["23"],{"ruleId":"24","replacedBy":"25"},{"ruleId":"26","replacedBy":"27"},{"ruleId":"28","severity":1,"message":"29","line":1,"column":27,"nodeType":"30","messageId":"31","endLine":1,"endColumn":36},{"ruleId":"32","severity":1,"message":"33","line":397,"column":75,"nodeType":"34","endLine":397,"endColumn":90},{"ruleId":"35","severity":1,"message":"36","line":3,"column":1,"nodeType":"37","endLine":166,"endColumn":2},"no-native-reassign",["38"],"no-negated-in-lhs",["39"],"no-unused-vars","'useEffect' is defined but never used.","Identifier","unusedVar","react/jsx-no-target-blank","Using target=\"_blank\" without rel=\"noreferrer\" is a security risk: see https://html.spec.whatwg.org/multipage/links.html#link-type-noopener","JSXAttribute","import/no-anonymous-default-export","Assign object to a variable before exporting as module default","ExportDefaultDeclaration","no-global-assign","no-unsafe-negation"]

craco.config.js

@@ -0,0 +1,11 @@
+// craco.config.js
+module.exports = {
+  style: {
+    postcss: {
+      plugins: [
+        require('tailwindcss'),
+        require('autoprefixer'),
+      ],
+    },
+  },
+}

package.json

@@ -3,18 +3,26 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^5.9.0",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.5.0",
+    "@uiw/react-md-editor": "^1.14.7",
+    "autoprefixer": "^9.8.6",
+    "postcss": "^7.0.35",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-markdown": "^5.0.3",
     "react-scripts": "4.0.1",
+    "save-file": "^2.3.1",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
+    "tailwindcss-grid": "^1.2.1",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,23 +1,414 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { useState, useEffect } from 'react';
+import Instructions from './Instructions'
+import ReactMarkdown from "react-markdown";
+import {save} from 'save-file'
 
 function App() {
+
+  const [fieldFocussed, setFieldFocussed] = useState()
+  const [card, setCard] = useState({})
+
+  async function handleClick(e){
+    setFieldFocussed(e.target.id)
+  }
+
+  async function handleChange(e){
+    setCard({...card, [e.target.id]:e.currentTarget.value})
+  }
+
+  async function exportFile(card){ 
+    var textTest = `
+    # Dataset Card for [Dataset Name]
+    
+    ## Table of Contents
+    - [Dataset Description](#dataset-description)
+      - [Dataset Summary](#dataset-summary)
+      - [Supported Tasks](#supported-tasks-and-leaderboards)
+      - [Languages](#languages)
+    - [Dataset Structure](#dataset-structure)
+      - [Data Instances](#data-instances)
+      - [Data Fields](#data-instances)
+      - [Data Splits](#data-instances)
+    - [Dataset Creation](#dataset-creation)
+      - [Curation Rationale](#curation-rationale)
+      - [Source Data](#source-data)
+      - [Annotations](#annotations)
+      - [Personal and Sensitive Information](#personal-and-sensitive-information)
+    - [Considerations for Using the Data](#considerations-for-using-the-data)
+      - [Social Impact of Dataset](#social-impact-of-dataset)
+      - [Discussion of Biases](#discussion-of-biases)
+      - [Other Known Limitations](#other-known-limitations)
+    - [Additional Information](#additional-information)
+      - [Dataset Curators](#dataset-curators)
+      - [Licensing Information](#licensing-information)
+      - [Citation Information](#citation-information)
+    
+    ## Dataset Description
+    
+    - **Homepage:** ${card.homepage}
+    - **Repository:** ${card.repository}
+    - **Paper:** ${card.paper}
+    - **Leaderboard:** ${card.leaderboard}
+    - **Point of Contact:** ${card.contact}
+    
+    ### Dataset Summary
+    
+    ${card.datasetSummary}
+    
+    ### Supported Tasks and Leaderboards
+    
+    ${card.supportedTasks}
+    
+    ### Languages
+    
+    ${card.languages}
+    
+    ## Dataset Structure
+    
+    ### Data Instances
+    
+    ${card.dataInstances}
+    
+    ### Data Fields
+    
+    ${card.dataFields}
+    
+    ### Data Splits
+    
+    ${card.dataSplits}
+    
+    ## Dataset Creation
+    
+    ### Curation Rationale
+    
+    ${card.curationRationale}
+    
+    ### Source Data
+    
+    #### Initial Data Collection and Normalization
+    
+    ${card.dataCollection}
+    
+    #### Who are the source language producers?
+    
+    ${card.sourceLanguage}
+    
+    ### Annotations
+    
+    #### Annotation process
+    
+    ${card.annotationProcess}
+    
+    #### Who are the annotators?
+    
+    ${card.annotators}
+    
+    ### Personal and Sensitive Information
+    
+    ${card.personalInformation}
+    
+    ## Considerations for Using the Data
+    
+    ### Social Impact of Dataset
+    
+    ${card.socialImpact}
+    
+    ### Discussion of Biases
+    
+    ${card.biasesDiscussion}
+    
+    ### Other Known Limitations
+    
+    ${card.limitations}
+    
+    ## Additional Information
+    
+    ### Dataset Curators
+    
+    ${card.datasetCurators}
+    
+    ### Licensing Information
+    
+    ${card.licensingInformation}
+    
+    ### Citation Information
+    
+    ${card.citationInformation}
+    `
+    await save(textTest, "README.md")
+  }
+
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <div className="overflow-y-auto min-h-full font-sans">
+          <div className="grid grid-cols-12 gap-6">
+            <div className="col-span-8">
+            <div className="h-screen flex overflow-hidden bg-white">
+              <div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
+                <div className="text-center">
+                  <p className="mt-1 text-4xl font-extrabold text-gray-700 sm:tracking-tight">New Dataset Card</p>
+                  <p className="max-w-xl mt-5 mx-auto text-lg text-gray-500">Fill in the form below</p>
+                </div>
+
+                <div className="shadow p-4 rounded-lg">
+                  <div className="max-w-7xl overflow-y-auto max-h-lg mx-auto py-12 px-4 divide-y-2 divide-gray-200 sm:px-6 lg:py-16 lg:px-8">
+                    
+                    <div className="mt-2">
+                      <dl className="space-y-8 divide-y divide-gray-200">
+                        
+                        <div className="md:grid md:grid-cols-12 md:gap-8">
+                          <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Homepage
+                          </dt>
+                          <dd className="md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="homepage" name="about" rows="1" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                          <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Repository
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="repository" name="about" rows="1" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                          <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Paper
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="paper" name="about" rows="1" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                          <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Leaderboard
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="leaderboard" name="about" rows="1" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                          <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Point of Contact
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="contact" name="about" rows="1" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                          <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Dataset Summary
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="datasetSummary" name="about" rows="4" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+                
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                        <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Supported Tasks and Leaderboards
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="supportedTasks" name="about" rows="4" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                        <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Languages
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="languages" name="about" rows="4" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                        <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Data Instances
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="dataInstances" name="about" rows="4" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                        <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Data Fields
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="dataFields" name="about" rows="4" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                        <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Data Splits
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="dataSplits" name="about" rows="4" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                        <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Curation Rationale
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="curationRationale" name="about" rows="4" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                        <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Initial Data Collection and Normalization
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="dataCollection" name="about" rows="4" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                        <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Who are the source language producers?
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="sourceLanguage" name="about" rows="4" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                        <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Annotation Process
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="annotationProcess" name="about" rows="4" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                        <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Who are the annotators?
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="annotators" name="about" rows="4" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                        <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Personal and Sensitive Information
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="personalInformation" name="about" rows="4" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                        <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Social Impact of Dataset
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="socialImpact" name="about" rows="4" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                        <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Discussion of Biases
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="biasesDiscussion" name="about" rows="4" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                        <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Other Known Limitations
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="limitations" name="about" rows="4" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                        <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Dataset Curators
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="datasetCurators" name="about" rows="4" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                        <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Licensing Information
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="licensingInformation" name="about" rows="4" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+
+                        <div className="pt-6 md:grid md:grid-cols-12 md:gap-8">
+                        <dt className="text-base font-medium text-gray-700 md:col-span-3">
+                            Citation Information
+                          </dt>
+                          <dd className="mt-2 md:mt-0 md:col-span-9">
+                            <textarea onClick={(e) => handleClick(e)} onChange={(e) => handleChange(e)} id="citationInformation" name="about" rows="4" className="font-sans p-2 shadow-sm border border-solid border-gray-300 block w-full text-gray-600 sm:text-sm rounded-md"></textarea>
+                          </dd>
+                        </div>
+                
+                        
+                      </dl>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-center mt-10">
+                <button onClick={() => exportFile(card)} type="button" className="cursor-pointer inline-flex items-center px-3 py-2 border border-solid border-gray-300 shadow-sm text-base leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                  Export
+                </button>
+                </div>
+
+              </div>
+            </div>
+            
+            </div>
+            <div className="col-span-4">
+            <div className="h-screen flex overflow-hidden bg-gray-100">
+              <div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
+                <div className="text-center">
+                  <p className="mt-1 text-4xl font-extrabold text-gray-700 sm:tracking-tight">Instructions</p>
+                  {!fieldFocussed &&
+                  <p className="max-w-xl mt-5 mx-auto text-lg text-gray-500">Click on a field to see instructions</p>
+                  }
+                </div>
+                <div className="max-w-7xl mx-auto py-12 px-4 divide-y-2 divide-gray-200 sm:px-6 lg:py-16 lg:px-8">
+                    
+                    <div className="mt-6">
+                      <dl className="space-y-8 divide-gray-200 text-gray-500">
+                      {Instructions.instructions[fieldFocussed] && Instructions.instructions[fieldFocussed].paragraph.map((para) => (
+                        <div key={para}>
+                          <ReactMarkdown source={para}
+                          renderers={{link: props => <a href={props.href} target="_blank">{props.children}</a>}}
+                          />
+                        
+                        </div>
+
+                      ))}
+                      </dl>
+                    </div>
+                </div>
+            </div>      
+            </div>
+          </div>
+        </div>
+
+        
     </div>
   );
 }

src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/Instructions.js

@@ -0,0 +1,166 @@
+const NAME = 'Instructions'
+
+export default {
+    name: NAME,
+    instructions: {
+          homepage: {
+            paragraph: [
+              "Add homepage URL here if available (unless it's a GitHub repository)"
+            ],
+          },
+          repository: {
+            paragraph: [
+              "If the dataset is hosted on github or has a github homepage, add URL here"
+            ],
+          }, 
+          paper: {
+            paragraph: [
+              "If the dataset was introduced by a paper or there was a paper written describing the dataset, add URL here (landing page for Arxiv paper preferred)"
+            ],
+          }, 
+          leaderboard: {
+            paragraph: [
+              "If the dataset supports an active leaderboard, add link here"
+            ],
+          },  
+          contact: {
+            paragraph: [
+              "If known, name and email of at least one person the reader can contact for questions about the dataset."
+            ],
+          },    
+          datasetSummary: {
+            paragraph: [
+              "Briefly summarize the dataset, its intended use and the supported tasks. Give an overview of how and why the dataset was created. The summary should explicitly mention the languages present in the dataset (possibly in broad terms, e.g. translations between several pairs of European languages), and describe the domain, topic, or genre covered."
+            ],
+          },
+          supportedTasks: {
+            paragraph: [
+              "For each of the tasks tagged for this dataset, give a brief description of the tag, metrics, and suggested models (with a link to their HuggingFace implementation if available). Give a similar description of tasks that were not covered by the structured tag set (repace the `task-category-tag` with an appropriate `other:other-task-name`).",
+              "- `task-category-tag`: The dataset can be used to train a model for [TASK NAME], which consists in [TASK DESCRIPTION]. Success on this task is typically measured by achieving a *high/low* [metric name](https://huggingface.co/metrics/metric_name). The ([model name](https://huggingface.co/model_name) or [model class](https://huggingface.co/transformers/model_doc/model_class.html)) model currently achieves the following score. *[IF A LEADERBOARD IS AVAILABLE]:* This task has an active leaderboard which can be found at [leaderboard url]() and ranks models based on [metric name](https://huggingface.co/metrics/metric_name) while also reporting [other metric name](https://huggingface.co/metrics/other_metric_name)."
+            ]
+          },
+          languages: {
+            paragraph: [
+              "Provide a brief overview of the languages represented in the dataset. Describe relevant details about specifics of the language such as whether it is social media text, African American English,...",
+              "When relevant, please provide [BCP-47 codes](https://tools.ietf.org/html/bcp47), which consist of a [primary language subtag](https://tools.ietf.org/html/bcp47#section-2.2.1), with a [script subtag](https://tools.ietf.org/html/bcp47#section-2.2.3) and/or [region subtag](https://tools.ietf.org/html/bcp47#section-2.2.4) if available."
+            ]
+          },
+          dataInstances: {
+            paragraph: [
+              "Provide an JSON-formatted example and brief description of a typical instance in the dataset. If available, provide a link to further examples.",
+              `
+              {
+                'example_field': ...,
+                ...
+              }
+              `,
+              "Provide any additional information that is not covered in the other sections about the data here. In particular describe any relationships between data points and if these relationships are made explicit.",
+            ]
+          },
+          dataFields: {
+            paragraph: [
+              "List and describe the fields present in the dataset. Mention their data type, and whether they are used as input or output in any of the tasks the dataset currently supports. If the data has span indices, describe their attributes, such as whether they are at the character level or word level, whether they are contiguous or not, etc. If the datasets contains example IDs, state whether they have an inherent meaning, such as a mapping to other datasets or pointing to relationships between data points.",
+              "- `example_field`: description of `example_field`"
+            ]
+          },
+          dataSplits: {
+            paragraph: [
+              "Describe and name the splits in the dataset if there are more than one.",
+              "Describe any criteria for splitting the data, if used. If their are differences between the splits (e.g. if the training annotations are machine-generated and the dev and test ones are created by humans, or if different numbers of annotators contributed to each example), describe them here.",
+              "Provide the sizes of each split. As appropriate, provide any descriptive statistics for the features, such as average length.  For example:",
+              `|                            | Tain   | Valid | Test |
+              | -----                      | ------ | ----- | ---- |
+              | Input Sentences            |        |       |      |
+              | Average Sentence Length    |        |       |      |`
+            ]
+          },
+          curationRationale: {
+            paragraph: [
+              "What need motivated the creation of this dataset? What are some of the reasons underlying the major choices involved in putting it together?",
+            ]
+          },
+          dataCollection: {
+            paragraph: [
+              "Describe the data collection process. Describe any criteria for data selection or filtering. List any key words or search terms used. If possible, include runtime information for the collection process.",
+              "If data was collected from other pre-existing datasets, link to source here and to their [Hugging Face version](https://huggingface.co/datasets/dataset_name).",
+              "If the data was modified or normalized after being collected (e.g. if the data is word-tokenized), describe the process and the tools used."
+            ]
+          },
+          sourceLanguage: {
+            paragraph: [
+              "State whether the data was produced by humans or machine generated. Describe the people or systems who originally created the data.",
+              "If available, include self-reported demographic or identity information for the source data creators, but avoid inferring this information. Instead state that this information is unknown. See [Larson 2017](https://www.aclweb.org/anthology/W17-1601.pdf) for using identity categories as a variables, particularly gender.",
+              "Describe the conditions under which the data was created (for example, if the producers were crowdworkers, state what platform was used, or if the data was found, what website the data was found on). If compensation was provided, include that information here.",
+              "Describe other people represented or mentioned in the data. Where possible, link to references for the information."
+            ]
+          },
+          annotations: {
+            paragraph: [
+              "If the dataset contains annotations which are not part of the initial data collection, describe them in the following paragraphs."
+            ]
+          },
+          annotationProcess: {
+            paragraph: [
+              "If applicable, describe the annotation process and any tools used, or state otherwise. Describe the amount of data annotated, if not all. Describe or reference annotation guidelines provided to the annotators. If available, provide interannotator statistics. Describe any annotation validation processes."
+            ]
+          },
+          annotators: {
+            paragraph: [
+              "If annotations were collected for the source data (such as class labels or syntactic parses), state whether the annotations were produced by humans or machine generated.",
+              "Describe the people or systems who originally created the annotations and their selection criteria if applicable.",
+              "If available, include self-reported demographic or identity information for the annotators, but avoid inferring this information. Instead state that this information is unknown. See [Larson 2017](https://www.aclweb.org/anthology/W17-1601.pdf) for using identity categories as a variables, particularly gender.",
+              "Describe the conditions under which the data was annotated (for example, if the annotators were crowdworkers, state what platform was used, or if the data was found, what website the data was found on). If compensation was provided, include that information here."
+            ]
+          },
+          personalInformation: {
+            paragraph: [
+              "State whether the dataset uses identity categories and, if so, how the information is used. Describe where this information comes from (i.e. self-reporting, collecting from profiles, inferring, etc.). See [Larson 2017](https://www.aclweb.org/anthology/W17-1601.pdf) for using identity categories as a variables, particularly gender. State whether the data is linked to individuals and whether those individuals can be identified in the dataset, either directly or indirectly (i.e., in combination with other data).",
+              "State whether the dataset contains other data that might be considered sensitive (e.g., data that reveals racial or ethnic origins, sexual orientations, religious beliefs, political opinions or union memberships, or locations; financial or health data; biometric or genetic data; forms of government identification, such as social security numbers; criminal history).",
+              "If efforts were made to anonymize the data, describe the anonymization process."
+            ]
+          },
+          socialImpact: {
+            paragraph: [
+              "Please discuss some of the ways you believe the use of this dataset will impact society.",
+              "The statement should include both positive outlooks, such as outlining how technologies developed through its use may improve people's lives, and discuss the accompanying risks. These risks may range from making important decisions more opaque to people who are affected by the technology, to reinforcing existing harmful biases (whose specifics should be discussed in the next section), among other considerations.",
+              "Please also mention in this section if the proposed dataset contains a *low-resource* or under-represented language."
+            ]
+          },
+          biasesDiscussion: {
+            paragraph: [
+              "Provide descriptions of specific biases that are likely to be reflected in the data, and state whether any steps were taken to reduce their impact.",
+              "For Wikipedia text, see for example [Dinan et al 2020 on biases in Wikipedia (esp. Table 1)](https://arxiv.org/abs/2005.00614), or [Blodgett et al 2020](https://www.aclweb.org/anthology/2020.acl-main.485/) for a more general discussion of the topic.",
+              "If analyses have been run quantifying these biases, please add brief summaries and links to the studies here."
+            ]
+          },
+          limitations: {
+            paragraph: [
+              "If studies of the datasets have outlined other limitations of the dataset, such as annotation artifacts, please outline and cite them here."
+            ]
+          },
+          datasetCurators: {
+            paragraph: [
+              "List the people involved in collecting the dataset and their affiliation(s). If funding information is known, include it here."
+            ]
+          },
+          licensingInformation: {
+            paragraph: [
+              "Provide the license and link to the license webpage if available."
+            ]
+          },
+          citationInformation: {
+            paragraph: [
+              "Provide the [BibTex](http://www.bibtex.org/)-formatted reference for the dataset. For example:",
+              `
+              @article{article_id,
+                author    = {Author List},
+                title     = {Dataset Paper Title},
+                journal   = {Publication Venue},
+                year      = {2525}
+              }
+              `,
+              "If the dataset has a [DOI](https://www.doi.org/), please provide it here."
+            ]
+          },
+    }
+}

src/index.css

@@ -1,13 +1,4 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+/* ./src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,820 @@
+module.exports = {
+  purge: ['./src/**/*.js', './public/index.html'],
+  darkMode: false, // or 'media' or 'class'
+  prefix: '',
+  important: false,
+  separator: ':',
+  theme: {
+    extend: {
+      spacing: {
+        '30': '7rem',
+        '68': '17rem',
+        '70': '17.5rem',
+        '72': '18rem',
+        '76': '19rem',
+        '78': '19.5rem',
+        '80': '20rem',
+        '84': '21rem',
+        '88': '22rem',
+        '92': '23rem',
+        '96': '24rem',
+        '100': '25rem',
+        '104': '26rem',
+        '108': '27rem',
+        '112': '28rem',
+        '116': '29rem',
+        '120': '30rem',
+        '132': '33rem',
+        '144': '36rem',
+        '148': '37rem',
+        '152': '38rem',
+        '156': '39rem',
+        '168': '42rem',
+        '180': '45rem',
+        '192': '48rem',
+        '196': '49rem',
+        '200': '50rem',
+      },
+    },
+    maxWidth: {
+        '1/4': '25%',
+        '1/2': '50%',
+        '3/4': '75%',
+    },
+    zIndex: {
+       '-10': '-10',
+    },
+    spinner: (theme) => ({
+      DEFAULT: {
+        color: '#dae1e7', // color you want to make the spinner
+        size: '1em', // size of the spinner (used for both width and height)
+        border: '2px', // border-width of the spinner (shouldn't be bigger than half the spinner's size)
+        speed: '500ms', // the speed at which the spinner should rotate
+      },
+      // md: {
+      //   color: theme('colors.red.500', 'red'),
+      //   size: '2em',
+      //   border: '2px',
+      //   speed: '500ms',
+      // },
+    }),
+    height: {
+      xxs: '50px',
+      xs: '80px',
+      sm: '150px',
+      smm: '170px',
+      md: '500px',
+      lg: '600px',
+      xl: '700px',
+      },
+    screens: {
+      xs: '500px',
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      xxl: '1650px',
+    },
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+
+      black: '#000',
+      white: '#fff',
+
+      gray: {
+        100: '#f7fafc',
+        200: '#edf2f7',
+        300: '#e2e8f0',
+        400: '#cbd5e0',
+        500: '#a0aec0',
+        600: '#718096',
+        700: '#4a5568',
+        800: '#2d3748',
+        900: '#1a202c',
+      },
+      red: {
+        100: '#fff5f5',
+        200: '#fed7d7',
+        300: '#feb2b2',
+        400: '#fc8181',
+        500: '#f56565',
+        600: '#e53e3e',
+        700: '#c53030',
+        800: '#9b2c2c',
+        900: '#742a2a',
+      },
+      orange: {
+        100: '#fffaf0',
+        200: '#feebc8',
+        300: '#fbd38d',
+        400: '#f6ad55',
+        500: '#ed8936',
+        600: '#dd6b20',
+        700: '#c05621',
+        800: '#9c4221',
+        900: '#7b341e',
+      },
+      yellow: {
+        100: '#fffff0',
+        200: '#fefcbf',
+        300: '#faf089',
+        400: '#f6e05e',
+        500: '#ecc94b',
+        600: '#d69e2e',
+        700: '#b7791f',
+        800: '#975a16',
+        900: '#744210',
+      },
+      green: {
+        100: '#f0fff4',
+        200: '#c6f6d5',
+        300: '#9ae6b4',
+        400: '#68d391',
+        500: '#48bb78',
+        600: '#38a169',
+        700: '#2f855a',
+        800: '#276749',
+        900: '#22543d',
+      },
+      teal: {
+        100: '#e6fffa',
+        200: '#b2f5ea',
+        300: '#81e6d9',
+        400: '#4fd1c5',
+        500: '#38b2ac',
+        600: '#319795',
+        700: '#2c7a7b',
+        800: '#285e61',
+        900: '#234e52',
+      },
+      blue: {
+        100: '#ebf8ff',
+        200: '#bee3f8',
+        300: '#90cdf4',
+        400: '#63b3ed',
+        500: '#4299e1',
+        600: '#3182ce',
+        700: '#2b6cb0',
+        800: '#2c5282',
+        900: '#2a4365',
+      },
+      indigo: {
+        100: '#ebf4ff',
+        200: '#c3dafe',
+        300: '#a3bffa',
+        400: '#7f9cf5',
+        500: '#667eea',
+        600: '#5a67d8',
+        700: '#4c51bf',
+        800: '#434190',
+        900: '#3c366b',
+      },
+      purple: {
+        100: '#faf5ff',
+        200: '#e9d8fd',
+        300: '#d6bcfa',
+        400: '#b794f4',
+        500: '#9f7aea',
+        600: '#805ad5',
+        700: '#6b46c1',
+        800: '#553c9a',
+        900: '#44337a',
+      },
+      pink: {
+        100: '#fff5f7',
+        200: '#fed7e2',
+        300: '#fbb6ce',
+        400: '#f687b3',
+        500: '#ed64a6',
+        600: '#d53f8c',
+        700: '#b83280',
+        800: '#97266d',
+        900: '#702459',
+      },
+    },
+    spacing: {
+      px: '1px',
+      '0': '0',
+      '1': '0.25rem',
+      '2': '0.5rem',
+      '3': '0.75rem',
+      '4': '1rem',
+      '5': '1.25rem',
+      '6': '1.5rem',
+      '8': '2rem',
+      '10': '2.5rem',
+      '12': '3rem',
+      '14': '3.5rem',
+      '16': '4rem',
+      '20': '5rem',
+      '24': '6rem',
+      '32': '8rem',
+      '40': '10rem',
+      '48': '12rem',
+      '56': '14rem',
+      '64': '16rem',
+      '72': '18rem',
+      '84': '21rem',
+      '96': '24rem',
+    },
+    backgroundColor: theme => theme('colors'),
+    backgroundPosition: {
+      bottom: 'bottom',
+      center: 'center',
+      left: 'left',
+      'left-bottom': 'left bottom',
+      'left-top': 'left top',
+      right: 'right',
+      'right-bottom': 'right bottom',
+      'right-top': 'right top',
+      top: 'top',
+    },
+    backgroundSize: {
+      auto: 'auto',
+      cover: 'cover',
+      contain: 'contain',
+    },
+    borderColor: theme => ({
+      ...theme('colors'),
+      DEFAULT: theme('colors.gray.300', 'currentColor'),
+    }),
+    borderRadius: {
+      none: '0',
+      sm: '0.125rem',
+      DEFAULT: '0.25rem',
+      md: '0.375rem',
+      lg: '0.5rem',
+      xl: '1rem',
+      full: '9999px',
+    },
+    borderWidth: {
+      DEFAULT: '1px',
+      '0': '0',
+      '1': '1px',
+      '2': '2px',
+      '4': '4px',
+      '8': '8px',
+    },
+    boxShadow: {
+      xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
+      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+      DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+      '3xl': '0 30px 75px -20px rgba(0, 0, 0, 0.5)',
+      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+      outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
+      none: 'none',
+    },
+    container: {
+      center: true,
+    },
+    cursor: {
+      auto: 'auto',
+      DEFAULT: 'DEFAULT',
+      pointer: 'pointer',
+      wait: 'wait',
+      text: 'text',
+      move: 'move',
+      'not-allowed': 'not-allowed',
+    },
+    fill: {
+      current: 'currentColor',
+    },
+    flex: {
+      '1': '1 1 0%',
+      auto: '1 1 auto',
+      initial: '0 1 auto',
+      none: 'none',
+    },
+    flexGrow: {
+      '0': '0',
+      DEFAULT: '1',
+    },
+    flexShrink: {
+      '0': '0',
+      DEFAULT: '1',
+    },
+    fontFamily: {
+      sans: [
+        'system-ui',
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Segoe UI"',
+        'Roboto',
+        '"Helvetica Neue"',
+        'Arial',
+        '"Noto Sans"',
+        'sans-serif',
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"',
+        '"Noto Color Emoji"',
+      ],
+      serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
+      mono: ['Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
+    },
+    fontSize: {
+      xs: '0.75rem',
+      sm: '0.875rem',
+      md: '0.92rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem',
+      '6xl': '4rem',
+    },
+    fontWeight: {
+      hairline: '100',
+      thin: '200',
+      light: '300',
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+      extrabold: '800',
+      black: '900',
+    },
+    height: theme => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      full: '100%',
+      screen: '100vh',
+    }),
+    inset: {
+      '0': '0',
+      auto: 'auto',
+    },
+    letterSpacing: {
+      tighter: '-0.05em',
+      tight: '-0.025em',
+      normal: '0',
+      wide: '0.025em',
+      wider: '0.05em',
+      widest: '0.1em',
+    },
+    lineHeight: {
+      none: '1',
+      tight: '1.25',
+      snug: '1.375',
+      normal: '1.5',
+      relaxed: '1.625',
+      loose: '2',
+      '3': '.75rem',
+      '4': '1rem',
+      '5': '1.25rem',
+      '6': '1.5rem',
+      '7': '1.75rem',
+      '8': '2rem',
+      '9': '2.25rem',
+      '10': '2.5rem',
+    },
+    listStyleType: {
+      none: 'none',
+      disc: 'disc',
+      decimal: 'decimal',
+    },
+    margin: (theme, { negative }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+    }),
+    maxHeight: {
+      none: 'none',
+      xxs: '10rem',
+      xs: '20rem',
+      sm: '24rem',
+      md: '28rem',
+      lg: '32rem',
+      xl: '36rem',
+      '2xl': '42rem',
+      '3xl': '48rem',
+      '4xl': '56rem',
+      '5xl': '64rem',
+      '55xl': '68rem',
+      '6xl': '72rem',
+      '65xl': '76rem',
+      '7xl': '80rem',
+      '75xl': '84rem',
+      '8xl': '88rem',
+      '9xl': '96rem',
+      '10xl': '104rem',
+      full: '100%',
+      screen: '100vh',
+    },
+    maxWidth: (theme, { breakpoints }) => ({
+      none: 'none',
+      xs: '20rem',
+      sm: '24rem',
+      md: '28rem',
+      lg: '32rem',
+      xl: '36rem',
+      '2xl': '42rem',
+      '3xl': '48rem',
+      '4xl': '56rem',
+      '5xl': '64rem',
+      '55xl': '68rem',
+      '6xl': '72rem',
+      '65xl': '76rem',
+      '7xl': '80rem',
+      '75xl': '84rem',
+      '8xl': '88rem',
+      '9xl': '96rem',
+      '10xl': '104rem',
+      full: '100%',
+      ...breakpoints(theme('screens')),
+    }),
+    minHeight: {
+      '0': '0',
+      full: '100%',
+      screen: '100vh',
+    },
+    minWidth: {
+      '0': '0',
+      full: '100%',
+    },
+    objectPosition: {
+      bottom: 'bottom',
+      center: 'center',
+      left: 'left',
+      'left-bottom': 'left bottom',
+      'left-top': 'left top',
+      right: 'right',
+      'right-bottom': 'right bottom',
+      'right-top': 'right top',
+      top: 'top',
+    },
+    opacity: {
+      '0': '0',
+      '25': '0.25',
+      '50': '0.5',
+      '75': '0.75',
+      '100': '1',
+    },
+    order: {
+      first: '-9999',
+      last: '9999',
+      none: '0',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+      '8': '8',
+      '9': '9',
+      '10': '10',
+      '11': '11',
+      '12': '12',
+    },
+    padding: theme => theme('spacing'),
+    placeholderColor: theme => theme('colors'),
+    stroke: {
+      current: 'currentColor',
+    },
+    strokeWidth: {
+      '0': '0',
+      '1': '1',
+      '2': '2',
+    },
+    textColor: theme => theme('colors'),
+    width: theme => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      '1/2': '50%',
+      '1/3': '33.333333%',
+      '2/3': '66.666667%',
+      '1/4': '25%',
+      '2/4': '50%',
+      '3/4': '75%',
+      '1/5': '20%',
+      '2/5': '40%',
+      '3/5': '60%',
+      '4/5': '80%',
+      '1/6': '16.666667%',
+      '2/6': '33.333333%',
+      '3/6': '50%',
+      '4/6': '66.666667%',
+      '5/6': '83.333333%',
+      '1/12': '8.333333%',
+      '2/12': '16.666667%',
+      '3/12': '25%',
+      '4/12': '33.333333%',
+      '5/12': '41.666667%',
+      '6/12': '50%',
+      '7/12': '58.333333%',
+      '8/12': '66.666667%',
+      '9/12': '75%',
+      '10/12': '83.333333%',
+      '11/12': '91.666667%',
+      full: '100%',
+      screen: '100vw',
+    }),
+    zIndex: {
+      auto: 'auto',
+      '0': '0',
+      '10': '10',
+      '20': '20',
+      '30': '30',
+      '40': '40',
+      '50': '50',
+    },
+    gap: theme => theme('spacing'),
+    gridTemplateColumns: {
+      none: 'none',
+      '1': 'repeat(1, minmax(0, 1fr))',
+      '2': 'repeat(2, minmax(0, 1fr))',
+      '3': 'repeat(3, minmax(0, 1fr))',
+      '4': 'repeat(4, minmax(0, 1fr))',
+      '5': 'repeat(5, minmax(0, 1fr))',
+      '6': 'repeat(6, minmax(0, 1fr))',
+      '7': 'repeat(7, minmax(0, 1fr))',
+      '8': 'repeat(8, minmax(0, 1fr))',
+      '9': 'repeat(9, minmax(0, 1fr))',
+      '10': 'repeat(10, minmax(0, 1fr))',
+      '11': 'repeat(11, minmax(0, 1fr))',
+      '12': 'repeat(12, minmax(0, 1fr))',
+    },
+    gridColumn: {
+      auto: 'auto',
+      'span-1': 'span 1 / span 1',
+      'span-2': 'span 2 / span 2',
+      'span-3': 'span 3 / span 3',
+      'span-4': 'span 4 / span 4',
+      'span-5': 'span 5 / span 5',
+      'span-6': 'span 6 / span 6',
+      'span-7': 'span 7 / span 7',
+      'span-8': 'span 8 / span 8',
+      'span-9': 'span 9 / span 9',
+      'span-10': 'span 10 / span 10',
+      'span-11': 'span 11 / span 11',
+      'span-12': 'span 12 / span 12',
+    },
+    gridColumnStart: {
+      auto: 'auto',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+      '8': '8',
+      '9': '9',
+      '10': '10',
+      '11': '11',
+      '12': '12',
+      '13': '13',
+    },
+    gridColumnEnd: {
+      auto: 'auto',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+      '8': '8',
+      '9': '9',
+      '10': '10',
+      '11': '11',
+      '12': '12',
+      '13': '13',
+    },
+    gridTemplateRows: {
+      none: 'none',
+      '1': 'repeat(1, minmax(0, 1fr))',
+      '2': 'repeat(2, minmax(0, 1fr))',
+      '3': 'repeat(3, minmax(0, 1fr))',
+      '4': 'repeat(4, minmax(0, 1fr))',
+      '5': 'repeat(5, minmax(0, 1fr))',
+      '6': 'repeat(6, minmax(0, 1fr))',
+    },
+    gridRow: {
+      auto: 'auto',
+      'span-1': 'span 1 / span 1',
+      'span-2': 'span 2 / span 2',
+      'span-3': 'span 3 / span 3',
+      'span-4': 'span 4 / span 4',
+      'span-5': 'span 5 / span 5',
+      'span-6': 'span 6 / span 6',
+    },
+    gridRowStart: {
+      auto: 'auto',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+    },
+    gridRowEnd: {
+      auto: 'auto',
+      '1': '1',
+      '2': '2',
+      '3': '3',
+      '4': '4',
+      '5': '5',
+      '6': '6',
+      '7': '7',
+    },
+    transformOrigin: {
+      center: 'center',
+      top: 'top',
+      'top-right': 'top right',
+      right: 'right',
+      'bottom-right': 'bottom right',
+      bottom: 'bottom',
+      'bottom-left': 'bottom left',
+      left: 'left',
+      'top-left': 'top left',
+    },
+    scale: {
+      '0': '0',
+      '50': '.5',
+      '75': '.75',
+      '90': '.9',
+      '95': '.95',
+      '100': '1',
+      '105': '1.05',
+      '110': '1.1',
+      '125': '1.25',
+      '150': '1.5',
+    },
+    rotate: {
+      '-180': '-180deg',
+      '-90': '-90deg',
+      '-45': '-45deg',
+      '0': '0',
+      '45': '45deg',
+      '90': '90deg',
+      '180': '180deg',
+    },
+    translate: (theme, { negative }) => ({
+      ...theme('spacing'),
+      ...negative(theme('spacing')),
+      '-full': '-100%',
+      '-1/2': '-50%',
+      '1/2': '50%',
+      full: '100%',
+    }),
+    skew: {
+      '-12': '-12deg',
+      '-6': '-6deg',
+      '-3': '-3deg',
+      '0': '0',
+      '3': '3deg',
+      '6': '6deg',
+      '12': '12deg',
+    },
+    transitionProperty: {
+      none: 'none',
+      all: 'all',
+      DEFAULT: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
+      colors: 'background-color, border-color, color, fill, stroke',
+      opacity: 'opacity',
+      shadow: 'box-shadow',
+      transform: 'transform',
+    },
+    transitionTimingFunction: {
+      linear: 'linear',
+      in: 'cubic-bezier(0.4, 0, 1, 1)',
+      out: 'cubic-bezier(0, 0, 0.2, 1)',
+      'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    },
+    transitionDuration: {
+      '75': '75ms',
+      '100': '100ms',
+      '150': '150ms',
+      '200': '200ms',
+      '300': '300ms',
+      '500': '500ms',
+      '700': '700ms',
+      '1000': '1000ms',
+    },
+  },
+  variants: {
+    accessibility: ['responsive', 'focus'],
+    alignContent: ['responsive'],
+    alignItems: ['responsive'],
+    alignSelf: ['responsive'],
+    appearance: ['responsive'],
+    backgroundAttachment: ['responsive'],
+    backgroundColor: ['responsive', 'hover', 'focus'],
+    backgroundPosition: ['responsive'],
+    backgroundRepeat: ['responsive'],
+    backgroundSize: ['responsive'],
+    borderCollapse: ['responsive'],
+    borderColor: ['responsive', 'hover', 'focus', 'active'],
+    borderRadius: ['responsive', 'hover', 'focus', 'active'],
+    borderStyle: ['responsive', 'hover', 'focus', 'active'],
+    borderWidth: ['responsive', 'hover', 'focus', 'active'],
+    boxShadow: ['responsive', 'hover', 'focus', 'active'],
+    boxSizing: ['responsive'],
+    cursor: ['responsive'],
+    display: ['responsive'],
+    fill: ['responsive'],
+    flex: ['responsive'],
+    flexDirection: ['responsive'],
+    flexGrow: ['responsive'],
+    flexShrink: ['responsive'],
+    flexWrap: ['responsive'],
+    float: ['responsive'],
+    clear: ['responsive'],
+    fontFamily: ['responsive'],
+    fontSize: ['responsive'],
+    fontSmoothing: ['responsive'],
+    fontStyle: ['responsive'],
+    fontWeight: ['responsive', 'hover', 'focus'],
+    height: ['responsive'],
+    inset: ['responsive'],
+    justifyContent: ['responsive'],
+    letterSpacing: ['responsive'],
+    lineHeight: ['responsive'],
+    listStylePosition: ['responsive'],
+    listStyleType: ['responsive'],
+    margin: ['responsive'],
+    maxHeight: ['responsive'],
+    maxWidth: ['responsive'],
+    minHeight: ['responsive'],
+    minWidth: ['responsive'],
+    objectFit: ['responsive'],
+    objectPosition: ['responsive'],
+    opacity: ['responsive', 'hover', 'focus'],
+    order: ['responsive'],
+    outline: ['responsive', 'focus'],
+    overflow: ['responsive'],
+    padding: ['responsive'],
+    placeholderColor: ['responsive', 'focus'],
+    pointerEvents: ['responsive'],
+    position: ['responsive'],
+    resize: ['responsive'],
+    spinner: ['responsive'],
+    stroke: ['responsive'],
+    strokeWidth: ['responsive'],
+    tableLayout: ['responsive', 'hover', 'focus'],
+    textAlign: ['responsive'],
+    textColor: ['responsive', 'hover', 'focus'],
+    textDecoration: ['responsive', 'hover', 'focus'],
+    textTransform: ['responsive'],
+    userSelect: ['responsive'],
+    verticalAlign: ['responsive'],
+    visibility: ['responsive'],
+    whitespace: ['responsive'],
+    width: ['responsive'],
+    wordBreak: ['responsive'],
+    zIndex: ['responsive'],
+    gap: ['responsive'],
+    gridAutoFlow: ['responsive'],
+    gridTemplateColumns: ['responsive'],
+    gridColumn: ['responsive'],
+    gridColumnStart: ['responsive'],
+    gridColumnEnd: ['responsive'],
+    gridTemplateRows: ['responsive'],
+    gridRow: ['responsive'],
+    gridRowStart: ['responsive'],
+    gridRowEnd: ['responsive'],
+    transform: ['responsive'],
+    transformOrigin: ['responsive'],
+    scale: ['responsive', 'hover', 'focus'],
+    rotate: ['responsive', 'hover', 'focus'],
+    translate: ['responsive', 'hover', 'focus'],
+    skew: ['responsive', 'hover', 'focus'],
+    transitionProperty: ['responsive', 'hover', 'focus'],
+    transitionTimingFunction: ['responsive', 'hover', 'focus'],
+    transitionDuration: ['responsive', 'hover', 'focus'],
+  },
+  corePlugins: {
+    preflight: false
+  },
+  plugins: [
+    require('tailwindcss-grid')({
+      grids: [2, 3, 4, 5, 6, 8, 10, 12],
+      gaps: {
+        0: '0',
+        4: '1rem',
+        8: '2rem',
+        16: '4rem',
+        32: '8rem',
+        '4-x': '1rem',
+        '4-y': '1rem',
+      },
+      autoMinWidths: {
+        '16': '4rem',
+        '24': '6rem',
+        '300px': '300px',
+      },
+      variants: ['responsive'],
+    }),
+  ],
+}
+