xandout · September 17, 2020 23:41
diff --git a/index.html b/index.html
 <div id="app"></div>
diff --git a/script.babel b/script.babel
 const colors =['gray','red','orange','yellow','green','teal','blue','indigo','purple','pink']

 const ColorRow = function ({color}) {
  return (
    <div class="flex flex-wrap">
      {
        [100, 200, 300, 400, 500, 600, 700, 800, 900].reverse().map(shade => (
          <div class={`h-12 w-12 bg-${color}-${shade}`}></div>
          
          
        ))
      }
    </div>
  )
 }

 ReactDOM.render(
  <div class="min-h-screen bg-white p-8 flex items-center justify-center">
    <div>
      { colors.map(color => <ColorRow color={color}/>) }
    </div>
  </div>,
  document.getElementById('app')
 );
diff --git a/scripts b/scripts
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
diff --git a/styles b/styles
 <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.10/tailwind.min.css" rel="stylesheet" />
diff --git a/tailwind-css-v1-0-color-palette.markdown b/tailwind-css-v1-0-color-palette.markdown
	const colors =['gray','red','orange','yellow','green','teal','blue','indigo','purple','pink']

	const ColorRow = function ({color}) {
	return (
	<div class="flex flex-wrap">
	{
	[100, 200, 300, 400, 500, 600, 700, 800, 900].reverse().map(shade => (
	<div class={`h-12 w-12 bg-${color}-${shade}`}></div>


	))
	}
	</div>
	)
	}

	ReactDOM.render(
	<div class="min-h-screen bg-white p-8 flex items-center justify-center">
	<div>
	{ colors.map(color => <ColorRow color={color}/>) }
	</div>
	</div>,
	document.getElementById('app')
	);
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>