first commit

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+yarn.lock

README.md

@@ -0,0 +1,68 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+
+### Analyzing the Bundle Size
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+
+### Making a Progressive Web App
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+
+### Advanced Configuration
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+
+### Deployment
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+
+### `yarn build` fails to minify
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

build/asset-manifest.json

@@ -0,0 +1,22 @@
+{
+  "files": {
+    "main.css": "/tailblocks/static/css/main.0c1f9826.chunk.css",
+    "main.js": "/tailblocks/static/js/main.ff8c9288.chunk.js",
+    "main.js.map": "/tailblocks/static/js/main.ff8c9288.chunk.js.map",
+    "runtime-main.js": "/tailblocks/static/js/runtime-main.ad462f65.js",
+    "runtime-main.js.map": "/tailblocks/static/js/runtime-main.ad462f65.js.map",
+    "static/js/2.4f9f66ff.chunk.js": "/tailblocks/static/js/2.4f9f66ff.chunk.js",
+    "static/js/2.4f9f66ff.chunk.js.map": "/tailblocks/static/js/2.4f9f66ff.chunk.js.map",
+    "index.html": "/tailblocks/index.html",
+    "precache-manifest.696ca016b359e1fa53d546c5a58df1d7.js": "/tailblocks/precache-manifest.696ca016b359e1fa53d546c5a58df1d7.js",
+    "service-worker.js": "/tailblocks/service-worker.js",
+    "static/css/main.0c1f9826.chunk.css.map": "/tailblocks/static/css/main.0c1f9826.chunk.css.map",
+    "static/js/2.4f9f66ff.chunk.js.LICENSE": "/tailblocks/static/js/2.4f9f66ff.chunk.js.LICENSE"
+  },
+  "entrypoints": [
+    "static/js/runtime-main.ad462f65.js",
+    "static/js/2.4f9f66ff.chunk.js",
+    "static/css/main.0c1f9826.chunk.css",
+    "static/js/main.ff8c9288.chunk.js"
+  ]
+}

build/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/tailblocks/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/tailblocks/logo192.png"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css"><link rel="manifest" href="/tailblocks/manifest.json"/><title>Tailwind Blocks</title><link href="/tailblocks/static/css/main.0c1f9826.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(a){function e(e){for(var t,r,n=e[0],o=e[1],l=e[2],u=0,i=[];u<n.length;u++)r=n[u],Object.prototype.hasOwnProperty.call(f,r)&&f[r]&&i.push(f[r][0]),f[r]=0;for(t in o)Object.prototype.hasOwnProperty.call(o,t)&&(a[t]=o[t]);for(s&&s(e);i.length;)i.shift()();return p.push.apply(p,l||[]),c()}function c(){for(var e,t=0;t<p.length;t++){for(var r=p[t],n=!0,o=1;o<r.length;o++){var l=r[o];0!==f[l]&&(n=!1)}n&&(p.splice(t--,1),e=u(u.s=r[0]))}return e}var r={},f={1:0},p=[];function u(e){if(r[e])return r[e].exports;var t=r[e]={i:e,l:!1,exports:{}};return a[e].call(t.exports,t,t.exports,u),t.l=!0,t.exports}u.m=a,u.c=r,u.d=function(e,t,r){u.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},u.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.t=function(t,e){if(1&e&&(t=u(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(u.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)u.d(r,n,function(e){return t[e]}.bind(null,n));return r},u.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(t,"a",t),t},u.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},u.p="/tailblocks/";var t=this.webpackJsonptailblocks=this.webpackJsonptailblocks||[],n=t.push.bind(t);t.push=e,t=t.slice();for(var o=0;o<t.length;o++)e(t[o]);var s=n;c()}([])</script><script src="/tailblocks/static/js/2.4f9f66ff.chunk.js"></script><script src="/tailblocks/static/js/main.ff8c9288.chunk.js"></script></body></html>

build/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

build/precache-manifest.696ca016b359e1fa53d546c5a58df1d7.js

@@ -0,0 +1,26 @@
+self.__precacheManifest = (self.__precacheManifest || []).concat([
+  {
+    "revision": "c4a2d5b6b2dd799c8449e572c0f83cde",
+    "url": "/tailblocks/index.html"
+  },
+  {
+    "revision": "5056465375e021be9444",
+    "url": "/tailblocks/static/css/main.0c1f9826.chunk.css"
+  },
+  {
+    "revision": "f120907f0e695961d63b",
+    "url": "/tailblocks/static/js/2.4f9f66ff.chunk.js"
+  },
+  {
+    "revision": "85b12af60ddf57ea6860c3b16407fd52",
+    "url": "/tailblocks/static/js/2.4f9f66ff.chunk.js.LICENSE"
+  },
+  {
+    "revision": "5056465375e021be9444",
+    "url": "/tailblocks/static/js/main.ff8c9288.chunk.js"
+  },
+  {
+    "revision": "6b42aa5fb4b4d5910b21",
+    "url": "/tailblocks/static/js/runtime-main.ad462f65.js"
+  }
+]);

build/robots.txt

@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *

build/service-worker.js

@@ -0,0 +1,39 @@
+/**
+ * Welcome to your Workbox-powered service worker!
+ *
+ * You'll need to register this file in your web app and you should
+ * disable HTTP caching for this file too.
+ * See https://goo.gl/nhQhGp
+ *
+ * The rest of the code is auto-generated. Please don't update this file
+ * directly; instead, make changes to your Workbox build configuration
+ * and re-run your build process.
+ * See https://goo.gl/2aRDsh
+ */
+
+importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
+
+importScripts(
+  "/tailblocks/precache-manifest.696ca016b359e1fa53d546c5a58df1d7.js"
+);
+
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+workbox.core.clientsClaim();
+
+/**
+ * The workboxSW.precacheAndRoute() method efficiently caches and responds to
+ * requests for URLs in the manifest.
+ * See https://goo.gl/S9QRab
+ */
+self.__precacheManifest = [].concat(self.__precacheManifest || []);
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+
+workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/tailblocks/index.html"), {
+  
+  blacklist: [/^\/_/,/\/[^\/?]+\.[^\/]+$/],
+});

build/static/js/2.4f9f66ff.chunk.js.LICENSE

@@ -0,0 +1,32 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/** @license React v16.13.1
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v0.19.1
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

build/static/js/runtime-main.ad462f65.js

@@ -0,0 +1,2 @@
+!function(e){function t(t){for(var n,u,i=t[0],a=t[1],c=t[2],p=0,s=[];p<i.length;p++)u=i[p],Object.prototype.hasOwnProperty.call(o,u)&&o[u]&&s.push(o[u][0]),o[u]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(f&&f(t);s.length;)s.shift()();return l.push.apply(l,c||[]),r()}function r(){for(var e,t=0;t<l.length;t++){for(var r=l[t],n=!0,i=1;i<r.length;i++){var a=r[i];0!==o[a]&&(n=!1)}n&&(l.splice(t--,1),e=u(u.s=r[0]))}return e}var n={},o={1:0},l=[];function u(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,u),r.l=!0,r.exports}u.m=e,u.c=n,u.d=function(e,t,r){u.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},u.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.t=function(e,t){if(1&t&&(e=u(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(u.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)u.d(r,n,function(t){return e[t]}.bind(null,n));return r},u.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(t,"a",t),t},u.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},u.p="/tailblocks/";var i=this.webpackJsonptailblocks=this.webpackJsonptailblocks||[],a=i.push.bind(i);i.push=t,i=i.slice();for(var c=0;c<i.length;c++)t(i[c]);var f=a;r()}([]);
+//# sourceMappingURL=runtime-main.ad462f65.js.map

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "tailblocks",
+  "homepage": "http://mertjf.github.io/tailblocks",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "html2jade": "^0.8.6",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-frame-component": "^4.1.1",
+    "react-scripts": "3.3.0",
+    "react-syntax-highlighter": "^12.2.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "predeploy": "yarn build",
+    "deploy": "gh-pages -d build"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "gh-pages": "^2.2.0"
+  }
+}

public/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css">
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Tailwind Blocks</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *

src/App.js

@@ -0,0 +1,263 @@
+import React, { Component } from 'react';
+import Frame from 'react-frame-component';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { vs2015, docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import getBlock from './blocks';
+import getIcons from './icons';
+
+const iconList = getIcons();
+const themeList = ["indigo", "orange", "teal", "red", "purple", "pink", "blue", "green"];
+
+const desktopIcon = (
+  <svg
+    stroke="currentColor"
+    strokeWidth={2}
+    fill="none"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    viewBox="0 0 24 24"
+  >
+    <rect x={2} y={3} width={20} height={14} rx={2} ry={2} />
+    <path d="M8 21h8m-4-4v4" />
+  </svg>
+);
+
+const phoneIcon = (
+  <svg
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+    fill="none"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <rect x={5} y={2} width={14} height={20} rx={2} ry={2} />
+    <path d="M12 18h.01" />
+  </svg>
+);
+
+const tabletIcon = (
+  <svg
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={2}
+    fill="none"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <rect x={4} y={2} width={16} height={20} rx={2} ry={2} />
+    <path d="M12 18h.01" />
+  </svg>
+);
+
+const viewList = [
+  {
+    icon: desktopIcon,
+    name: 'desktop'
+  },
+  {
+    icon: tabletIcon,
+    name: 'tablet'
+  },
+  {
+    icon: phoneIcon,
+    name: 'phone'
+  }
+]
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ready: false,
+      darkMode: false,
+      sidebar: true,
+      codeView: false,
+      view: 'desktop',
+      theme: 'indigo',
+      blockType: 'Blog',
+      blockName: 'BlogA',
+      markup: ''
+    }
+    
+    this.changeMode = this.changeMode.bind(this);
+    this.changeTheme = this.changeTheme.bind(this);
+    this.changeBlock = this.changeBlock.bind(this);
+    this.handleContentDidMount = this.handleContentDidMount.bind(this);
+    this.changeView = this.changeView.bind(this);
+    this.toggleSidebar = this.toggleSidebar.bind(this);
+    this.toggleView = this.toggleView.bind(this);
+    this.markupRef = React.createRef();
+    this.textareaRef = React.createRef();
+  }
+
+  changeMode() {
+    this.setState({ darkMode: !this.state.darkMode })
+  }
+
+  handleContentDidMount() {
+     setTimeout(() => {
+      this.setState({
+        ready: true,
+        markup: this.markupRef.current.innerHTML
+      })
+    }, 400);
+  }
+
+  beautifyHTML(codeStr) {
+    const process = (str) => {
+      let div = document.createElement('div');
+      div.innerHTML = str.trim();
+      return format(div, 0).innerHTML.trim();
+    }
+    
+    const format = (node, level) => {
+      let indentBefore = new Array(level++ + 1).join('  '),
+        indentAfter = new Array(level - 1).join('  '),
+        textNode;
+    
+      for (let i = 0; i < node.children.length; i++) {
+        textNode = document.createTextNode('\n' + indentBefore);
+        node.insertBefore(textNode, node.children[i]);
+    
+        format(node.children[i], level);
+    
+        if (node.lastElementChild === node.children[i]) {
+          textNode = document.createTextNode('\n' + indentAfter);
+          node.appendChild(textNode);
+        }
+      }
+
+      return node;
+    }
+    return process(codeStr);
+  }
+
+  changeBlock(e) {
+    const { currentTarget } = e;
+    const blockType = currentTarget.getAttribute('block-type');
+    const blockName = currentTarget.getAttribute('block-name');
+    this.setState({
+      blockType, blockName,
+      codeView: false
+    });
+
+  }
+
+  changeTheme(e) {
+    const { currentTarget } = e;
+    const theme = currentTarget.getAttribute('data-theme');
+    this.setState({ theme });
+  }
+
+  changeView(e) {
+    const { currentTarget } = e;
+    const view = currentTarget.getAttribute('data-view');
+    this.setState({ view, codeView: false });
+  }
+
+  toggleView(e) {
+    this.setState({ codeView: !this.state.codeView, view: 'desktop', markup: this.markupRef.current.innerHTML })
+  }
+
+  themeListRenderer() {
+    const { theme } = this.state;
+    return themeList.map((t, k) => 
+      <button key={k} data-theme={t} className={`theme-button bg-${t}-500${theme === t ? ' is-active' : ''}`} onClick={this.changeTheme}></button>
+    )
+  }
+
+  listRenderer() {
+    const { blockName } = this.state;
+    return Object.entries(iconList).map(([type, icons]) => 
+      <div className="blocks" key={type}>
+        <div className="block-category">{type}</div>
+        <div className="block-list">
+        {Object.entries(icons).map(icon => <button key={icon[0]} onClick={this.changeBlock} className={`block-item${icon[0] === blockName ? ' is-active': ''}`} block-type={type} block-name={icon[0]}>{icon[1]}</button>)}
+        </div>
+      </div>
+    );
+  }
+
+  viewModeRenderer() {
+    const { view } = this.state;
+    return viewList.map((v, k) => <button key={k} className={`device${view === v.name ? ' is-active' : ''}`} data-view={v.name} onClick={this.changeView}>{v.icon}</button>);
+  }
+
+  toggleSidebar() {
+    this.setState({ sidebar: !this.state.sidebar });
+  }
+
+  render() {
+    const { darkMode, theme, blockName, blockType, sidebar, view } = this.state;
+    return (
+      <div className={`app${darkMode ? ' dark-mode' : ''}${sidebar ? ' has-sidebar' : ''} ${theme} ${view}`}>
+        <textarea className="copy-textarea" ref={this.textareaRef} />
+        <aside className="sidebar">
+          {this.listRenderer()}
+        </aside>
+        <div className="toolbar">
+          <button className="opener" onClick={this.toggleSidebar}>TAILWIND BLOCKS</button>
+          <button className="copy-the-block" onClick={this.toggleView}>
+            {!this.state.codeView ?
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M16 18L22 12 16 6"></path>
+                <path d="M8 6L2 12 8 18"></path>
+              </svg>
+              : 
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="css-i6dzq1"
+                viewBox="0 0 24 24"
+              >
+                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                <circle cx="12" cy="12" r="3"></circle>
+              </svg>
+            }
+            <span>{!this.state.codeView ? 'VIEW CODE': 'PREVIEW'}</span>
+          </button>
+          <div className="switcher">
+            {this.themeListRenderer()}
+          </div>
+          {this.viewModeRenderer()}
+          <button className="mode" onClick={this.changeMode}></button>
+        </div>
+        <div className="markup" ref={this.markupRef}>{getBlock({ theme, darkMode })[blockType][blockName]}</div>
+        <main className="main" style={{ opacity: this.state.ready ? '1' : '0' }}>
+          <div className={`view${this.state.codeView ? ' show-code' : ''}`}>
+            <Frame
+              contentDidMount={this.handleContentDidMount}
+              contentDidUpdate={this.handleContentDidUpdate}
+              head={
+                <>
+                <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet" />
+                {darkMode ? <style dangerouslySetInnerHTML={{__html:`img { filter: invert(1); mix-blend-mode: color-dodge }`}} /> : <style dangerouslySetInnerHTML={{__html:`img { filter: sepia(1) hue-rotate(180deg) opacity(.9) grayscale(.7) }`}} />}
+                </>
+              }
+            >
+              {getBlock({ theme, darkMode })[blockType][blockName]}
+            </Frame>
+            <div className="codes">
+              <SyntaxHighlighter language="html" style={darkMode ? vs2015 : docco} showLineNumbers>
+                {this.beautifyHTML(this.state.markup)}
+              </SyntaxHighlighter>
+            </div>
+          </div>
+        </main>
+      </div>
+    );
+  }
+}
+
+export default App;

src/App.test.js

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

src/blocks/blog/dark/a.js

@@ -0,0 +1,227 @@
+import React from 'react';
+import PropTypes from  "prop-types";
+
+function DarkBlogA(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-wrap -m-4">
+          <div className="p-4 md:w-1/3">
+            <div className="h-full border-2 border-gray-800 rounded-lg overflow-hidden">
+              <img
+                className="lg:h-48 md:h-36 w-full object-cover object-center"
+                src="https://dummyimage.com/720x400"
+                alt="blog"
+              />
+              <div className="p-6">
+                <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
+                  CATEGORY
+                </h2>
+                <h1 className="title-font text-lg font-medium text-white mb-3">
+                  The Catalyzer
+                </h1>
+                <p className="leading-relaxed mb-3">
+                  Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+                  microdosing tousled waistcoat.
+                </p>
+                <div className="flex items-center flex-wrap ">
+                  <a href className={`text-${props.theme}-500 inline-flex items-center md:mb-2 lg:mb-0`}>
+                    Learn More
+                    <svg
+                      className="w-4 h-4 ml-2"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="M5 12h14" />
+                      <path d="M12 5l7 7-7 7" />
+                    </svg>
+                  </a>
+                  <span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
+                    <svg
+                      className="w-4 h-4 mr-1"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                      <circle cx={12} cy={12} r={3} />
+                    </svg>
+                    1.2K
+                  </span>
+                  <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                    <svg
+                      className="w-4 h-4 mr-1"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                    </svg>
+                    6
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="p-4 md:w-1/3">
+            <div className="h-full border-2 border-gray-800 rounded-lg overflow-hidden">
+              <img
+                className="lg:h-48 md:h-36 w-full object-cover object-center"
+                src="https://dummyimage.com/721x401"
+                alt="blog"
+              />
+              <div className="p-6">
+                <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
+                  CATEGORY
+                </h2>
+                <h1 className="title-font text-lg font-medium text-white mb-3">
+                  The 400 Blows
+                </h1>
+                <p className="leading-relaxed mb-3">
+                  Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+                  microdosing tousled waistcoat.
+                </p>
+                <div className="flex items-center flex-wrap">
+                  <a href className={`text-${props.theme}-500 inline-flex items-center md:mb-2 lg:mb-0`}>
+                    Learn More
+                    <svg
+                      className="w-4 h-4 ml-2"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="M5 12h14" />
+                      <path d="M12 5l7 7-7 7" />
+                    </svg>
+                  </a>
+                  <span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
+                    <svg
+                      className="w-4 h-4 mr-1"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                      <circle cx={12} cy={12} r={3} />
+                    </svg>
+                    1.2K
+                  </span>
+                  <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                    <svg
+                      className="w-4 h-4 mr-1"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                    </svg>
+                    6
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="p-4 md:w-1/3">
+            <div className="h-full border-2 border-gray-800 rounded-lg overflow-hidden">
+              <img
+                className="lg:h-48 md:h-36 w-full object-cover object-center"
+                src="https://dummyimage.com/722x402"
+                alt="blog"
+              />
+              <div className="p-6">
+                <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
+                  CATEGORY
+                </h2>
+                <h1 className="title-font text-lg font-medium text-white mb-3">
+                  Shooting Stars
+                </h1>
+                <p className="leading-relaxed mb-3">
+                  Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+                  microdosing tousled waistcoat.
+                </p>
+                <div className="flex items-center flex-wrap ">
+                  <a
+                    href
+                    className={`text-${props.theme}-500 inline-flex items-center md:mb-2 lg:mb-0`}
+                  >
+                    Learn More
+                    <svg
+                      className="w-4 h-4 ml-2"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="M5 12h14" />
+                      <path d="M12 5l7 7-7 7" />
+                    </svg>
+                  </a>
+                  <span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
+                    <svg
+                      className="w-4 h-4 mr-1"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                      <circle cx={12} cy={12} r={3} />
+                    </svg>
+                    1.2K
+                  </span>
+                  <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                    <svg
+                      className="w-4 h-4 mr-1"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                    </svg>
+                    6
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>    
+  )
+}
+
+DarkBlogA.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkBlogA.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkBlogA;

src/blocks/blog/dark/b.js

@@ -0,0 +1,203 @@
+import React from 'react';
+import PropTypes from  "prop-types";
+
+function DarkBlogB(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-wrap -m-4">
+          <div className="p-4 lg:w-1/3">
+            <div className="h-full bg-gray-800 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
+              <h2 className="tracking-widest text-xs title-font font-medium text-gray-600 mb-1">
+                CATEGORY
+              </h2>
+              <h1 className="title-font sm:text-2xl text-xl font-medium text-white mb-3">
+                Raclette Blueberry Nextious Level
+              </h1>
+              <p className="leading-relaxed mb-3">
+                Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+                microdosing tousled waistcoat.
+              </p>
+              <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5l7 7-7 7" />
+                </svg>
+              </a>
+              <div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
+                <span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-700">
+                  <svg
+                    className="w-4 h-4 mr-1"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                    <circle cx={12} cy={12} r={3} />
+                  </svg>
+                  1.2K
+                </span>
+                <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                  <svg
+                    className="w-4 h-4 mr-1"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                  </svg>
+                  6
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="p-4 lg:w-1/3">
+            <div className="h-full bg-gray-800 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
+              <h2 className="tracking-widest text-xs title-font font-medium text-gray-600 mb-1">
+                CATEGORY
+              </h2>
+              <h1 className="title-font sm:text-2xl text-xl font-medium text-white mb-3">
+                Ennui Snackwave Thundercats
+              </h1>
+              <p className="leading-relaxed mb-3">
+                Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+                microdosing tousled waistcoat.
+              </p>
+              <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5l7 7-7 7" />
+                </svg>
+              </a>
+              <div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
+                <span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-700">
+                  <svg
+                    className="w-4 h-4 mr-1"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                    <circle cx={12} cy={12} r={3} />
+                  </svg>
+                  1.2K
+                </span>
+                <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                  <svg
+                    className="w-4 h-4 mr-1"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                  </svg>
+                  6
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="p-4 lg:w-1/3">
+            <div className="h-full bg-gray-800 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
+              <h2 className="tracking-widest text-xs title-font font-medium text-gray-600 mb-1">
+                CATEGORY
+              </h2>
+              <h1 className="title-font sm:text-2xl text-xl font-medium text-white mb-3">
+                Selvage Poke Waistcoat Godard
+              </h1>
+              <p className="leading-relaxed mb-3">
+                Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+                microdosing tousled waistcoat.
+              </p>
+              <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5l7 7-7 7" />
+                </svg>
+              </a>
+              <div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
+                <span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-700">
+                  <svg
+                    className="w-4 h-4 mr-1"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                    <circle cx={12} cy={12} r={3} />
+                  </svg>
+                  1.2K
+                </span>
+                <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                  <svg
+                    className="w-4 h-4 mr-1"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                  </svg>
+                  6
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+DarkBlogB.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkBlogB.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkBlogB;

src/blocks/blog/dark/c.js

@@ -0,0 +1,170 @@
+import React from 'react';
+import PropTypes from  "prop-types";
+
+function DarkBlogC(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font overflow-hidden">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-wrap -m-12">
+          <div className="p-12 md:w-1/2 flex flex-col items-start">
+            <span className="inline-block py-1 px-3 rounded bg-gray-800 text-gray-500 text-sm font-medium tracking-widest">
+              CATEGORY
+            </span>
+            <h2 className="sm:text-3xl text-2xl title-font font-medium text-white mt-4 mb-4">
+              Roof party normcore before they sold out, cornhole vape
+            </h2>
+            <p className="leading-relaxed mb-8">
+              Live-edge letterpress cliche, salvia fanny pack humblebrag narwhal
+              portland. VHS man braid palo santo hoodie brunch trust fund. Bitters
+              hashtag waistcoat fashion axe chia unicorn. Plaid fixie chambray 90's,
+              slow-carb etsy tumeric. Cray pug you probably haven't heard of them
+              hexagon kickstarter craft beer pork chic.
+            </p>
+            <div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-800 mt-auto w-full">
+              <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5l7 7-7 7" />
+                </svg>
+              </a>
+              <span className="text-gray-600 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
+                <svg
+                  className="w-4 h-4 mr-1"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                  <circle cx={12} cy={12} r={3} />
+                </svg>
+                1.2K
+              </span>
+              <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                <svg
+                  className="w-4 h-4 mr-1"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                </svg>
+                6
+              </span>
+            </div>
+            <a href className="inline-flex items-center">
+              <img
+                alt="blog"
+                src="https://dummyimage.com/104x104"
+                className="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center"
+              />
+              <span className="flex-grow flex flex-col pl-4">
+                <span className="title-font font-medium text-white">
+                  Holden Caulfield
+                </span>
+                <span className="text-gray-600 text-sm">UI DEVELOPER</span>
+              </span>
+            </a>
+          </div>
+          <div className="p-12 md:w-1/2 flex flex-col items-start">
+            <span className="inline-block py-1 px-3 rounded bg-gray-800 text-gray-500 text-sm font-medium tracking-widest">
+              CATEGORY
+            </span>
+            <h2 className="sm:text-3xl text-2xl title-font font-medium text-white mt-4 mb-4">
+              Pinterest DIY dreamcatcher gentrify single-origin coffee
+            </h2>
+            <p className="leading-relaxed mb-8">
+              Live-edge letterpress cliche, salvia fanny pack humblebrag narwhal
+              portland. VHS man braid palo santo hoodie brunch trust fund. Bitters
+              hashtag waistcoat fashion axe chia unicorn. Plaid fixie chambray 90's,
+              slow-carb etsy tumeric.
+            </p>
+            <div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-800 mt-auto w-full">
+              <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5l7 7-7 7" />
+                </svg>
+              </a>
+              <span className="text-gray-600 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
+                <svg
+                  className="w-4 h-4 mr-1"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                  <circle cx={12} cy={12} r={3} />
+                </svg>
+                1.2K
+              </span>
+              <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                <svg
+                  className="w-4 h-4 mr-1"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                </svg>
+                6
+              </span>
+            </div>
+            <a href className="inline-flex items-center">
+              <img
+                alt="blog"
+                src="https://dummyimage.com/103x103"
+                className="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center"
+              />
+              <span className="flex-grow flex flex-col pl-4">
+                <span className="title-font font-medium text-white">
+                  Alper Kamu
+                </span>
+                <span className="text-gray-600 text-sm">DESIGNER</span>
+              </span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+DarkBlogC.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkBlogC.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkBlogC;

src/blocks/blog/dark/d.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import PropTypes from  "prop-types";
+
+function DarkBlogD(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font overflow-hidden">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="-my-8">
+          <div className="py-8 flex flex-wrap md:flex-no-wrap">
+            <div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+              <span className="tracking-widest font-medium title-font text-white">
+                CATEGORY
+              </span>
+              <span className="mt-1 text-gray-600 text-sm">12 Jun 2019</span>
+            </div>
+            <div className="md:flex-grow">
+              <h2 className="text-2xl font-medium text-white title-font mb-2">
+                Bitters hashtag waistcoat fashion axe chia unicorn
+              </h2>
+              <p className="leading-relaxed">
+                Glossier echo park pug, church-key sartorial biodiesel vexillologist
+                pop-up snackwave ramps cornhole. Marfa 3 wolf moon party messenger
+                bag selfies, poke vaporware kombucha lumbersexual pork belly
+                polaroid hoodie portland craft beer.
+              </p>
+              <a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
+                Learn More
+                <svg
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div className="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-no-wrap">
+            <div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+              <span className="tracking-widest font-medium title-font text-white">
+                CATEGORY
+              </span>
+              <span className="mt-1 text-gray-600 text-sm">12 Jun 2019</span>
+            </div>
+            <div className="md:flex-grow">
+              <h2 className="text-2xl font-medium text-white title-font mb-2">
+                Meditation bushwick direct trade taxidermy shaman
+              </h2>
+              <p className="leading-relaxed">
+                Glossier echo park pug, church-key sartorial biodiesel vexillologist
+                pop-up snackwave ramps cornhole. Marfa 3 wolf moon party messenger
+                bag selfies, poke vaporware kombucha lumbersexual pork belly
+                polaroid hoodie portland craft beer.
+              </p>
+              <a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
+                Learn More
+                <svg
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div className="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-no-wrap">
+            <div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+              <span className="tracking-widest font-medium title-font text-white">
+                CATEGORY
+              </span>
+              <span className="mt-1 text-gray-600 text-sm">12 Jun 2019</span>
+            </div>
+            <div className="md:flex-grow">
+              <h2 className="text-2xl font-medium text-white title-font mb-2">
+                Woke master cleanse drinking vinegar salvia
+              </h2>
+              <p className="leading-relaxed">
+                Glossier echo park pug, church-key sartorial biodiesel vexillologist
+                pop-up snackwave ramps cornhole. Marfa 3 wolf moon party messenger
+                bag selfies, poke vaporware kombucha lumbersexual pork belly
+                polaroid hoodie portland craft beer.
+              </p>
+              <a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
+                Learn More
+                <svg
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+DarkBlogD.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkBlogD.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkBlogD;

src/blocks/blog/dark/e.js

@@ -0,0 +1,131 @@
+import React from 'react';
+import PropTypes from  "prop-types";
+
+function DarkBlogE(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-wrap -mx-4 -my-8">
+          <div className="py-8 px-4 lg:w-1/3">
+            <div className="h-full flex items-start">
+              <div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
+                <span className="text-gray-600 pb-2 mb-2 border-b-2 border-gray-800">
+                  Jul
+                </span>
+                <span className="font-medium text-xl text-gray-300 title-font">
+                  18
+                </span>
+              </div>
+              <div className="flex-grow pl-6">
+                <h2 className={`tracking-widest text-xs title-font font-medium text-${props.theme}-500 mb-1`}>
+                  CATEGORY
+                </h2>
+                <h1 className="title-font text-xl font-medium text-white mb-3">
+                  The 400 Blows
+                </h1>
+                <p className="leading-relaxed mb-5">
+                  Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+                  microdosing tousled waistcoat.
+                </p>
+                <a href className="inline-flex items-center">
+                  <img
+                    alt="blog"
+                    src="https://dummyimage.com/103x103"
+                    className="w-8 h-8 rounded-full flex-shrink-0 object-cover object-center"
+                  />
+                  <span className="flex-grow flex flex-col pl-3">
+                    <span className="title-font font-medium text-white">
+                      Alper Kamu
+                    </span>
+                  </span>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="py-8 px-4 lg:w-1/3">
+            <div className="h-full flex items-start">
+              <div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
+                <span className="text-gray-600 pb-2 mb-2 border-b-2 border-gray-800">
+                  Jul
+                </span>
+                <span className="font-medium text-xl text-gray-300 title-font">
+                  18
+                </span>
+              </div>
+              <div className="flex-grow pl-6">
+                <h2 className={`tracking-widest text-xs title-font font-medium text-${props.theme}-500 mb-1`}>
+                  CATEGORY
+                </h2>
+                <h1 className="title-font text-xl font-medium text-white mb-3">
+                  Shooting Stars
+                </h1>
+                <p className="leading-relaxed mb-5">
+                  Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+                  microdosing tousled waistcoat.
+                </p>
+                <a href className="inline-flex items-center">
+                  <img
+                    alt="blog"
+                    src="https://dummyimage.com/102x102"
+                    className="w-8 h-8 rounded-full flex-shrink-0 object-cover object-center"
+                  />
+                  <span className="flex-grow flex flex-col pl-3">
+                    <span className="title-font font-medium text-white">
+                      Holden Caulfield
+                    </span>
+                  </span>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="py-8 px-4 lg:w-1/3">
+            <div className="h-full flex items-start">
+              <div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
+                <span className="text-gray-600 pb-2 mb-2 border-b-2 border-gray-800">
+                  Jul
+                </span>
+                <span className="font-medium text-xl text-gray-300 title-font">
+                  18
+                </span>
+              </div>
+              <div className="flex-grow pl-6">
+                <h2 className={`tracking-widest text-xs title-font font-medium text-${props.theme}-500 mb-1`}>
+                  CATEGORY
+                </h2>
+                <h1 className="title-font text-xl font-medium text-white mb-3">
+                  Neptune
+                </h1>
+                <p className="leading-relaxed mb-5">
+                  Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+                  microdosing tousled waistcoat.
+                </p>
+                <a href className="inline-flex items-center">
+                  <img
+                    alt="blog"
+                    src="https://dummyimage.com/101x101"
+                    className="w-8 h-8 rounded-full flex-shrink-0 object-cover object-center"
+                  />
+                  <span className="flex-grow flex flex-col pl-3">
+                    <span className="title-font font-medium text-white">
+                      Henry Letham
+                    </span>
+                  </span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+DarkBlogE.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkBlogE.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkBlogE;

src/blocks/blog/light/a.js

@@ -0,0 +1,233 @@
+import React from 'react';
+import PropTypes from  "prop-types";
+
+function LightBlogA(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-wrap -m-4">
+          <div className="p-4 md:w-1/3">
+            <div className="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
+              <img
+                className="lg:h-48 md:h-36 w-full object-cover object-center"
+                src="https://dummyimage.com/720x400"
+                alt="blog"
+              />
+              <div className="p-6">
+                <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
+                  CATEGORY
+                </h2>
+                <h1 className="title-font text-lg font-medium text-gray-900 mb-3">
+                  The Catalyzer
+                </h1>
+                <p className="leading-relaxed mb-3">
+                  Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+                  microdosing tousled waistcoat.
+                </p>
+                <div className="flex items-center flex-wrap ">
+                  <a
+                    href
+                    className={`text-${props.theme}-500 inline-flex items-center md:mb-2 lg:mb-0`}
+                  >
+                    Learn More
+                    <svg
+                      className="w-4 h-4 ml-2"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="M5 12h14" />
+                      <path d="M12 5l7 7-7 7" />
+                    </svg>
+                  </a>
+                  <span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
+                    <svg
+                      className="w-4 h-4 mr-1"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                      <circle cx={12} cy={12} r={3} />
+                    </svg>
+                    1.2K
+                  </span>
+                  <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                    <svg
+                      className="w-4 h-4 mr-1"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                    </svg>
+                    6
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="p-4 md:w-1/3">
+            <div className="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
+              <img
+                className="lg:h-48 md:h-36 w-full object-cover object-center"
+                src="https://dummyimage.com/721x401"
+                alt="blog"
+              />
+              <div className="p-6">
+                <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
+                  CATEGORY
+                </h2>
+                <h1 className="title-font text-lg font-medium text-gray-900 mb-3">
+                  The 400 Blows
+                </h1>
+                <p className="leading-relaxed mb-3">
+                  Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+                  microdosing tousled waistcoat.
+                </p>
+                <div className="flex items-center flex-wrap">
+                  <a
+                    href
+                    className={`text-${props.theme}-500 inline-flex items-center md:mb-2 lg:mb-0`}
+                  >
+                    Learn More
+                    <svg
+                      className="w-4 h-4 ml-2"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="M5 12h14" />
+                      <path d="M12 5l7 7-7 7" />
+                    </svg>
+                  </a>
+                  <span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
+                    <svg
+                      className="w-4 h-4 mr-1"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                      <circle cx={12} cy={12} r={3} />
+                    </svg>
+                    1.2K
+                  </span>
+                  <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                    <svg
+                      className="w-4 h-4 mr-1"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                    </svg>
+                    6
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="p-4 md:w-1/3">
+            <div className="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
+              <img
+                className="lg:h-48 md:h-36 w-full object-cover object-center"
+                src="https://dummyimage.com/722x402"
+                alt="blog"
+              />
+              <div className="p-6">
+                <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
+                  CATEGORY
+                </h2>
+                <h1 className="title-font text-lg font-medium text-gray-900 mb-3">
+                  Shooting Stars
+                </h1>
+                <p className="leading-relaxed mb-3">
+                  Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+                  microdosing tousled waistcoat.
+                </p>
+                <div className="flex items-center flex-wrap ">
+                  <a
+                    href
+                    className={`text-${props.theme}-500 inline-flex items-center md:mb-2 lg:mb-0`}
+                  >
+                    Learn More
+                    <svg
+                      className="w-4 h-4 ml-2"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="M5 12h14" />
+                      <path d="M12 5l7 7-7 7" />
+                    </svg>
+                  </a>
+                  <span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
+                    <svg
+                      className="w-4 h-4 mr-1"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                      <circle cx={12} cy={12} r={3} />
+                    </svg>
+                    1.2K
+                  </span>
+                  <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                    <svg
+                      className="w-4 h-4 mr-1"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                    </svg>
+                    6
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+LightBlogA.defaultProps = {
+  theme: 'indigo'
+};
+
+LightBlogA.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightBlogA;

src/blocks/blog/light/b.js

@@ -0,0 +1,203 @@
+import React from 'react';
+import PropTypes from  "prop-types";
+
+function LightBlogB(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-wrap -m-4">
+          <div className="p-4 lg:w-1/3">
+            <div className="h-full bg-gray-200 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
+              <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
+                CATEGORY
+              </h2>
+              <h1 className="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
+                Raclette Blueberry Nextious Level
+              </h1>
+              <p className="leading-relaxed mb-3">
+                Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+                microdosing tousled waistcoat.
+              </p>
+              <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5l7 7-7 7" />
+                </svg>
+              </a>
+              <div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
+                <span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
+                  <svg
+                    className="w-4 h-4 mr-1"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                    <circle cx={12} cy={12} r={3} />
+                  </svg>
+                  1.2K
+                </span>
+                <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                  <svg
+                    className="w-4 h-4 mr-1"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                  </svg>
+                  6
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="p-4 lg:w-1/3">
+            <div className="h-full bg-gray-200 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
+              <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
+                CATEGORY
+              </h2>
+              <h1 className="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
+                Ennui Snackwave Thundercats
+              </h1>
+              <p className="leading-relaxed mb-3">
+                Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+                microdosing tousled waistcoat.
+              </p>
+              <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5l7 7-7 7" />
+                </svg>
+              </a>
+              <div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
+                <span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
+                  <svg
+                    className="w-4 h-4 mr-1"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                    <circle cx={12} cy={12} r={3} />
+                  </svg>
+                  1.2K
+                </span>
+                <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                  <svg
+                    className="w-4 h-4 mr-1"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                  </svg>
+                  6
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="p-4 lg:w-1/3">
+            <div className="h-full bg-gray-200 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
+              <h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
+                CATEGORY
+              </h2>
+              <h1 className="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
+                Selvage Poke Waistcoat Godard
+              </h1>
+              <p className="leading-relaxed mb-3">
+                Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+                microdosing tousled waistcoat.
+              </p>
+              <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5l7 7-7 7" />
+                </svg>
+              </a>
+              <div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
+                <span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
+                  <svg
+                    className="w-4 h-4 mr-1"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                    <circle cx={12} cy={12} r={3} />
+                  </svg>
+                  1.2K
+                </span>
+                <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                  <svg
+                    className="w-4 h-4 mr-1"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                  </svg>
+                  6
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+LightBlogB.defaultProps = {
+  theme: 'indigo'
+};
+
+LightBlogB.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightBlogB;

src/blocks/blog/light/c.js

@@ -0,0 +1,170 @@
+import React from 'react';
+import PropTypes from  "prop-types";
+
+function LightBlogC(props) {
+  return (
+    <section className="text-gray-700 body-font overflow-hidden">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-wrap -m-12">
+          <div className="p-12 md:w-1/2 flex flex-col items-start">
+            <span className={`inline-block py-1 px-3 rounded bg-${props.theme}-100 text-${props.theme}-500 text-sm font-medium tracking-widest`}>
+              CATEGORY
+            </span>
+            <h2 className="sm:text-3xl text-2xl title-font font-medium text-gray-900 mt-4 mb-4">
+              Roof party normcore before they sold out, cornhole vape
+            </h2>
+            <p className="leading-relaxed mb-8">
+              Live-edge letterpress cliche, salvia fanny pack humblebrag narwhal
+              portland. VHS man braid palo santo hoodie brunch trust fund. Bitters
+              hashtag waistcoat fashion axe chia unicorn. Plaid fixie chambray 90's,
+              slow-carb etsy tumeric. Cray pug you probably haven't heard of them
+              hexagon kickstarter craft beer pork chic.
+            </p>
+            <div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-200 mt-auto w-full">
+              <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5l7 7-7 7" />
+                </svg>
+              </a>
+              <span className="text-gray-600 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
+                <svg
+                  className="w-4 h-4 mr-1"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                  <circle cx={12} cy={12} r={3} />
+                </svg>
+                1.2K
+              </span>
+              <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                <svg
+                  className="w-4 h-4 mr-1"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                </svg>
+                6
+              </span>
+            </div>
+            <a href className="inline-flex items-center">
+              <img
+                alt="blog"
+                src="https://dummyimage.com/104x104"
+                className="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center"
+              />
+              <span className="flex-grow flex flex-col pl-4">
+                <span className="title-font font-medium text-gray-900">
+                  Holden Caulfield
+                </span>
+                <span className="text-gray-500 text-sm">UI DEVELOPER</span>
+              </span>
+            </a>
+          </div>
+          <div className="p-12 md:w-1/2 flex flex-col items-start">
+            <span className={`inline-block py-1 px-3 rounded bg-${props.theme}-100 text-${props.theme}-500 text-sm font-medium tracking-widest`}>
+              CATEGORY
+            </span>
+            <h2 className="sm:text-3xl text-2xl title-font font-medium text-gray-900 mt-4 mb-4">
+              Pinterest DIY dreamcatcher gentrify single-origin coffee
+            </h2>
+            <p className="leading-relaxed mb-8">
+              Live-edge letterpress cliche, salvia fanny pack humblebrag narwhal
+              portland. VHS man braid palo santo hoodie brunch trust fund. Bitters
+              hashtag waistcoat fashion axe chia unicorn. Plaid fixie chambray 90's,
+              slow-carb etsy tumeric.
+            </p>
+            <div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-200 mt-auto w-full">
+              <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5l7 7-7 7" />
+                </svg>
+              </a>
+              <span className="text-gray-600 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
+                <svg
+                  className="w-4 h-4 mr-1"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                  <circle cx={12} cy={12} r={3} />
+                </svg>
+                1.2K
+              </span>
+              <span className="text-gray-600 inline-flex items-center leading-none text-sm">
+                <svg
+                  className="w-4 h-4 mr-1"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                </svg>
+                6
+              </span>
+            </div>
+            <a href className="inline-flex items-center">
+              <img
+                alt="blog"
+                src="https://dummyimage.com/103x103"
+                className="w-12 h-12 rounded-full flex-shrink-0 object-cover object-center"
+              />
+              <span className="flex-grow flex flex-col pl-4">
+                <span className="title-font font-medium text-gray-900">
+                  Alper Kamu
+                </span>
+                <span className="text-gray-500 text-sm">DESIGNER</span>
+              </span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+LightBlogC.defaultProps = {
+  theme: 'indigo'
+};
+
+LightBlogC.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightBlogC;

src/blocks/blog/light/d.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import PropTypes from  "prop-types";
+
+function LightBlogD(props) {
+  return (
+    <section className="text-gray-700 body-font overflow-hidden">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="-my-8">
+          <div className="py-8 flex flex-wrap md:flex-no-wrap">
+            <div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+              <span className="tracking-widest font-medium title-font text-gray-900">
+                CATEGORY
+              </span>
+              <span className="mt-1 text-gray-500 text-sm">12 Jun 2019</span>
+            </div>
+            <div className="md:flex-grow">
+              <h2 className="text-2xl font-medium text-gray-900 title-font mb-2">
+                Bitters hashtag waistcoat fashion axe chia unicorn
+              </h2>
+              <p className="leading-relaxed">
+                Glossier echo park pug, church-key sartorial biodiesel vexillologist
+                pop-up snackwave ramps cornhole. Marfa 3 wolf moon party messenger
+                bag selfies, poke vaporware kombucha lumbersexual pork belly
+                polaroid hoodie portland craft beer.
+              </p>
+              <a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
+                Learn More
+                <svg
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div className="py-8 flex border-t-2 border-gray-200 flex-wrap md:flex-no-wrap">
+            <div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+              <span className="tracking-widest font-medium title-font text-gray-900">
+                CATEGORY
+              </span>
+              <span className="mt-1 text-gray-500 text-sm">12 Jun 2019</span>
+            </div>
+            <div className="md:flex-grow">
+              <h2 className="text-2xl font-medium text-gray-900 title-font mb-2">
+                Meditation bushwick direct trade taxidermy shaman
+              </h2>
+              <p className="leading-relaxed">
+                Glossier echo park pug, church-key sartorial biodiesel vexillologist
+                pop-up snackwave ramps cornhole. Marfa 3 wolf moon party messenger
+                bag selfies, poke vaporware kombucha lumbersexual pork belly
+                polaroid hoodie portland craft beer.
+              </p>
+              <a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
+                Learn More
+                <svg
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div className="py-8 flex border-t-2 border-gray-200 flex-wrap md:flex-no-wrap">
+            <div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
+              <span className="tracking-widest font-medium title-font text-gray-900">
+                CATEGORY
+              </span>
+              <span className="mt-1 text-gray-500 text-sm">12 Jun 2019</span>
+            </div>
+            <div className="md:flex-grow">
+              <h2 className="text-2xl font-medium text-gray-900 title-font mb-2">
+                Woke master cleanse drinking vinegar salvia
+              </h2>
+              <p className="leading-relaxed">
+                Glossier echo park pug, church-key sartorial biodiesel vexillologist
+                pop-up snackwave ramps cornhole. Marfa 3 wolf moon party messenger
+                bag selfies, poke vaporware kombucha lumbersexual pork belly
+                polaroid hoodie portland craft beer.
+              </p>
+              <a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
+                Learn More
+                <svg
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  fill="none"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+LightBlogD.defaultProps = {
+  theme: 'indigo'
+};
+
+LightBlogD.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightBlogD;

src/blocks/blog/light/e.js

@@ -0,0 +1,131 @@
+import React from 'react';
+import PropTypes from  "prop-types";
+
+function LightBlogE(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-wrap -mx-4 -my-8">
+          <div className="py-8 px-4 lg:w-1/3">
+            <div className="h-full flex items-start">
+              <div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
+                <span className="text-gray-500 pb-2 mb-2 border-b-2 border-gray-300">
+                  Jul
+                </span>
+                <span className="font-medium text-xl text-gray-800 title-font">
+                  18
+                </span>
+              </div>
+              <div className="flex-grow pl-6">
+                <h2 className={`tracking-widest text-xs title-font font-medium text-${props.theme}-500 mb-1`}>
+                  CATEGORY
+                </h2>
+                <h1 className="title-font text-xl font-medium text-gray-900 mb-3">
+                  The 400 Blows
+                </h1>
+                <p className="leading-relaxed mb-5">
+                  Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+                  microdosing tousled waistcoat.
+                </p>
+                <a href className="inline-flex items-center">
+                  <img
+                    alt="blog"
+                    src="https://dummyimage.com/103x103"
+                    className="w-8 h-8 rounded-full flex-shrink-0 object-cover object-center"
+                  />
+                  <span className="flex-grow flex flex-col pl-3">
+                    <span className="title-font font-medium text-gray-900">
+                      Alper Kamu
+                    </span>
+                  </span>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="py-8 px-4 lg:w-1/3">
+            <div className="h-full flex items-start">
+              <div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
+                <span className="text-gray-500 pb-2 mb-2 border-b-2 border-gray-300">
+                  Jul
+                </span>
+                <span className="font-medium text-xl text-gray-800 title-font">
+                  18
+                </span>
+              </div>
+              <div className="flex-grow pl-6">
+                <h2 className={`tracking-widest text-xs title-font font-medium text-${props.theme}-500 mb-1`}>
+                  CATEGORY
+                </h2>
+                <h1 className="title-font text-xl font-medium text-gray-900 mb-3">
+                  Shooting Stars
+                </h1>
+                <p className="leading-relaxed mb-5">
+                  Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+                  microdosing tousled waistcoat.
+                </p>
+                <a href className="inline-flex items-center">
+                  <img
+                    alt="blog"
+                    src="https://dummyimage.com/102x102"
+                    className="w-8 h-8 rounded-full flex-shrink-0 object-cover object-center"
+                  />
+                  <span className="flex-grow flex flex-col pl-3">
+                    <span className="title-font font-medium text-gray-900">
+                      Holden Caulfield
+                    </span>
+                  </span>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="py-8 px-4 lg:w-1/3">
+            <div className="h-full flex items-start">
+              <div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
+                <span className="text-gray-500 pb-2 mb-2 border-b-2 border-gray-300">
+                  Jul
+                </span>
+                <span className="font-medium text-xl text-gray-800 title-font">
+                  18
+                </span>
+              </div>
+              <div className="flex-grow pl-6">
+                <h2 className={`tracking-widest text-xs title-font font-medium text-${props.theme}-500 mb-1`}>
+                  CATEGORY
+                </h2>
+                <h1 className="title-font text-xl font-medium text-gray-900 mb-3">
+                  Neptune
+                </h1>
+                <p className="leading-relaxed mb-5">
+                  Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+                  microdosing tousled waistcoat.
+                </p>
+                <a href className="inline-flex items-center">
+                  <img
+                    alt="blog"
+                    src="https://dummyimage.com/101x101"
+                    className="w-8 h-8 rounded-full flex-shrink-0 object-cover object-center"
+                  />
+                  <span className="flex-grow flex flex-col pl-3">
+                    <span className="title-font font-medium text-gray-900">
+                      Henry Letham
+                    </span>
+                  </span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+LightBlogE.defaultProps = {
+  theme: 'indigo'
+};
+
+LightBlogE.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightBlogE;

src/blocks/contact/dark/a.js

@@ -0,0 +1,58 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkContactA(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font relative">
+      <div className="absolute inset-0 bg-gray-900">
+        <iframe
+          title="map"
+          width="100%"
+          height="100%"
+          style={{ filter: "grayscale(1) contrast(1.2) opacity(.16)" }}
+          frameBorder="0"
+          marginHeight="0"
+          marginWidth="0"
+          scrolling="no"
+          src="https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;q=%C4%B0zmir+(My%20Business%20Name)&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed"
+        />
+      </div>
+      <div className="container px-5 py-24 mx-auto flex">
+        <div className="lg:w-1/3 md:w-1/2 bg-gray-900 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10">
+          <h2 className="text-white text-lg mb-1 font-medium title-font">
+            Feedback
+          </h2>
+          <p className="leading-relaxed mb-5 text-gray-500">
+            Post-ironic portland shabby chic echo park, banjo fashion axe
+          </p>
+          <input
+            className={`bg-gray-800 text-white rounded border border-gray-700 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
+            placeholder="Email"
+            type="email"
+          ></input>
+          <textarea
+            className={`bg-gray-800 text-white rounded border border-gray-700 focus:outline-none h-32 focus:border-${props.theme}-500 text-base px-4 py-2 mb-4 resize-none`}
+            placeholder="Message"
+          ></textarea>
+          <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+            Button
+          </button>
+          <p className="text-xs text-gray-600 mt-3">
+            Chicharrones blog helvetica normcore iceland tousled brook viral
+            artisan.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkContactA.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkContactA.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkContactA;

src/blocks/contact/dark/b.js

@@ -0,0 +1,87 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkContactB(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font relative">
+      <div className="container px-5 py-24 mx-auto flex sm:flex-no-wrap flex-wrap">
+        <div className="lg:w-2/3 md:w-1/2 bg-gray-900 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
+          <iframe
+            width="100%"
+            height="100%"
+            title="map"
+            className="absolute inset-0"
+            style={{ filter: "grayscale(1) contrast(1.2) opacity(.16)" }}
+            frameBorder="0"
+            marginHeight="0"
+            marginWidth="0"
+            scrolling="no"
+            src="https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;q=%C4%B0zmir+(My%20Business%20Name)&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed"
+          />
+          <div className="bg-gray-900 relative flex flex-wrap py-6">
+            <div className="lg:w-1/2 px-6">
+              <h2 className="title-font font-medium text-white tracking-widest text-sm">
+                ADDRESS
+              </h2>
+              <p className="leading-relaxed">
+                Photo booth tattooed prism, portland taiyaki hoodie neutra
+                typewriter
+              </p>
+            </div>
+            <div className="lg:w-1/2 px-6 mt-4 lg:mt-0">
+              <h2 className="title-font font-medium text-white tracking-widest text-sm">
+                EMAIL
+              </h2>
+              <a href className={`text-${props.theme}-500 leading-relaxed`}>
+                example@email.com
+              </a>
+              <h2 className="title-font font-medium text-white tracking-widest text-sm mt-4">
+                PHONE
+              </h2>
+              <p className="leading-relaxed">123-456-7890</p>
+            </div>
+          </div>
+        </div>
+        <div className="lg:w-1/3 md:w-1/2 flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
+          <h2 className="text-white text-lg mb-1 font-medium title-font">
+            Feedback
+          </h2>
+          <p className="leading-relaxed mb-5 text-gray-600">
+            Post-ironic portland shabby chic echo park, banjo fashion axe
+          </p>
+          <input
+            className={`bg-gray-800 rounded border border-gray-700 focus:outline-none focus:border-${props.theme}-500 text-base text-white px-4 py-2 mb-4`}
+            placeholder="Name"
+            type="text"
+          ></input>
+          <input
+            className={`bg-gray-800 rounded border border-gray-700 focus:outline-none focus:border-${props.theme}-500 text-base text-white px-4 py-2 mb-4`}
+            placeholder="Email"
+            type="email"
+          ></input>
+          <textarea
+            className={`bg-gray-800 rounded border border-gray-700 focus:outline-none h-32 focus:border-${props.theme}-500 text-base text-white px-4 py-2 mb-4 resize-none`}
+            placeholder="Message"
+          ></textarea>
+          <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+            Button
+          </button>
+          <p className="text-xs text-gray-500 mt-3">
+            Chicharrones blog helvetica normcore iceland tousled brook viral
+            artisan.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkContactB.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkContactB.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkContactB;

src/blocks/contact/dark/c.js

@@ -0,0 +1,124 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkContactC(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font relative">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-col text-center w-full mb-12">
+          <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
+            Contact Us
+          </h1>
+          <p className="lg:w-2/3 mx-auto leading-relaxed text-base">
+            Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
+            gentrify.
+          </p>
+        </div>
+        <div className="lg:w-1/2 md:w-2/3 mx-auto">
+          <div className="flex flex-wrap -m-2">
+            <div className="p-2 w-1/2">
+              <input
+                className={`w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2`}
+                placeholder="Name"
+                type="text"
+              ></input>
+            </div>
+            <div className="p-2 w-1/2">
+              <input
+                className={`w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2`}
+                placeholder="Email"
+                type="email"
+              ></input>
+            </div>
+            <div className="p-2 w-full">
+              <textarea
+                className={`w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none h-48 focus:border-${props.theme}-500 text-base px-4 py-2 resize-none block`}
+                placeholder="Message"
+              ></textarea>
+            </div>
+            <div className="p-2 w-full">
+              <button className={`flex mx-auto text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+                Button
+              </button>
+            </div>
+            <div className="p-2 w-full pt-8 mt-8 border-t border-gray-800 text-center">
+              <a href className={`text-${props.theme}-500`}>example@email.com</a>
+              <p className="leading-normal my-5">
+                49 Smith St.<br />Saint Cloud, MN 56301
+              </p>
+              <span className="inline-flex">
+                <a href className="text-gray-500">
+                  <svg
+                    fill="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
+                  </svg>
+                </a>
+                <a href className="ml-4 text-gray-500">
+                  <svg
+                    fill="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
+                  </svg>
+                </a>
+                <a href className="ml-4 text-gray-500">
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <rect
+                      width="20"
+                      height="20"
+                      x="2"
+                      y="2"
+                      rx="5"
+                      ry="5"
+                     />
+                    <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
+                  </svg>
+                </a>
+                <a href className="ml-4 text-gray-500">
+                  <svg
+                    fill="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                  </svg>
+                </a>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkContactC.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkContactC.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkContactC;

src/blocks/contact/light/a.js

@@ -0,0 +1,58 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightContactA(props) {
+  return (
+    <section className="text-gray-700 body-font relative">
+      <div className="absolute inset-0 bg-gray-300">
+        <iframe
+          width="100%"
+          height="100%"
+          style={{ filter: "grayscale(1) contrast(1.2) opacity(.4)" }}
+          frameBorder="0"
+          marginHeight="0"
+          marginWidth="0"
+          title="map"
+          scrolling="no"
+          src="https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;q=%C4%B0zmir+(My%20Business%20Name)&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed"
+        />
+      </div>
+      <div className="container px-5 py-24 mx-auto flex">
+        <div className="lg:w-1/3 md:w-1/2 bg-white rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10">
+          <h2 className="text-gray-900 text-lg mb-1 font-medium title-font">
+            Feedback
+          </h2>
+          <p className="leading-relaxed mb-5 text-gray-600">
+            Post-ironic portland shabby chic echo park, banjo fashion axe
+          </p>
+          <input
+            className={`bg-white rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
+            placeholder="Email"
+            type="email"
+          ></input>
+          <textarea
+            className={`bg-white rounded border border-gray-400 focus:outline-none h-32 focus:border-${props.theme}-500 text-base px-4 py-2 mb-4 resize-none`}
+            placeholder="Message"
+          ></textarea>
+          <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+            Button
+          </button>
+          <p className="text-xs text-gray-500 mt-3">
+            Chicharrones blog helvetica normcore iceland tousled brook viral
+            artisan.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightContactA.defaultProps = {
+  theme: 'indigo'
+};
+
+LightContactA.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightContactA;

src/blocks/contact/light/b.js

@@ -0,0 +1,87 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightContactB(props) {
+  return (
+    <section className="text-gray-700 body-font relative">
+      <div className="container px-5 py-24 mx-auto flex sm:flex-no-wrap flex-wrap">
+        <div className="lg:w-2/3 md:w-1/2 bg-gray-300 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
+          <iframe
+            width="100%"
+            height="100%"
+            className="absolute inset-0"
+            style={{ filter: "grayscale(1) contrast(1.2) opacity(.4)" }}
+            frameBorder="0"
+            title="map"
+            marginHeight="0"
+            marginWidth="0"
+            scrolling="no"
+            src="https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;q=%C4%B0zmir+(My%20Business%20Name)&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed"
+          />
+          <div className="bg-white relative flex flex-wrap py-6">
+            <div className="lg:w-1/2 px-6">
+              <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm">
+                ADDRESS
+              </h2>
+              <p className="leading-relaxed">
+                Photo booth tattooed prism, portland taiyaki hoodie neutra
+                typewriter
+              </p>
+            </div>
+            <div className="lg:w-1/2 px-6 mt-4 lg:mt-0">
+              <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm">
+                EMAIL
+              </h2>
+              <a href className={`text-${props.theme}-500 leading-relaxed`}>
+                example@email.com
+              </a>
+              <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mt-4">
+                PHONE
+              </h2>
+              <p className="leading-relaxed">123-456-7890</p>
+            </div>
+          </div>
+        </div>
+        <div className="lg:w-1/3 md:w-1/2 bg-white flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
+          <h2 className="text-gray-900 text-lg mb-1 font-medium title-font">
+            Feedback
+          </h2>
+          <p className="leading-relaxed mb-5 text-gray-600">
+            Post-ironic portland shabby chic echo park, banjo fashion axe
+          </p>
+          <input
+            className={`bg-white rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
+            placeholder="Name"
+            type="text"
+          ></input>
+          <input
+            className={`bg-white rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
+            placeholder="Email"
+            type="email"
+          ></input>
+          <textarea
+            className={`bg-white rounded border border-gray-400 focus:outline-none h-32 focus:border-${props.theme}-500 text-base px-4 py-2 mb-4 resize-none`}
+            placeholder="Message"
+          ></textarea>
+          <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+            Button
+          </button>
+          <p className="text-xs text-gray-500 mt-3">
+            Chicharrones blog helvetica normcore iceland tousled brook viral
+            artisan.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightContactB.defaultProps = {
+  theme: 'indigo'
+};
+
+LightContactB.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightContactB;

src/blocks/contact/light/c.js

@@ -0,0 +1,124 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightContactC(props) {
+  return (
+    <section className="text-gray-700 body-font relative">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-col text-center w-full mb-12">
+          <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
+            Contact Us
+          </h1>
+          <p className="lg:w-2/3 mx-auto leading-relaxed text-base">
+            Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
+            gentrify.
+          </p>
+        </div>
+        <div className="lg:w-1/2 md:w-2/3 mx-auto">
+          <div className="flex flex-wrap -m-2">
+            <div className="p-2 w-1/2">
+              <input
+                className={`w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2`}
+                placeholder="Name"
+                type="text"
+              ></input>
+            </div>
+            <div className="p-2 w-1/2">
+              <input
+                className={`w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2`}
+                placeholder="Email"
+                type="email"
+              ></input>
+            </div>
+            <div className="p-2 w-full">
+              <textarea
+                className={`w-full bg-gray-100 rounded border border-gray-400 focus:outline-none h-48 focus:border-${props.theme}-500 text-base px-4 py-2 resize-none block`}
+                placeholder="Message"
+              ></textarea>
+            </div>
+            <div className="p-2 w-full">
+              <button className={`flex mx-auto text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+                Button
+              </button>
+            </div>
+            <div className="p-2 w-full pt-8 mt-8 border-t border-gray-200 text-center">
+              <a href className={`text-${props.theme}-500`}>example@email.com</a>
+              <p className="leading-normal my-5">
+                49 Smith St.<br />Saint Cloud, MN 56301
+              </p>
+              <span className="inline-flex">
+                <a href className="text-gray-500">
+                  <svg
+                    fill="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
+                  </svg>
+                </a>
+                <a href className="ml-4 text-gray-500">
+                  <svg
+                    fill="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
+                  </svg>
+                </a>
+                <a href className="ml-4 text-gray-500">
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <rect
+                      width="20"
+                      height="20"
+                      x="2"
+                      y="2"
+                      rx="5"
+                      ry="5"
+                     />
+                    <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
+                  </svg>
+                </a>
+                <a href className="ml-4 text-gray-500">
+                  <svg
+                    fill="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                  </svg>
+                </a>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightContactC.defaultProps = {
+  theme: 'indigo'
+};
+
+LightContactC.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightContactC;

src/blocks/content/dark/a.js

@@ -0,0 +1,132 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkContentA(props) {
+  return (
+    <section className="text-gray-500 body-font bg-gray-900">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-col text-center w-full mb-20">
+          <h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
+            ROOF PARTY POLAROID
+          </h2>
+          <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
+            Master Cleanse Reliac Heirloom
+          </h1>
+          <p className="lg:w-2/3 mx-auto leading-relaxed text-base">
+            Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
+            gentrify, subway tile poke farm-to-table. Franzen you probably
+            haven&apos;t heard of them man bun deep jianbing selfies heirloom
+            prism food truck ugh squid celiac humblebrag.
+          </p>
+        </div>
+        <div className="flex flex-wrap">
+          <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
+            <h2 className="text-lg sm:text-xl text-white font-medium title-font mb-2">
+              Shooting Stars
+            </h2>
+            <p className="leading-relaxed text-base mb-4">
+              Fingerstache flexitarian street art 8-bit waistcoat. Distillery
+              hexagon disrupt edison bulbche.
+            </p>
+            <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+          <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
+            <h2 className="text-lg sm:text-xl text-white font-medium title-font mb-2">
+              The Catalyzer
+            </h2>
+            <p className="leading-relaxed text-base mb-4">
+              Fingerstache flexitarian street art 8-bit waistcoat. Distillery
+              hexagon disrupt edison bulbche.
+            </p>
+            <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+          <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
+            <h2 className="text-lg sm:text-xl text-white font-medium title-font mb-2">
+              Neptune
+            </h2>
+            <p className="leading-relaxed text-base mb-4">
+              Fingerstache flexitarian street art 8-bit waistcoat. Distillery
+              hexagon disrupt edison bulbche.
+            </p>
+            <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+          <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-800">
+            <h2 className="text-lg sm:text-xl text-white font-medium title-font mb-2">
+              Melanchole
+            </h2>
+            <p className="leading-relaxed text-base mb-4">
+              Fingerstache flexitarian street art 8-bit waistcoat. Distillery
+              hexagon disrupt edison bulbche.
+            </p>
+            <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+        </div>
+        <button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+          Button
+        </button>
+      </div>
+    </section>
+  );
+}
+
+DarkContentA.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkContentA.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkContentA;

src/blocks/content/dark/b.js

@@ -0,0 +1,113 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkContentB(props) {
+  return (
+    <section className="text-gray-500 body-font bg-gray-900">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-wrap w-full mb-20">
+          <div className="lg:w-1/2 w-full mb-6 lg:mb-0">
+            <h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-white">
+              Pitchfork Kickstarter Taxidermy
+            </h1>
+            <div className={`h-1 w-20 bg-${props.theme}-500 rounded`} />
+          </div>
+          <p className="lg:w-1/2 w-full leading-relaxed text-base">
+            Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
+            gentrify, subway tile poke farm-to-table. Franzen you probably
+            haven&apos;t heard of them man bun deep jianbing selfies heirloom
+            prism food truck ugh squid celiac humblebrag.
+          </p>
+        </div>
+        <div className="flex flex-wrap -m-4">
+          <div className="xl:w-1/4 md:w-1/2 p-4">
+            <div className="bg-gray-800 p-6 rounded-lg">
+              <img
+                className="h-40 rounded w-full object-cover object-center mb-6"
+                src="https://dummyimage.com/720x400"
+                alt="content"
+              />
+              <h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
+                SUBTITLE
+              </h3>
+              <h2 className="text-lg text-white font-medium title-font mb-4">
+                Chichen Itza
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waistcoat. Distillery
+                hexagon disrupt edison bulbche.
+              </p>
+            </div>
+          </div>
+          <div className="xl:w-1/4 md:w-1/2 p-4">
+            <div className="bg-gray-800 p-6 rounded-lg">
+              <img
+                className="h-40 rounded w-full object-cover object-center mb-6"
+                src="https://dummyimage.com/721x401"
+                alt="content"
+              />
+              <h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
+                SUBTITLE
+              </h3>
+              <h2 className="text-lg text-white font-medium title-font mb-4">
+                Colosseum Roma
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waistcoat. Distillery
+                hexagon disrupt edison bulbche.
+              </p>
+            </div>
+          </div>
+          <div className="xl:w-1/4 md:w-1/2 p-4">
+            <div className="bg-gray-800 p-6 rounded-lg">
+              <img
+                className="h-40 rounded w-full object-cover object-center mb-6"
+                src="https://dummyimage.com/722x402"
+                alt="content"
+              />
+              <h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
+                SUBTITLE
+              </h3>
+              <h2 className="text-lg text-white font-medium title-font mb-4">
+                Great Pyramid of Giza
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waistcoat. Distillery
+                hexagon disrupt edison bulbche.
+              </p>
+            </div>
+          </div>
+          <div className="xl:w-1/4 md:w-1/2 p-4">
+            <div className="bg-gray-800 p-6 rounded-lg">
+              <img
+                className="h-40 rounded w-full object-cover object-center mb-6"
+                src="https://dummyimage.com/723x403"
+                alt="content"
+              />
+              <h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
+                SUBTITLE
+              </h3>
+              <h2 className="text-lg text-white font-medium title-font mb-4">
+                San Francisco
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waistcoat. Distillery
+                hexagon disrupt edison bulbche.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkContentB.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkContentB.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkContentB;

src/blocks/content/dark/c.js

@@ -0,0 +1,182 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkContentC(props) {
+  return (
+    <section className="text-gray-500 body-font bg-gray-900">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-wrap w-full mb-20 flex-col items-center text-center">
+          <h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-white">
+            Pitchfork Kickstarter Taxidermy
+          </h1>
+          <p className="lg:w-1/2 w-full leading-relaxed text-base">
+            Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
+            gentrify, subway tile poke farm-to-table.
+          </p>
+        </div>
+        <div className="flex flex-wrap -m-4">
+          <div className="xl:w-1/3 md:w-1/2 p-4">
+            <div className="border border-gray-800 p-6 rounded-lg">
+              <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4`}>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-6 h-6"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+                </svg>
+              </div>
+              <h2 className="text-lg text-white font-medium title-font mb-2">
+                Shooting Stars
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waist co, subway tile
+                poke farm.
+              </p>
+            </div>
+          </div>
+          <div className="xl:w-1/3 md:w-1/2 p-4">
+            <div className="border border-gray-800 p-6 rounded-lg">
+              <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4`}>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-6 h-6"
+                  viewBox="0 0 24 24"
+                >
+                  <circle cx="6" cy="6" r="3" />
+                  <circle cx="6" cy="18" r="3" />
+                  <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
+                </svg>
+              </div>
+              <h2 className="text-lg text-white font-medium title-font mb-2">
+                The Catalyzer
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waist co, subway tile
+                poke farm.
+              </p>
+            </div>
+          </div>
+          <div className="xl:w-1/3 md:w-1/2 p-4">
+            <div className="border border-gray-800 p-6 rounded-lg">
+              <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4`}>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-6 h-6"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                  <circle cx="12" cy="7" r="4" />
+                </svg>
+              </div>
+              <h2 className="text-lg text-white font-medium title-font mb-2">
+                Neptune
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waist co, subway tile
+                poke farm.
+              </p>
+            </div>
+          </div>
+          <div className="xl:w-1/3 md:w-1/2 p-4">
+            <div className="border border-gray-800 p-6 rounded-lg">
+              <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4`}>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-6 h-6"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7" />
+                </svg>
+              </div>
+              <h2 className="text-lg text-white font-medium title-font mb-2">
+                Melanchole
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waist co, subway tile
+                poke farm.
+              </p>
+            </div>
+          </div>
+          <div className="xl:w-1/3 md:w-1/2 p-4">
+            <div className="border border-gray-800 p-6 rounded-lg">
+              <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4`}>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-6 h-6"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
+                </svg>
+              </div>
+              <h2 className="text-lg text-white font-medium title-font mb-2">
+                Bunker
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waist co, subway tile
+                poke farm.
+              </p>
+            </div>
+          </div>
+          <div className="xl:w-1/3 md:w-1/2 p-4">
+            <div className="border border-gray-800 p-6 rounded-lg">
+              <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4`}>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-6 h-6"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+                </svg>
+              </div>
+              <h2 className="text-lg text-white font-medium title-font mb-2">
+                Ramona Falls
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waist co, subway tile
+                poke farm.
+              </p>
+            </div>
+          </div>
+        </div>
+        <button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+          Button
+        </button>
+      </div>
+    </section>
+  );
+}
+
+DarkContentC.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkContentC.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkContentC;

src/blocks/content/dark/d.js

@@ -0,0 +1,77 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkContentD(props) {
+  return (
+    <section className="text-gray-500 body-font bg-gray-900">
+      <div className="container flex flex-wrap px-5 py-24 mx-auto items-center">
+        <div className="md:w-1/2 md:pr-12 md:py-8 md:border-r md:border-b-0 md:mb-0 mb-10 pb-10 border-b border-gray-800">
+          <h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-white">
+            Pitchfork Kickstarter Taxidermy
+          </h1>
+          <p className="leading-relaxed text-base">
+            Locavore cardigan small batch roof party blue bottle blog meggings
+            sartorial jean shorts kickstarter migas sriracha church-key synth
+            succulents. Actually taiyaki neutra, distillery gastropub pok pok
+            ugh.
+          </p>
+          <a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
+            Learn More
+            <svg
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="w-4 h-4 ml-2"
+              viewBox="0 0 24 24"
+            >
+              <path d="M5 12h14M12 5l7 7-7 7" />
+            </svg>
+          </a>
+        </div>
+        <div className="flex flex-col md:w-1/2 md:pl-12">
+          <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+            CATEGORIES
+          </h2>
+          <nav className="flex flex-wrap list-none -mb-1">
+            <li className="lg:w-1/3 mb-1 w-1/2">
+              <a href className="hover:text-white">First Link</a>
+            </li>
+            <li className="lg:w-1/3 mb-1 w-1/2">
+              <a href className="hover:text-white">Second Link</a>
+            </li>
+            <li className="lg:w-1/3 mb-1 w-1/2">
+              <a href className="hover:text-white">Third Link</a>
+            </li>
+            <li className="lg:w-1/3 mb-1 w-1/2">
+              <a href className="hover:text-white">Fourth Link</a>
+            </li>
+            <li className="lg:w-1/3 mb-1 w-1/2">
+              <a href className="hover:text-white">Fifth Link</a>
+            </li>
+            <li className="lg:w-1/3 mb-1 w-1/2">
+              <a href className="hover:text-white">Sixth Link</a>
+            </li>
+            <li className="lg:w-1/3 mb-1 w-1/2">
+              <a href className="hover:text-white">Seventh Link</a>
+            </li>
+            <li className="lg:w-1/3 mb-1 w-1/2">
+              <a href className="hover:text-white">Eighth Link</a>
+            </li>
+          </nav>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkContentD.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkContentD.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkContentD;

src/blocks/content/dark/e.js

@@ -0,0 +1,51 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkContentE(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+        <h2 className="sm:text-3xl text-2xl text-white font-medium title-font mb-2 md:w-2/5">
+          Kickstarter Actually Pinterest Brunch Bitters Occupy
+        </h2>
+        <div className="md:w-3/5 md:pl-6">
+          <p className="leading-relaxed text-base">
+            Taxidermy bushwick celiac master cleanse microdosing seitan. Fashion
+            axe four dollar toast truffaut, direct trade kombucha brunch
+            williamsburg keffiyeh gastropub tousled squid meh taiyaki drinking
+            vinegar tacos.
+          </p>
+          <div className="flex md:mt-4 mt-6">
+            <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-1 px-4 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
+              Button
+            </button>
+            <a href className={`text-${props.theme}-500 inline-flex items-center ml-4`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkContentE.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkContentE.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkContentE;

src/blocks/content/dark/f.js

@@ -0,0 +1,85 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkContentF(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto flex flex-col">
+        <div className="lg:w-4/6 mx-auto">
+          <div className="rounded-lg h-64 overflow-hidden">
+            <img
+              alt="content"
+              className="object-cover object-center h-full w-full"
+              src="https://dummyimage.com/1200x500"
+            />
+          </div>
+          <div className="flex flex-col sm:flex-row mt-10">
+            <div className="sm:w-1/3 text-center sm:pr-8 sm:py-8">
+              <div className="w-20 h-20 rounded-full inline-flex items-center justify-center bg-gray-800 text-gray-600">
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-10 h-10"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                  <circle cx="12" cy="7" r="4" />
+                </svg>
+              </div>
+              <div className="flex flex-col items-center text-center justify-center">
+                <h2 className="font-medium title-font mt-4 text-white text-lg">
+                  Phoebe Caulfield
+                </h2>
+                <div className={`w-12 h-1 bg-${props.theme}-500 rounded mt-2 mb-4`}></div>
+                <p className="text-base text-gray-600">
+                  Raclette knausgaard hella meggs normcore williamsburg enamel
+                  pin sartorial venmo tbh hot chicken gentrify portland.
+                </p>
+              </div>
+            </div>
+            <div className="sm:w-2/3 sm:pl-8 sm:py-8 sm:border-l border-gray-800 sm:border-t-0 border-t mt-4 pt-4 sm:mt-0 text-center sm:text-left">
+              <p className="leading-relaxed text-lg mb-4">
+                Meggings portland fingerstache lyft, post-ironic fixie man bun
+                banh mi umami everyday carry hexagon locavore direct trade art
+                party. Locavore small batch listicle gastropub farm-to-table
+                lumbersexual salvia messenger bag. Coloring book flannel
+                truffaut craft beer drinking vinegar sartorial, disrupt fashion
+                axe normcore meh butcher. Portland 90&apos;s scenester
+                vexillologist forage post-ironic asymmetrical, chartreuse
+                disrupt butcher paleo intelligentsia pabst before they sold out
+                four loko. 3 wolf moon brooklyn.
+              </p>
+              <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkContentF.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkContentF.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkContentF;

src/blocks/content/dark/g.js

@@ -0,0 +1,61 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkContentG(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-wrap -mx-4 -mb-10 text-center">
+          <div className="sm:w-1/2 mb-10 px-4">
+            <div className="rounded-lg h-64 overflow-hidden">
+              <img
+                alt="content"
+                className="object-cover object-center h-full w-full"
+                src="https://dummyimage.com/1201x501"
+              />
+            </div>
+            <h2 className="title-font text-2xl font-medium text-white mt-6 mb-3">
+              Buy YouTube Videos
+            </h2>
+            <p className="leading-relaxed text-base">
+              Williamsburg occupy sustainable snackwave gochujang. Pinterest
+              cornhole brunch, slow-carb neutra irony.
+            </p>
+            <button className={`flex mx-auto mt-6 text-white bg-${props.theme}-500 border-0 py-2 px-5 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
+              Button
+            </button>
+          </div>
+          <div className="sm:w-1/2 mb-10 px-4">
+            <div className="rounded-lg h-64 overflow-hidden">
+              <img
+                alt="content"
+                className="object-cover object-center h-full w-full"
+                src="https://dummyimage.com/1202x502"
+              />
+            </div>
+            <h2 className="title-font text-2xl font-medium text-white mt-6 mb-3">
+              The Catalyzer
+            </h2>
+            <p className="leading-relaxed text-base">
+              Williamsburg occupy sustainable snackwave gochujang. Pinterest
+              cornhole brunch, slow-carb neutra irony.
+            </p>
+            <button className={`flex mx-auto mt-6 text-white bg-${props.theme}-500 border-0 py-2 px-5 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
+              Button
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkContentG.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkContentG.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkContentG;

src/blocks/content/dark/h.js

@@ -0,0 +1,131 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkContentH(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-col">
+          <div className="h-1 bg-gray-800 rounded overflow-hidden">
+            <div className={`w-24 h-full bg-${props.theme}-500`}></div>
+          </div>
+          <div className="flex flex-wrap sm:flex-row flex-col py-6 mb-12">
+            <h1 className="sm:w-2/5 text-white font-medium title-font text-2xl mb-2 sm:mb-0">
+              Space The Final Frontier
+            </h1>
+            <p className="sm:w-3/5 leading-relaxed text-base sm:pl-10 pl-0">
+              Street art subway tile salvia four dollar toast bitters selfies
+              quinoa yuccie synth meditation iPhone intelligentsia prism tofu.
+              Viral gochujang bitters dreamcatcher.
+            </p>
+          </div>
+        </div>
+        <div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
+          <div className="p-4 md:w-1/3 sm:mb-0 mb-6">
+            <div className="rounded-lg h-64 overflow-hidden">
+              <img
+                alt="content"
+                className="object-cover object-center h-full w-full"
+                src="https://dummyimage.com/1203x503"
+              />
+            </div>
+            <h2 className="text-xl font-medium title-font text-white mt-5">
+              Shooting Stars
+            </h2>
+            <p className="text-base leading-relaxed mt-2">
+              Swag shoindxgoitch literally meditation subway tile tumblr
+              cold-pressed. Gastropub street art beard dreamcatcher neutra,
+              ethical XOXO lumbersexual.
+            </p>
+            <a href className={`text-${props.theme}-500 inline-flex items-center mt-3`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+          <div className="p-4 md:w-1/3 sm:mb-0 mb-6">
+            <div className="rounded-lg h-64 overflow-hidden">
+              <img
+                alt="content"
+                className="object-cover object-center h-full w-full"
+                src="https://dummyimage.com/1204x504"
+              />
+            </div>
+            <h2 className="text-xl font-medium title-font text-white mt-5">
+              The Catalyzer
+            </h2>
+            <p className="text-base leading-relaxed mt-2">
+              Swag shoindxigoitch literally meditation subway tile tumblr
+              cold-pressed. Gastropub street art beard dreamcatcher neutra,
+              ethical XOXO lumbersexual.
+            </p>
+            <a href className={`text-${props.theme}-500 inline-flex items-center mt-3`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+          <div className="p-4 md:w-1/3 sm:mb-0 mb-6">
+            <div className="rounded-lg h-64 overflow-hidden">
+              <img
+                alt="content"
+                className="object-cover object-center h-full w-full"
+                src="https://dummyimage.com/1205x505"
+              />
+            </div>
+            <h2 className="text-xl font-medium title-font text-white mt-5">
+              The 400 Blows
+            </h2>
+            <p className="text-base leading-relaxed mt-2">
+              Swag shoindegoitch literally meditation subway tile tumblr
+              cold-pressed. Gastropub street art beard dreamcatcher neutra,
+              ethical XOXO lumbersexual.
+            </p>
+            <a href className={`text-${props.theme}-500 inline-flex items-center mt-3`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkContentH.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkContentH.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkContentH;

src/blocks/content/light/a.js

@@ -0,0 +1,132 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightContentA(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-col text-center w-full mb-20">
+          <h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
+            ROOF PARTY POLAROID
+          </h2>
+          <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
+            Master Cleanse Reliac Heirloom
+          </h1>
+          <p className="lg:w-2/3 mx-auto leading-relaxed text-base">
+            Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
+            gentrify, subway tile poke farm-to-table. Franzen you probably
+            haven&apos;t heard of them man bun deep jianbing selfies heirloom
+            prism food truck ugh squid celiac humblebrag.
+          </p>
+        </div>
+        <div className="flex flex-wrap">
+          <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200">
+            <h2 className="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2">
+              Shooting Stars
+            </h2>
+            <p className="leading-relaxed text-base mb-4">
+              Fingerstache flexitarian street art 8-bit waistcoat. Distillery
+              hexagon disrupt edison bulbche.
+            </p>
+            <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+          <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200">
+            <h2 className="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2">
+              The Catalyzer
+            </h2>
+            <p className="leading-relaxed text-base mb-4">
+              Fingerstache flexitarian street art 8-bit waistcoat. Distillery
+              hexagon disrupt edison bulbche.
+            </p>
+            <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+          <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200">
+            <h2 className="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2">
+              Neptune
+            </h2>
+            <p className="leading-relaxed text-base mb-4">
+              Fingerstache flexitarian street art 8-bit waistcoat. Distillery
+              hexagon disrupt edison bulbche.
+            </p>
+            <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+          <div className="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200">
+            <h2 className="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2">
+              Melanchole
+            </h2>
+            <p className="leading-relaxed text-base mb-4">
+              Fingerstache flexitarian street art 8-bit waistcoat. Distillery
+              hexagon disrupt edison bulbche.
+            </p>
+            <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+        </div>
+        <button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+          Button
+        </button>
+      </div>
+    </section>
+  );
+}
+
+LightContentA.defaultProps = {
+  theme: 'indigo'
+};
+
+LightContentA.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightContentA;

src/blocks/content/light/b.js

@@ -0,0 +1,113 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightContentB(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-wrap w-full mb-20">
+          <div className="lg:w-1/2 w-full mb-6 lg:mb-0">
+            <h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">
+              Pitchfork Kickstarter Taxidermy
+            </h1>
+            <div className={`h-1 w-20 bg-${props.theme}-500 rounded`}></div>
+          </div>
+          <p className="lg:w-1/2 w-full leading-relaxed text-base">
+            Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
+            gentrify, subway tile poke farm-to-table. Franzen you probably
+            haven&apos;t heard of them man bun deep jianbing selfies heirloom
+            prism food truck ugh squid celiac humblebrag.
+          </p>
+        </div>
+        <div className="flex flex-wrap -m-4">
+          <div className="xl:w-1/4 md:w-1/2 p-4">
+            <div className="bg-gray-100 p-6 rounded-lg">
+              <img
+                className="h-40 rounded w-full object-cover object-center mb-6"
+                src="https://dummyimage.com/720x400"
+                alt="content"
+              />
+              <h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
+                SUBTITLE
+              </h3>
+              <h2 className="text-lg text-gray-900 font-medium title-font mb-4">
+                Chichen Itza
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waistcoat. Distillery
+                hexagon disrupt edison bulbche.
+              </p>
+            </div>
+          </div>
+          <div className="xl:w-1/4 md:w-1/2 p-4">
+            <div className="bg-gray-100 p-6 rounded-lg">
+              <img
+                className="h-40 rounded w-full object-cover object-center mb-6"
+                src="https://dummyimage.com/721x401"
+                alt="content"
+              />
+              <h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
+                SUBTITLE
+              </h3>
+              <h2 className="text-lg text-gray-900 font-medium title-font mb-4">
+                Colosseum Roma
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waistcoat. Distillery
+                hexagon disrupt edison bulbche.
+              </p>
+            </div>
+          </div>
+          <div className="xl:w-1/4 md:w-1/2 p-4">
+            <div className="bg-gray-100 p-6 rounded-lg">
+              <img
+                className="h-40 rounded w-full object-cover object-center mb-6"
+                src="https://dummyimage.com/722x402"
+                alt="content"
+              />
+              <h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
+                SUBTITLE
+              </h3>
+              <h2 className="text-lg text-gray-900 font-medium title-font mb-4">
+                Great Pyramid of Giza
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waistcoat. Distillery
+                hexagon disrupt edison bulbche.
+              </p>
+            </div>
+          </div>
+          <div className="xl:w-1/4 md:w-1/2 p-4">
+            <div className="bg-gray-100 p-6 rounded-lg">
+              <img
+                className="h-40 rounded w-full object-cover object-center mb-6"
+                src="https://dummyimage.com/723x403"
+                alt="content"
+              />
+              <h3 className={`tracking-widest text-${props.theme}-500 text-xs font-medium title-font`}>
+                SUBTITLE
+              </h3>
+              <h2 className="text-lg text-gray-900 font-medium title-font mb-4">
+                San Francisco
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waistcoat. Distillery
+                hexagon disrupt edison bulbche.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightContentB.defaultProps = {
+  theme: 'indigo'
+};
+
+LightContentB.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightContentB;

src/blocks/content/light/c.js

@@ -0,0 +1,182 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightContentC(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-wrap w-full mb-20 flex-col items-center text-center">
+          <h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">
+            Pitchfork Kickstarter Taxidermy
+          </h1>
+          <p className="lg:w-1/2 w-full leading-relaxed text-base">
+            Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
+            gentrify, subway tile poke farm-to-table.
+          </p>
+        </div>
+        <div className="flex flex-wrap -m-4">
+          <div className="xl:w-1/3 md:w-1/2 p-4">
+            <div className="border border-gray-300 p-6 rounded-lg">
+              <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4`}>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-6 h-6"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+                </svg>
+              </div>
+              <h2 className="text-lg text-gray-900 font-medium title-font mb-2">
+                Shooting Stars
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waist co, subway tile
+                poke farm.
+              </p>
+            </div>
+          </div>
+          <div className="xl:w-1/3 md:w-1/2 p-4">
+            <div className="border border-gray-300 p-6 rounded-lg">
+              <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4`}>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-6 h-6"
+                  viewBox="0 0 24 24"
+                >
+                  <circle cx="6" cy="6" r="3" />
+                  <circle cx="6" cy="18" r="3" />
+                  <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
+                </svg>
+              </div>
+              <h2 className="text-lg text-gray-900 font-medium title-font mb-2">
+                The Catalyzer
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waist co, subway tile
+                poke farm.
+              </p>
+            </div>
+          </div>
+          <div className="xl:w-1/3 md:w-1/2 p-4">
+            <div className="border border-gray-300 p-6 rounded-lg">
+              <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4`}>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-6 h-6"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                  <circle cx="12" cy="7" r="4" />
+                </svg>
+              </div>
+              <h2 className="text-lg text-gray-900 font-medium title-font mb-2">
+                Neptune
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waist co, subway tile
+                poke farm.
+              </p>
+            </div>
+          </div>
+          <div className="xl:w-1/3 md:w-1/2 p-4">
+            <div className="border border-gray-300 p-6 rounded-lg">
+              <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4`}>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-6 h-6"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7" />
+                </svg>
+              </div>
+              <h2 className="text-lg text-gray-900 font-medium title-font mb-2">
+                Melanchole
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waist co, subway tile
+                poke farm.
+              </p>
+            </div>
+          </div>
+          <div className="xl:w-1/3 md:w-1/2 p-4">
+            <div className="border border-gray-300 p-6 rounded-lg">
+              <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4`}>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-6 h-6"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
+                </svg>
+              </div>
+              <h2 className="text-lg text-gray-900 font-medium title-font mb-2">
+                Bunker
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waist co, subway tile
+                poke farm.
+              </p>
+            </div>
+          </div>
+          <div className="xl:w-1/3 md:w-1/2 p-4">
+            <div className="border border-gray-300 p-6 rounded-lg">
+              <div className={`w-10 h-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4`}>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-6 h-6"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+                </svg>
+              </div>
+              <h2 className="text-lg text-gray-900 font-medium title-font mb-2">
+                Ramona Falls
+              </h2>
+              <p className="leading-relaxed text-base">
+                Fingerstache flexitarian street art 8-bit waist co, subway tile
+                poke farm.
+              </p>
+            </div>
+          </div>
+        </div>
+        <button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+          Button
+        </button>
+      </div>
+    </section>
+  );
+}
+
+LightContentC.defaultProps = {
+  theme: 'indigo'
+};
+
+LightContentC.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightContentC;

src/blocks/content/light/d.js

@@ -0,0 +1,77 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightContentD(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container flex flex-wrap px-5 py-24 mx-auto items-center">
+        <div className="md:w-1/2 md:pr-12 md:py-8 md:border-r md:border-b-0 mb-10 md:mb-0 pb-10 border-b border-gray-300">
+          <h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">
+            Pitchfork Kickstarter Taxidermy
+          </h1>
+          <p className="leading-relaxed text-base">
+            Locavore cardigan small batch roof party blue bottle blog meggings
+            sartorial jean shorts kickstarter migas sriracha church-key synth
+            succulents. Actually taiyaki neutra, distillery gastropub pok pok
+            ugh.
+          </p>
+          <a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
+            Learn More
+            <svg
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="w-4 h-4 ml-2"
+              viewBox="0 0 24 24"
+            >
+              <path d="M5 12h14M12 5l7 7-7 7" />
+            </svg>
+          </a>
+        </div>
+        <div className="flex flex-col md:w-1/2 md:pl-12">
+          <h2 className="title-font font-medium text-gray-800 tracking-widest text-sm mb-3">
+            CATEGORIES
+          </h2>
+          <nav className="flex flex-wrap list-none -mb-1">
+            <li className="lg:w-1/3 mb-1 w-1/2">
+              <a href className="text-gray-600 hover:text-gray-800">First Link</a>
+            </li>
+            <li className="lg:w-1/3 mb-1 w-1/2">
+              <a href className="text-gray-600 hover:text-gray-800">Second Link</a>
+            </li>
+            <li className="lg:w-1/3 mb-1 w-1/2">
+              <a href className="text-gray-600 hover:text-gray-800">Third Link</a>
+            </li>
+            <li className="lg:w-1/3 mb-1 w-1/2">
+              <a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
+            </li>
+            <li className="lg:w-1/3 mb-1 w-1/2">
+              <a href className="text-gray-600 hover:text-gray-800">Fifth Link</a>
+            </li>
+            <li className="lg:w-1/3 mb-1 w-1/2">
+              <a href className="text-gray-600 hover:text-gray-800">Sixth Link</a>
+            </li>
+            <li className="lg:w-1/3 mb-1 w-1/2">
+              <a href className="text-gray-600 hover:text-gray-800">Seventh Link</a>
+            </li>
+            <li className="lg:w-1/3 mb-1 w-1/2">
+              <a href className="text-gray-600 hover:text-gray-800">Eighth Link</a>
+            </li>
+          </nav>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightContentD.defaultProps = {
+  theme: 'indigo'
+};
+
+LightContentD.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightContentD;

src/blocks/content/light/e.js

@@ -0,0 +1,51 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightContentE(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+        <h2 className="sm:text-3xl text-2xl text-gray-900 font-medium title-font mb-2 md:w-2/5">
+          Kickstarter Actually Pinterest Brunch Bitters Occupy
+        </h2>
+        <div className="md:w-3/5 md:pl-6">
+          <p className="leading-relaxed text-base">
+            Taxidermy bushwick celiac master cleanse microdosing seitan. Fashion
+            axe four dollar toast truffaut, direct trade kombucha brunch
+            williamsburg keffiyeh gastropub tousled squid meh taiyaki drinking
+            vinegar tacos.
+          </p>
+          <div className="flex md:mt-4 mt-6">
+            <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-1 px-4 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
+              Button
+            </button>
+            <a href className={`text-${props.theme}-500 inline-flex items-center ml-4`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightContentE.defaultProps = {
+  theme: 'indigo'
+};
+
+LightContentE.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightContentE;

src/blocks/content/light/f.js

@@ -0,0 +1,85 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightContentF(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto flex flex-col">
+        <div className="lg:w-4/6 mx-auto">
+          <div className="rounded-lg h-64 overflow-hidden">
+            <img
+              alt="content"
+              className="object-cover object-center h-full w-full"
+              src="https://dummyimage.com/1200x500"
+            />
+          </div>
+          <div className="flex flex-col sm:flex-row mt-10">
+            <div className="sm:w-1/3 text-center sm:pr-8 sm:py-8">
+              <div className="w-20 h-20 rounded-full inline-flex items-center justify-center bg-gray-200 text-gray-400">
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-10 h-10"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                  <circle cx="12" cy="7" r="4" />
+                </svg>
+              </div>
+              <div className="flex flex-col items-center text-center justify-center">
+                <h2 className="font-medium title-font mt-4 text-gray-900 text-lg">
+                  Phoebe Caulfield
+                </h2>
+                <div className={`w-12 h-1 bg-${props.theme}-500 rounded mt-2 mb-4`}></div>
+                <p className="text-base text-gray-600">
+                  Raclette knausgaard hella meggs normcore williamsburg enamel
+                  pin sartorial venmo tbh hot chicken gentrify portland.
+                </p>
+              </div>
+            </div>
+            <div className="sm:w-2/3 sm:pl-8 sm:py-8 sm:border-l border-gray-300 sm:border-t-0 border-t mt-4 pt-4 sm:mt-0 text-center sm:text-left">
+              <p className="leading-relaxed text-lg mb-4">
+                Meggings portland fingerstache lyft, post-ironic fixie man bun
+                banh mi umami everyday carry hexagon locavore direct trade art
+                party. Locavore small batch listicle gastropub farm-to-table
+                lumbersexual salvia messenger bag. Coloring book flannel
+                truffaut craft beer drinking vinegar sartorial, disrupt fashion
+                axe normcore meh butcher. Portland 90&apos;s scenester
+                vexillologist forage post-ironic asymmetrical, chartreuse
+                disrupt butcher paleo intelligentsia pabst before they sold out
+                four loko. 3 wolf moon brooklyn.
+              </p>
+              <a href className={`text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightContentF.defaultProps = {
+  theme: 'indigo'
+};
+
+LightContentF.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightContentF;

src/blocks/content/light/g.js

@@ -0,0 +1,61 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightContentG(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-wrap -mx-4 -mb-10 text-center">
+          <div className="sm:w-1/2 mb-10 px-4">
+            <div className="rounded-lg h-64 overflow-hidden">
+              <img
+                alt="content"
+                className="object-cover object-center h-full w-full"
+                src="https://dummyimage.com/1201x501"
+              />
+            </div>
+            <h2 className="title-font text-2xl font-medium text-gray-900 mt-6 mb-3">
+              Buy YouTube Videos
+            </h2>
+            <p className="leading-relaxed text-base">
+              Williamsburg occupy sustainable snackwave gochujang. Pinterest
+              cornhole brunch, slow-carb neutra irony.
+            </p>
+            <button className={`flex mx-auto mt-6 text-white bg-${props.theme}-500 border-0 py-2 px-5 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
+              Button
+            </button>
+          </div>
+          <div className="sm:w-1/2 mb-10 px-4">
+            <div className="rounded-lg h-64 overflow-hidden">
+              <img
+                alt="content"
+                className="object-cover object-center h-full w-full"
+                src="https://dummyimage.com/1202x502"
+              />
+            </div>
+            <h2 className="title-font text-2xl font-medium text-gray-900 mt-6 mb-3">
+              The Catalyzer
+            </h2>
+            <p className="leading-relaxed text-base">
+              Williamsburg occupy sustainable snackwave gochujang. Pinterest
+              cornhole brunch, slow-carb neutra irony.
+            </p>
+            <button className={`flex mx-auto mt-6 text-white bg-${props.theme}-500 border-0 py-2 px-5 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
+              Button
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightContentG.defaultProps = {
+  theme: 'indigo'
+};
+
+LightContentG.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightContentG;

src/blocks/content/light/h.js

@@ -0,0 +1,131 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightContentH(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-col">
+          <div className="h-1 bg-gray-200 rounded overflow-hidden">
+            <div className={`w-24 h-full bg-${props.theme}-500`}></div>
+          </div>
+          <div className="flex flex-wrap sm:flex-row flex-col py-6 mb-12">
+            <h1 className="sm:w-2/5 text-gray-900 font-medium title-font text-2xl mb-2 sm:mb-0">
+              Space The Final Frontier
+            </h1>
+            <p className="sm:w-3/5 leading-relaxed text-base sm:pl-10 pl-0">
+              Street art subway tile salvia four dollar toast bitters selfies
+              quinoa yuccie synth meditation iPhone intelligentsia prism tofu.
+              Viral gochujang bitters dreamcatcher.
+            </p>
+          </div>
+        </div>
+        <div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
+          <div className="p-4 md:w-1/3 sm:mb-0 mb-6">
+            <div className="rounded-lg h-64 overflow-hidden">
+              <img
+                alt="content"
+                className="object-cover object-center h-full w-full"
+                src="https://dummyimage.com/1203x503"
+              />
+            </div>
+            <h2 className="text-xl font-medium title-font text-gray-900 mt-5">
+              Shooting Stars
+            </h2>
+            <p className="text-base leading-relaxed mt-2">
+              Swag shoivdigoitch literally meditation subway tile tumblr
+              cold-pressed. Gastropub street art beard dreamcatcher neutra,
+              ethical XOXO lumbersexual.
+            </p>
+            <a href className={`text-${props.theme}-500 inline-flex items-center mt-3`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+          <div className="p-4 md:w-1/3 sm:mb-0 mb-6">
+            <div className="rounded-lg h-64 overflow-hidden">
+              <img
+                alt="content"
+                className="object-cover object-center h-full w-full"
+                src="https://dummyimage.com/1204x504"
+              />
+            </div>
+            <h2 className="text-xl font-medium title-font text-gray-900 mt-5">
+              The Catalyzer
+            </h2>
+            <p className="text-base leading-relaxed mt-2">
+              Swag shoivdigoitch literally meditation subway tile tumblr
+              cold-pressed. Gastropub street art beard dreamcatcher neutra,
+              ethical XOXO lumbersexual.
+            </p>
+            <a href className={`text-${props.theme}-500 inline-flex items-center mt-3`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+          <div className="p-4 md:w-1/3 sm:mb-0 mb-6">
+            <div className="rounded-lg h-64 overflow-hidden">
+              <img
+                alt="content"
+                className="object-cover object-center h-full w-full"
+                src="https://dummyimage.com/1205x505"
+              />
+            </div>
+            <h2 className="text-xl font-medium title-font text-gray-900 mt-5">
+              The 400 Blows
+            </h2>
+            <p className="text-base leading-relaxed mt-2">
+              Swag shoivdigoitch literally meditation subway tile tumblr
+              cold-pressed. Gastropub street art beard dreamcatcher neutra,
+              ethical XOXO lumbersexual.
+            </p>
+            <a href className={`text-${props.theme}-500 inline-flex items-center mt-3`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightContentH.defaultProps = {
+  theme: 'indigo'
+};
+
+LightContentH.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightContentH;

src/blocks/cta/dark/a.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkCTAA(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
+          <h1 className="flex-grow sm:pr-16 text-2xl font-medium title-font text-white">
+            Slow-carb next level shoinddgoitch ethical authentic, scenester
+            sriracha forage.
+          </h1>
+          <button className={`flex-shrink-0 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg mt-10 sm:mt-0`}>
+            Button
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkCTAA.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkCTAA.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkCTAA;

src/blocks/cta/dark/b.js

@@ -0,0 +1,51 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkCTAB(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto flex flex-wrap items-center">
+        <div className="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
+          <h1 className="title-font font-medium text-3xl text-white">
+            Slow-carb next level shoindxgoitch ethical authentic, poko scenester
+          </h1>
+          <p className="leading-relaxed mt-4">
+            Poke slow-carb mixtape knausgaard, typewriter street art gentrify
+            hammock starladder roathse. Craies vegan tousled etsy austin.
+          </p>
+        </div>
+        <div className="lg:w-2/6 md:w-1/2 bg-gray-800 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
+          <h2 className="text-white text-lg font-medium title-font mb-5">
+            Sign Up
+          </h2>
+          <input
+            className={`bg-gray-900 rounded border text-white border-gray-900 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
+            placeholder="Full Name"
+            type="text"
+          ></input>
+          <input
+            className={`bg-gray-900 rounded border text-white border-gray-900 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
+            placeholder="Email"
+            type="email"
+          ></input>
+          <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+            Button
+          </button>
+          <p className="text-xs text-gray-600 mt-3">
+            Literally you probably haven&apos;t heard of them jean shorts.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkCTAB.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkCTAB.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkCTAB;

src/blocks/cta/dark/c.js

@@ -0,0 +1,46 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkCTAC(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-col text-center w-full mb-12">
+          <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
+            Master Cleanse Reliac Heirloom
+          </h1>
+          <p className="lg:w-2/3 mx-auto leading-relaxed text-base">
+            Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
+            gentrify, subway tile poke farm-to-table. Franzen you probably
+            haven&apos;t heard of them man bun deep.
+          </p>
+        </div>
+        <div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0">
+          <input
+            className={`flex-grow w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0`}
+            placeholder="Full Name"
+            type="text"
+          ></input>
+          <input
+            className={`flex-grow w-full bg-gray-800 rounded border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0`}
+            placeholder="Email"
+            type="email"
+          ></input>
+          <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+            Button
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkCTAC.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkCTAC.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkCTAC;

src/blocks/cta/dark/d.js

@@ -0,0 +1,62 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkCTAD(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto flex items-center md:flex-row flex-col">
+        <div className="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center">
+          <h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
+            ROOF PARTY POLAROID
+          </h2>
+          <h1 className="md:text-3xl text-2xl font-medium title-font text-white">
+            Master Cleanse Reliac Heirloom
+          </h1>
+        </div>
+        <div className="flex md:ml-auto md:mr-0 mx-auto items-center flex-shrink-0">
+          <button className="bg-gray-800 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-700 focus:outline-none">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              className="w-6 h-6"
+              viewBox="0 0 512 512"
+            >
+              <path d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z" />
+            </svg>
+            <span className="ml-4 flex items-start flex-col leading-none">
+              <span className="text-xs text-gray-500 mb-1">GET IT ON</span>
+              <span className="title-font font-medium">Google Play</span>
+            </span>
+          </button>
+          <button className="bg-gray-800 inline-flex py-3 px-5 rounded-lg items-center ml-4 hover:bg-gray-700 focus:outline-none">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              className="w-6 h-6"
+              viewBox="0 0 305 305"
+            >
+              <path d="M40.74 112.12c-25.79 44.74-9.4 112.65 19.12 153.82C74.09 286.52 88.5 305 108.24 305c.37 0 .74 0 1.13-.02 9.27-.37 15.97-3.23 22.45-5.99 7.27-3.1 14.8-6.3 26.6-6.3 11.22 0 18.39 3.1 25.31 6.1 6.83 2.95 13.87 6 24.26 5.81 22.23-.41 35.88-20.35 47.92-37.94a168.18 168.18 0 0021-43l.09-.28a2.5 2.5 0 00-1.33-3.06l-.18-.08c-3.92-1.6-38.26-16.84-38.62-58.36-.34-33.74 25.76-51.6 31-54.84l.24-.15a2.5 2.5 0 00.7-3.51c-18-26.37-45.62-30.34-56.73-30.82a50.04 50.04 0 00-4.95-.24c-13.06 0-25.56 4.93-35.61 8.9-6.94 2.73-12.93 5.09-17.06 5.09-4.64 0-10.67-2.4-17.65-5.16-9.33-3.7-19.9-7.9-31.1-7.9l-.79.01c-26.03.38-50.62 15.27-64.18 38.86z" />
+              <path d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z" />
+            </svg>
+            <span className="ml-4 flex items-start flex-col leading-none">
+              <span className="text-xs text-gray-500 mb-1">
+                Download on the
+              </span>
+              <span className="title-font font-medium">App Store</span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkCTAD.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkCTAD.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkCTAD;

src/blocks/cta/light/a.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightCTAA(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
+          <h1 className="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">
+            Slow-carb next level shoindxgoitch ethical authentic, scenester
+            sriracha forage.
+          </h1>
+          <button className={`flex-shrink-0 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg mt-10 sm:mt-0`}>
+            Button
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightCTAA.defaultProps = {
+  theme: 'indigo'
+};
+
+LightCTAA.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightCTAA;

src/blocks/cta/light/b.js

@@ -0,0 +1,51 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightCTAB(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto flex flex-wrap items-center">
+        <div className="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
+          <h1 className="title-font font-medium text-3xl text-gray-900">
+            Slow-carb next level shoindcgoitch ethical authentic, poko scenester
+          </h1>
+          <p className="leading-relaxed mt-4">
+            Poke slow-carb mixtape knausgaard, typewriter street art gentrify
+            hammock starladder roathse. Craies vegan tousled etsy austin.
+          </p>
+        </div>
+        <div className="lg:w-2/6 md:w-1/2 bg-gray-200 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
+          <h2 className="text-gray-900 text-lg font-medium title-font mb-5">
+            Sign Up
+          </h2>
+          <input
+            className={`bg-white rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
+            placeholder="Full Name"
+            type="text"
+          ></input>
+          <input
+            className={`bg-white rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mb-4`}
+            placeholder="Email"
+            type="email"
+          ></input>
+          <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+            Button
+          </button>
+          <p className="text-xs text-gray-500 mt-3">
+            Literally you probably haven&apos;t heard of them jean shorts.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightCTAB.defaultProps = {
+  theme: 'indigo'
+};
+
+LightCTAB.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightCTAB;

src/blocks/cta/light/c.js

@@ -0,0 +1,46 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightCTAC(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-col text-center w-full mb-12">
+          <h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
+            Master Cleanse Reliac Heirloom
+          </h1>
+          <p className="lg:w-2/3 mx-auto leading-relaxed text-base">
+            Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
+            gentrify, subway tile poke farm-to-table. Franzen you probably
+            haven&apos;t heard of them man bun deep.
+          </p>
+        </div>
+        <div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0">
+          <input
+            className={`flex-grow w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0`}
+            placeholder="Full Name"
+            type="text"
+          ></input>
+          <input
+            className={`flex-grow w-full bg-gray-100 rounded border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0`}
+            placeholder="Email"
+            type="email"
+          ></input>
+          <button className={`text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+            Button
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightCTAC.defaultProps = {
+  theme: 'indigo'
+};
+
+LightCTAC.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightCTAC;

src/blocks/cta/light/d.js

@@ -0,0 +1,62 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightCTAD(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto flex items-center md:flex-row flex-col">
+        <div className="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center">
+          <h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
+            ROOF PARTY POLAROID
+          </h2>
+          <h1 className="md:text-3xl text-2xl font-medium title-font text-gray-900">
+            Master Cleanse Reliac Heirloom
+          </h1>
+        </div>
+        <div className="flex md:ml-auto md:mr-0 mx-auto items-center flex-shrink-0">
+          <button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-300 focus:outline-none">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              className="w-6 h-6"
+              viewBox="0 0 512 512"
+            >
+              <path d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z" />
+            </svg>
+            <span className="ml-4 flex items-start flex-col leading-none">
+              <span className="text-xs text-gray-600 mb-1">GET IT ON</span>
+              <span className="title-font font-medium">Google Play</span>
+            </span>
+          </button>
+          <button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center ml-4 hover:bg-gray-300 focus:outline-none">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              className="w-6 h-6"
+              viewBox="0 0 305 305"
+            >
+              <path d="M40.74 112.12c-25.79 44.74-9.4 112.65 19.12 153.82C74.09 286.52 88.5 305 108.24 305c.37 0 .74 0 1.13-.02 9.27-.37 15.97-3.23 22.45-5.99 7.27-3.1 14.8-6.3 26.6-6.3 11.22 0 18.39 3.1 25.31 6.1 6.83 2.95 13.87 6 24.26 5.81 22.23-.41 35.88-20.35 47.92-37.94a168.18 168.18 0 0021-43l.09-.28a2.5 2.5 0 00-1.33-3.06l-.18-.08c-3.92-1.6-38.26-16.84-38.62-58.36-.34-33.74 25.76-51.6 31-54.84l.24-.15a2.5 2.5 0 00.7-3.51c-18-26.37-45.62-30.34-56.73-30.82a50.04 50.04 0 00-4.95-.24c-13.06 0-25.56 4.93-35.61 8.9-6.94 2.73-12.93 5.09-17.06 5.09-4.64 0-10.67-2.4-17.65-5.16-9.33-3.7-19.9-7.9-31.1-7.9l-.79.01c-26.03.38-50.62 15.27-64.18 38.86z" />
+              <path d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z" />
+            </svg>
+            <span className="ml-4 flex items-start flex-col leading-none">
+              <span className="text-xs text-gray-600 mb-1">
+                Download on the
+              </span>
+              <span className="title-font font-medium">App Store</span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightCTAD.defaultProps = {
+  theme: 'indigo'
+};
+
+LightCTAD.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightCTAD;

src/blocks/ecommerce/dark/a.js

@@ -0,0 +1,158 @@
+import React from "react";
+
+function DarkEcommerceA() {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-wrap -m-4">
+          <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
+            <a href className="block relative h-48 rounded overflow-hidden">
+              <img
+                alt="ecommerce"
+                className="object-cover object-center w-full h-full block"
+                src="https://dummyimage.com/420x260"
+              />
+            </a>
+            <div className="mt-4">
+              <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
+                CATEGORY
+              </h3>
+              <h2 className="text-white title-font text-lg font-medium">
+                The Catalyzer
+              </h2>
+              <p className="mt-1">$16.00</p>
+            </div>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
+            <a href className="block relative h-48 rounded overflow-hidden">
+              <img
+                alt="ecommerce"
+                className="object-cover object-center w-full h-full block"
+                src="https://dummyimage.com/421x261"
+              />
+            </a>
+            <div className="mt-4">
+              <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
+                CATEGORY
+              </h3>
+              <h2 className="text-white title-font text-lg font-medium">
+                Shooting Stars
+              </h2>
+              <p className="mt-1">$21.15</p>
+            </div>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
+            <a href className="block relative h-48 rounded overflow-hidden">
+              <img
+                alt="ecommerce"
+                className="object-cover object-center w-full h-full block"
+                src="https://dummyimage.com/422x262"
+              />
+            </a>
+            <div className="mt-4">
+              <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
+                CATEGORY
+              </h3>
+              <h2 className="text-white title-font text-lg font-medium">
+                Neptune
+              </h2>
+              <p className="mt-1">$12.00</p>
+            </div>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
+            <a href className="block relative h-48 rounded overflow-hidden">
+              <img
+                alt="ecommerce"
+                className="object-cover object-center w-full h-full block"
+                src="https://dummyimage.com/423x263"
+              />
+            </a>
+            <div className="mt-4">
+              <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
+                CATEGORY
+              </h3>
+              <h2 className="text-white title-font text-lg font-medium">
+                The 400 Blows
+              </h2>
+              <p className="mt-1">$18.40</p>
+            </div>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
+            <a href className="block relative h-48 rounded overflow-hidden">
+              <img
+                alt="ecommerce"
+                className="object-cover object-center w-full h-full block"
+                src="https://dummyimage.com/424x264"
+              />
+            </a>
+            <div className="mt-4">
+              <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
+                CATEGORY
+              </h3>
+              <h2 className="text-white title-font text-lg font-medium">
+                The Catalyzer
+              </h2>
+              <p className="mt-1">$16.00</p>
+            </div>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
+            <a href className="block relative h-48 rounded overflow-hidden">
+              <img
+                alt="ecommerce"
+                className="object-cover object-center w-full h-full block"
+                src="https://dummyimage.com/425x265"
+              />
+            </a>
+            <div className="mt-4">
+              <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
+                CATEGORY
+              </h3>
+              <h2 className="text-white title-font text-lg font-medium">
+                Shooting Stars
+              </h2>
+              <p className="mt-1">$21.15</p>
+            </div>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
+            <a href className="block relative h-48 rounded overflow-hidden">
+              <img
+                alt="ecommerce"
+                className="object-cover object-center w-full h-full block"
+                src="https://dummyimage.com/427x267"
+              />
+            </a>
+            <div className="mt-4">
+              <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
+                CATEGORY
+              </h3>
+              <h2 className="text-white title-font text-lg font-medium">
+                Neptune
+              </h2>
+              <p className="mt-1">$12.00</p>
+            </div>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
+            <a href className="block relative h-48 rounded overflow-hidden">
+              <img
+                alt="ecommerce"
+                className="object-cover object-center w-full h-full block"
+                src="https://dummyimage.com/428x268"
+              />
+            </a>
+            <div className="mt-4">
+              <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
+                CATEGORY
+              </h3>
+              <h2 className="text-white title-font text-lg font-medium">
+                The 400 Blows
+              </h2>
+              <p className="mt-1">$18.40</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default DarkEcommerceA;

src/blocks/ecommerce/dark/b.js

@@ -0,0 +1,194 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkEcommerceB(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font overflow-hidden">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="lg:w-4/5 mx-auto flex flex-wrap">
+          <img
+            alt="ecommerce"
+            className="lg:w-1/2 w-full lg:h-auto h-64 object-cover object-center rounded"
+            src="https://dummyimage.com/400x400"
+          />
+          <div className="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
+            <h2 className="text-sm title-font text-gray-600 tracking-widest">
+              BRAND NAME
+            </h2>
+            <h1 className="text-white text-3xl title-font font-medium mb-1">
+              The Catcher in the Rye
+            </h1>
+            <div className="flex mb-4">
+              <span className="flex items-center">
+                <svg
+                  fill="currentColor"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className={`w-4 h-4 text-${props.theme}-500`}
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                </svg>
+                <svg
+                  fill="currentColor"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className={`w-4 h-4 text-${props.theme}-500`}
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                </svg>
+                <svg
+                  fill="currentColor"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className={`w-4 h-4 text-${props.theme}-500`}
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                </svg>
+                <svg
+                  fill="currentColor"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className={`w-4 h-4 text-${props.theme}-500`}
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                </svg>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className={`w-4 h-4 text-${props.theme}-500`}
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                </svg>
+                <span className="text-gray-500 ml-3">4 Reviews</span>
+              </span>
+              <span className="flex ml-3 pl-3 py-2 border-l-2 border-gray-800 text-gray-600">
+                <a href>
+                  <svg
+                    fill="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
+                  </svg>
+                </a>
+                <a href className="ml-2">
+                  <svg
+                    fill="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
+                  </svg>
+                </a>
+                <a href className="ml-2">
+                  <svg
+                    fill="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                  </svg>
+                </a>
+              </span>
+            </div>
+            <p className="leading-relaxed">
+              Fam locavore kickstarter distillery. Mixtape chillwave tumeric
+              sriracha taximy chia microdosing tilde DIY. XOXO fam ${props.theme}
+              juiceramps cornhole raw denim forage brooklyn. Everyday carry +1
+              seitan poutine tumeric. Gastropub blue bottle austin listicle
+              pour-over, neutra jean shorts keytar banjo tattooed umami
+              cardigan.
+            </p>
+            <div className="flex mt-6 items-center pb-5 border-b-2 border-gray-800 mb-5">
+              <div className="flex">
+                <span className="mr-3">Color</span>
+                <button className="border-2 border-gray-800 rounded-full w-6 h-6 focus:outline-none"></button>
+                <button className="border-2 border-gray-800 ml-1 bg-gray-700 rounded-full w-6 h-6 focus:outline-none"></button>
+                <button className={`border-2 border-gray-800 ml-1 bg-${props.theme}-500 rounded-full w-6 h-6 focus:outline-none`}></button>
+              </div>
+              <div className="flex ml-6 items-center">
+                <span className="mr-3">Size</span>
+                <div className="relative">
+                  <select className={`rounded border border-gray-700 bg-gray-800 appearance-none py-2 focus:outline-none focus:border-${props.theme}-500 text-white pl-3 pr-10`}>
+                    <option>SM</option>
+                    <option>M</option>
+                    <option>L</option>
+                    <option>XL</option>
+                  </select>
+                  <span className="absolute right-0 top-0 h-full w-10 text-center text-gray-600 pointer-events-none flex items-center justify-center">
+                    <svg
+                      fill="none"
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      className="w-4 h-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M6 9l6 6 6-6" />
+                    </svg>
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div className="flex">
+              <span className="title-font font-medium text-2xl text-white">
+                $58.00
+              </span>
+              <button className={`flex ml-auto text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
+                Button
+              </button>
+              <button className="rounded-full w-10 h-10 bg-gray-800 p-0 border-0 inline-flex items-center justify-center text-gray-600 ml-4">
+                <svg
+                  fill="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-5 h-5"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkEcommerceB.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkEcommerceB.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkEcommerceB;

src/blocks/ecommerce/dark/c.js

@@ -0,0 +1,86 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkEcommerceC(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font overflow-hidden">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="lg:w-4/5 mx-auto flex flex-wrap">
+          <div className="lg:w-1/2 w-full lg:pr-10 lg:py-6 mb-6 lg:mb-0">
+            <h2 className="text-sm title-font text-gray-600 tracking-widest">
+              BRAND NAME
+            </h2>
+            <h1 className="text-white text-3xl title-font font-medium mb-4">
+              Animated Night Hill Illustrations
+            </h1>
+            <div className="flex mb-4">
+              <a href className={`flex-grow text-${props.theme}-500 border-b-2 border-${props.theme}-500 py-2 text-lg px-1`}>
+                Description
+              </a>
+              <a href className="flex-grow border-b-2 border-gray-800 py-2 text-lg px-1">
+                Reviews
+              </a>
+              <a href className="flex-grow border-b-2 border-gray-800 py-2 text-lg px-1">
+                Details
+              </a>
+            </div>
+            <p className="leading-relaxed mb-4">
+              Fam locavore kickstarter distillery. Mixtape chillwave tumeric
+              sriracha taximy chia microdosing tilde DIY. XOXO fam iligo
+              juiceramps cornhole raw denim forage brooklyn. Everyday carry +1
+              seitan poutine tumeric. Gastropub blue bottle austin listicle
+              pour-over, neutra jean.
+            </p>
+            <div className="flex border-t border-gray-800 py-2">
+              <span className="text-gray-500">Color</span>
+              <span className="ml-auto text-white">Blue</span>
+            </div>
+            <div className="flex border-t border-gray-800 py-2">
+              <span className="text-gray-500">Size</span>
+              <span className="ml-auto text-white">Medium</span>
+            </div>
+            <div className="flex border-t border-b mb-6 border-gray-800 py-2">
+              <span className="text-gray-500">Quantity</span>
+              <span className="ml-auto text-white">4</span>
+            </div>
+            <div className="flex">
+              <span className="title-font font-medium text-2xl text-white">
+                $58.00
+              </span>
+              <button className={`flex ml-auto text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
+                Button
+              </button>
+              <button className="rounded-full w-10 h-10 bg-gray-800 p-0 border-0 inline-flex items-center justify-center text-gray-600 ml-4">
+                <svg
+                  fill="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-5 h-5"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <img
+            alt="ecommerce"
+            className="lg:w-1/2 w-full lg:h-auto h-64 object-cover object-center rounded"
+            src="https://dummyimage.com/400x400"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkEcommerceC.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkEcommerceC.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkEcommerceC;

src/blocks/ecommerce/light/a.js

@@ -0,0 +1,158 @@
+import React from "react";
+
+function LightEcommerceA() {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-wrap -m-4">
+          <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
+            <a href className="block relative h-48 rounded overflow-hidden">
+              <img
+                alt="ecommerce"
+                className="object-cover object-center w-full h-full block"
+                src="https://dummyimage.com/420x260"
+              />
+            </a>
+            <div className="mt-4">
+              <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
+                CATEGORY
+              </h3>
+              <h2 className="text-gray-900 title-font text-lg font-medium">
+                The Catalyzer
+              </h2>
+              <p className="mt-1">$16.00</p>
+            </div>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
+            <a href className="block relative h-48 rounded overflow-hidden">
+              <img
+                alt="ecommerce"
+                className="object-cover object-center w-full h-full block"
+                src="https://dummyimage.com/421x261"
+              />
+            </a>
+            <div className="mt-4">
+              <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
+                CATEGORY
+              </h3>
+              <h2 className="text-gray-900 title-font text-lg font-medium">
+                Shooting Stars
+              </h2>
+              <p className="mt-1">$21.15</p>
+            </div>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
+            <a href className="block relative h-48 rounded overflow-hidden">
+              <img
+                alt="ecommerce"
+                className="object-cover object-center w-full h-full block"
+                src="https://dummyimage.com/422x262"
+              />
+            </a>
+            <div className="mt-4">
+              <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
+                CATEGORY
+              </h3>
+              <h2 className="text-gray-900 title-font text-lg font-medium">
+                Neptune
+              </h2>
+              <p className="mt-1">$12.00</p>
+            </div>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
+            <a href className="block relative h-48 rounded overflow-hidden">
+              <img
+                alt="ecommerce"
+                className="object-cover object-center w-full h-full block"
+                src="https://dummyimage.com/423x263"
+              />
+            </a>
+            <div className="mt-4">
+              <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
+                CATEGORY
+              </h3>
+              <h2 className="text-gray-900 title-font text-lg font-medium">
+                The 400 Blows
+              </h2>
+              <p className="mt-1">$18.40</p>
+            </div>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
+            <a href className="block relative h-48 rounded overflow-hidden">
+              <img
+                alt="ecommerce"
+                className="object-cover object-center w-full h-full block"
+                src="https://dummyimage.com/424x264"
+              />
+            </a>
+            <div className="mt-4">
+              <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
+                CATEGORY
+              </h3>
+              <h2 className="text-gray-900 title-font text-lg font-medium">
+                The Catalyzer
+              </h2>
+              <p className="mt-1">$16.00</p>
+            </div>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
+            <a href className="block relative h-48 rounded overflow-hidden">
+              <img
+                alt="ecommerce"
+                className="object-cover object-center w-full h-full block"
+                src="https://dummyimage.com/425x265"
+              />
+            </a>
+            <div className="mt-4">
+              <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
+                CATEGORY
+              </h3>
+              <h2 className="text-gray-900 title-font text-lg font-medium">
+                Shooting Stars
+              </h2>
+              <p className="mt-1">$21.15</p>
+            </div>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
+            <a href className="block relative h-48 rounded overflow-hidden">
+              <img
+                alt="ecommerce"
+                className="object-cover object-center w-full h-full block"
+                src="https://dummyimage.com/427x267"
+               />
+            </a>
+            <div className="mt-4">
+              <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
+                CATEGORY
+              </h3>
+              <h2 className="text-gray-900 title-font text-lg font-medium">
+                Neptune
+              </h2>
+              <p className="mt-1">$12.00</p>
+            </div>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 p-4 w-full">
+            <a href className="block relative h-48 rounded overflow-hidden">
+              <img
+                alt="ecommerce"
+                className="object-cover object-center w-full h-full block"
+                src="https://dummyimage.com/428x268"
+              />
+            </a>
+            <div className="mt-4">
+              <h3 className="text-gray-500 text-xs tracking-widest title-font mb-1">
+                CATEGORY
+              </h3>
+              <h2 className="text-gray-900 title-font text-lg font-medium">
+                The 400 Blows
+              </h2>
+              <p className="mt-1">$18.40</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default LightEcommerceA;

src/blocks/ecommerce/light/b.js

@@ -0,0 +1,194 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightEcommerceB(props) {
+  return (
+    <section className="text-gray-700 body-font overflow-hidden">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="lg:w-4/5 mx-auto flex flex-wrap">
+          <img
+            alt="ecommerce"
+            className="lg:w-1/2 w-full lg:h-auto h-64 object-cover object-center rounded"
+            src="https://dummyimage.com/400x400"
+          />
+          <div className="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
+            <h2 className="text-sm title-font text-gray-500 tracking-widest">
+              BRAND NAME
+            </h2>
+            <h1 className="text-gray-900 text-3xl title-font font-medium mb-1">
+              The Catcher in the Rye
+            </h1>
+            <div className="flex mb-4">
+              <span className="flex items-center">
+                <svg
+                  fill="currentColor"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className={`w-4 h-4 text-${props.theme}-500`}
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                </svg>
+                <svg
+                  fill="currentColor"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className={`w-4 h-4 text-${props.theme}-500`}
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                </svg>
+                <svg
+                  fill="currentColor"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className={`w-4 h-4 text-${props.theme}-500`}
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                </svg>
+                <svg
+                  fill="currentColor"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className={`w-4 h-4 text-${props.theme}-500`}
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                </svg>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className={`w-4 h-4 text-${props.theme}-500`}
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                </svg>
+                <span className="text-gray-600 ml-3">4 Reviews</span>
+              </span>
+              <span className="flex ml-3 pl-3 py-2 border-l-2 border-gray-200">
+                <a href className="text-gray-500">
+                  <svg
+                    fill="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
+                  </svg>
+                </a>
+                <a href className="ml-2 text-gray-500">
+                  <svg
+                    fill="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
+                  </svg>
+                </a>
+                <a href className="ml-2 text-gray-500">
+                  <svg
+                    fill="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                  </svg>
+                </a>
+              </span>
+            </div>
+            <p className="leading-relaxed">
+              Fam locavore kickstarter distillery. Mixtape chillwave tumeric
+              sriracha taximy chia microdosing tilde DIY. XOXO fam indxgo
+              juiceramps cornhole raw denim forage brooklyn. Everyday carry +1
+              seitan poutine tumeric. Gastropub blue bottle austin listicle
+              pour-over, neutra jean shorts keytar banjo tattooed umami
+              cardigan.
+            </p>
+            <div className="flex mt-6 items-center pb-5 border-b-2 border-gray-200 mb-5">
+              <div className="flex">
+                <span className="mr-3">Color</span>
+                <button className="border-2 border-gray-300 rounded-full w-6 h-6 focus:outline-none"></button>
+                <button className="border-2 border-gray-300 ml-1 bg-gray-700 rounded-full w-6 h-6 focus:outline-none"></button>
+                <button className={`border-2 border-gray-300 ml-1 bg-${props.theme}-500 rounded-full w-6 h-6 focus:outline-none`}></button>
+              </div>
+              <div className="flex ml-6 items-center">
+                <span className="mr-3">Size</span>
+                <div className="relative">
+                  <select className={`rounded border appearance-none border-gray-400 py-2 focus:outline-none focus:border-${props.theme}-500 text-base pl-3 pr-10`}>
+                    <option>SM</option>
+                    <option>M</option>
+                    <option>L</option>
+                    <option>XL</option>
+                  </select>
+                  <span className="absolute right-0 top-0 h-full w-10 text-center text-gray-600 pointer-events-none flex items-center justify-center">
+                    <svg
+                      fill="none"
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      className="w-4 h-4"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M6 9l6 6 6-6" />
+                    </svg>
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div className="flex">
+              <span className="title-font font-medium text-2xl text-gray-900">
+                $58.00
+              </span>
+              <button className={`flex ml-auto text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
+                Button
+              </button>
+              <button className="rounded-full w-10 h-10 bg-gray-200 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4">
+                <svg
+                  fill="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-5 h-5"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightEcommerceB.defaultProps = {
+  theme: 'indigo'
+};
+
+LightEcommerceB.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightEcommerceB;

src/blocks/ecommerce/light/c.js

@@ -0,0 +1,86 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightEcommerceC(props) {
+  return (
+    <section className="text-gray-700 body-font overflow-hidden">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="lg:w-4/5 mx-auto flex flex-wrap">
+          <div className="lg:w-1/2 w-full lg:pr-10 lg:py-6 mb-6 lg:mb-0">
+            <h2 className="text-sm title-font text-gray-500 tracking-widest">
+              BRAND NAME
+            </h2>
+            <h1 className="text-gray-900 text-3xl title-font font-medium mb-4">
+              Animated Night Hill Illustrations
+            </h1>
+            <div className="flex mb-4">
+              <a href className={`flex-grow text-${props.theme}-500 border-b-2 border-${props.theme}-500 py-2 text-lg px-1`}>
+                Description
+              </a>
+              <a href className="flex-grow border-b-2 border-gray-300 py-2 text-lg px-1">
+                Reviews
+              </a>
+              <a href className="flex-grow border-b-2 border-gray-300 py-2 text-lg px-1">
+                Details
+              </a>
+            </div>
+            <p className="leading-relaxed mb-4">
+              Fam locavore kickstarter distillery. Mixtape chillwave tumeric
+              sriracha taximy chia microdosing tilde DIY. XOXO fam inxigo
+              juiceramps cornhole raw denim forage brooklyn. Everyday carry +1
+              seitan poutine tumeric. Gastropub blue bottle austin listicle
+              pour-over, neutra jean.
+            </p>
+            <div className="flex border-t border-gray-300 py-2">
+              <span className="text-gray-500">Color</span>
+              <span className="ml-auto text-gray-900">Blue</span>
+            </div>
+            <div className="flex border-t border-gray-300 py-2">
+              <span className="text-gray-500">Size</span>
+              <span className="ml-auto text-gray-900">Medium</span>
+            </div>
+            <div className="flex border-t border-b mb-6 border-gray-300 py-2">
+              <span className="text-gray-500">Quantity</span>
+              <span className="ml-auto text-gray-900">4</span>
+            </div>
+            <div className="flex">
+              <span className="title-font font-medium text-2xl text-gray-900">
+                $58.00
+              </span>
+              <button className={`flex ml-auto text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
+                Button
+              </button>
+              <button className="rounded-full w-10 h-10 bg-gray-200 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4">
+                <svg
+                  fill="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-5 h-5"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <img
+            alt="ecommerce"
+            className="lg:w-1/2 w-full lg:h-auto h-64 object-cover object-center rounded"
+            src="https://dummyimage.com/400x400"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightEcommerceC.defaultProps = {
+  theme: 'indigo'
+};
+
+LightEcommerceC.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightEcommerceC;

src/blocks/feature/dark/a.js

@@ -0,0 +1,150 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkFeatureA(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <h1 className="sm:text-3xl text-2xl font-medium title-font text-center text-white mb-20">
+          Raw Denim Heirloom Man Braid<br className="hidden sm:block" />
+          Selfies Wayfarers
+        </h1>
+        <div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
+          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
+            <div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4 flex-shrink-0`}>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-6 h-6"
+                viewBox="0 0 24 24"
+              >
+                <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+              </svg>
+            </div>
+            <div className="flex-grow pl-6">
+              <h2 className="text-white text-lg title-font font-medium mb-2">
+                Shooting Stars
+              </h2>
+              <p className="leading-relaxed text-base">
+                Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                taxidermy. Gastropub indxgo juice poutine, ramps microdosing
+                banh mi pug VHS try-hard ugh iceland kickstarter tumblr
+                live-edge tilde.
+              </p>
+              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
+            <div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4 flex-shrink-0`}>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-6 h-6"
+                viewBox="0 0 24 24"
+              >
+                <circle cx="6" cy="6" r="3" />
+                <circle cx="6" cy="18" r="3" />
+                <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
+              </svg>
+            </div>
+            <div className="flex-grow pl-6">
+              <h2 className="text-white text-lg title-font font-medium mb-2">
+                The Catalyzer
+              </h2>
+              <p className="leading-relaxed text-base">
+                Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                taxidermy. Gastropub indxgo juice poutine, ramps microdosing
+                banh mi pug VHS try-hard ugh iceland kickstarter tumblr
+                live-edge tilde.
+              </p>
+              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
+            <div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4 flex-shrink-0`}>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-6 h-6"
+                viewBox="0 0 24 24"
+              >
+                <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                <circle cx="12" cy="7" r="4" />
+              </svg>
+            </div>
+            <div className="flex-grow pl-6">
+              <h2 className="text-white text-lg title-font font-medium mb-2">
+                Neptune
+              </h2>
+              <p className="leading-relaxed text-base">
+                Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                taxidermy. Gastropub indxgo juice poutine, ramps microdosing
+                banh mi pug VHS try-hard ugh iceland kickstarter tumblr
+                live-edge tilde.
+              </p>
+              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkFeatureA.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkFeatureA.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkFeatureA;

src/blocks/feature/dark/b.js

@@ -0,0 +1,159 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkFeatureB(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="text-center mb-20">
+          <h1 className="sm:text-3xl text-2xl font-medium title-font text-white mb-4">
+            Raw Denim Heirloom Man Braid
+          </h1>
+          <p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
+            Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+            taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi
+            pug.
+          </p>
+          <div className="flex mt-6 justify-center">
+            <div className={`w-16 h-1 rounded-full bg-${props.theme}-500 inline-flex`}></div>
+          </div>
+        </div>
+        <div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
+          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
+            <div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-5 flex-shrink-0`}>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-10 h-10"
+                viewBox="0 0 24 24"
+              >
+                <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+              </svg>
+            </div>
+            <div className="flex-grow">
+              <h2 className="text-white text-lg title-font font-medium mb-3">
+                Shooting Stars
+              </h2>
+              <p className="leading-relaxed text-base">
+                Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                taxidermy. Gastropub indxgo juice poutine, ramps microdosing
+                banh mi pug VHS try-hard.
+              </p>
+              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
+            <div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-5 flex-shrink-0`}>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-10 h-10"
+                viewBox="0 0 24 24"
+              >
+                <circle cx="6" cy="6" r="3" />
+                <circle cx="6" cy="18" r="3" />
+                <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
+              </svg>
+            </div>
+            <div className="flex-grow">
+              <h2 className="text-white text-lg title-font font-medium mb-3">
+                The Catalyzer
+              </h2>
+              <p className="leading-relaxed text-base">
+                Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                taxidermy. Gastropub indxgo juice poutine, ramps microdosing
+                banh mi pug VHS try-hard.
+              </p>
+              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
+            <div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-5 flex-shrink-0`}>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-10 h-10"
+                viewBox="0 0 24 24"
+              >
+                <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                <circle cx="12" cy="7" r="4" />
+              </svg>
+            </div>
+            <div className="flex-grow">
+              <h2 className="text-white text-lg title-font font-medium mb-3">
+                Neptune
+              </h2>
+              <p className="leading-relaxed text-base">
+                Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                taxidermy. Gastropub indxgo juice poutine, ramps microdosing
+                banh mi pug VHS try-hard.
+              </p>
+              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+        <button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+          Button
+        </button>
+      </div>
+    </section>
+  );
+}
+
+DarkFeatureB.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkFeatureB.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkFeatureB;

src/blocks/feature/dark/c.js

@@ -0,0 +1,147 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkFeatureC(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+        <div className="lg:w-1/2 w-full mb-10 lg:mb-0 rounded-lg overflow-hidden">
+          <img
+            alt="feature"
+            className="object-cover object-center h-full w-full"
+            src="https://dummyimage.com/460x500"
+          />
+        </div>
+        <div className="flex flex-col flex-wrap lg:py-6 -mb-10 lg:w-1/2 lg:pl-12 lg:text-left text-center">
+          <div className="flex flex-col mb-10 lg:items-start items-center">
+            <div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-5`}>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-6 h-6"
+                viewBox="0 0 24 24"
+              >
+                <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+              </svg>
+            </div>
+            <div className="flex-grow">
+              <h2 className="text-white text-lg title-font font-medium mb-3">
+                Shooting Stars
+              </h2>
+              <p className="leading-relaxed text-base">
+                Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                taxidermy. Gastropub indxgo juice poutine.
+              </p>
+              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div className="flex flex-col mb-10 lg:items-start items-center">
+            <div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-5`}>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-6 h-6"
+                viewBox="0 0 24 24"
+              >
+                <circle cx="6" cy="6" r="3" />
+                <circle cx="6" cy="18" r="3" />
+                <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
+              </svg>
+            </div>
+            <div className="flex-grow">
+              <h2 className="text-white text-lg title-font font-medium mb-3">
+                The Catalyzer
+              </h2>
+              <p className="leading-relaxed text-base">
+                Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                taxidermy. Gastropub indxgo juice poutine.
+              </p>
+              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div className="flex flex-col mb-10 lg:items-start items-center">
+            <div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-5`}>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-6 h-6"
+                viewBox="0 0 24 24"
+              >
+                <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                <circle cx="12" cy="7" r="4" />
+              </svg>
+            </div>
+            <div className="flex-grow">
+              <h2 className="text-white text-lg title-font font-medium mb-3">
+                Neptune
+              </h2>
+              <p className="leading-relaxed text-base">
+                Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                taxidermy. Gastropub indxgo juice poutine.
+              </p>
+              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkFeatureC.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkFeatureC.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkFeatureC;

src/blocks/feature/dark/d.js

@@ -0,0 +1,104 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkFeatureD(props) {
+  return (
+    <section className="text-gray-400 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+        <div className="flex flex-wrap -m-4">
+          <div className="p-4 lg:w-1/2 md:w-full">
+            <div className="flex border-2 rounded-lg border-gray-800 p-8 sm:flex-row flex-col">
+              <div className={`w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 flex-shrink-0`}>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-8 h-8"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+                </svg>
+              </div>
+              <div className="flex-grow">
+                <h2 className="text-white text-lg title-font font-medium mb-3">
+                  Shooting Stars
+                </h2>
+                <p className="leading-relaxed text-base">
+                  Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                  taxidermy. Gastropub indxgo juice poutine.
+                </p>
+                <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                  Learn More
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-4 h-4 ml-2"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M5 12h14M12 5l7 7-7 7" />
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="p-4 lg:w-1/2 md:w-full">
+            <div className="flex border-2 rounded-lg border-gray-800 p-8 sm:flex-row flex-col">
+              <div className={`w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 flex-shrink-0`}>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-10 h-10"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                  <circle cx="12" cy="7" r="4" />
+                </svg>
+              </div>
+              <div className="flex-grow">
+                <h2 className="text-white text-lg title-font font-medium mb-3">
+                  The Catalyzer
+                </h2>
+                <p className="leading-relaxed text-base">
+                  Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                  taxidermy. Gastropub indxgo juice poutine.
+                </p>
+                <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                  Learn More
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-4 h-4 ml-2"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M5 12h14M12 5l7 7-7 7" />
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkFeatureD.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkFeatureD.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkFeatureD;

src/blocks/feature/dark/e.js

@@ -0,0 +1,160 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkFeatureE(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+        <div className="flex flex-col text-center w-full mb-20">
+          <h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
+            ROOF PARTY POLAROID
+          </h2>
+          <h1 className="sm:text-3xl text-2xl font-medium title-font text-white">
+            Master Cleanse Reliac Heirloom
+          </h1>
+        </div>
+        <div className="flex flex-wrap -m-4">
+          <div className="p-4 md:w-1/3">
+            <div className="flex rounded-lg h-full bg-gray-800 p-8 flex-col">
+              <div className="flex items-center mb-3">
+                <div className={`w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-${props.theme}-500 text-white flex-shrink-0`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+                  </svg>
+                </div>
+                <h2 className="text-white text-lg title-font font-medium">
+                  Shooting Stars
+                </h2>
+              </div>
+              <div className="flex-grow">
+                <p className="leading-relaxed text-base">
+                  Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                  taxidermy. Gastropub indxgo juice poutine.
+                </p>
+                <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                  Learn More
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-4 h-4 ml-2"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M5 12h14M12 5l7 7-7 7" />
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="p-4 md:w-1/3">
+            <div className="flex rounded-lg h-full bg-gray-800 p-8 flex-col">
+              <div className="flex items-center mb-3">
+                <div className={`w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-${props.theme}-500 text-white flex-shrink-0`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                    <circle cx="12" cy="7" r="4" />
+                  </svg>
+                </div>
+                <h2 className="text-white text-lg title-font font-medium">
+                  The Catalyzer
+                </h2>
+              </div>
+              <div className="flex-grow">
+                <p className="leading-relaxed text-base">
+                  Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                  taxidermy. Gastropub indxgo juice poutine.
+                </p>
+                <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                  Learn More
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-4 h-4 ml-2"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M5 12h14M12 5l7 7-7 7" />
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="p-4 md:w-1/3">
+            <div className="flex rounded-lg h-full bg-gray-800 p-8 flex-col">
+              <div className="flex items-center mb-3">
+                <div className={`w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-${props.theme}-500 text-white flex-shrink-0`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <circle cx="6" cy="6" r="3" />
+                    <circle cx="6" cy="18" r="3" />
+                    <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
+                  </svg>
+                </div>
+                <h2 className="text-white text-lg title-font font-medium">
+                  Neptune
+                </h2>
+              </div>
+              <div className="flex-grow">
+                <p className="leading-relaxed text-base">
+                  Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                  taxidermy. Gastropub indxgo juice poutine.
+                </p>
+                <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                  Learn More
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-4 h-4 ml-2"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M5 12h14M12 5l7 7-7 7" />
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkFeatureE.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkFeatureE.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkFeatureE;

src/blocks/feature/dark/f.js

@@ -0,0 +1,141 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkFeatureF(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex items-center lg:w-3/5 mx-auto border-b pb-10 mb-10 border-gray-800 sm:flex-row flex-col">
+          <div className={`sm:w-32 sm:h-32 h-20 w-20 sm:mr-10 inline-flex items-center justify-center rounded-full text-${props.theme}-400 bg-gray-800 flex-shrink-0`}>
+            <svg
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="sm:w-16 sm:h-16 w-10 h-10"
+              viewBox="0 0 24 24"
+            >
+              <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+            </svg>
+          </div>
+          <div className="flex-grow sm:text-left text-center mt-6 sm:mt-0">
+            <h2 className="text-white text-lg title-font font-medium mb-2">
+              Shooting Stars
+            </h2>
+            <p className="leading-relaxed text-base">
+              Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+              taxidermy. Gastropub indxgo juice poutine.
+            </p>
+            <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+        </div>
+        <div className="flex items-center lg:w-3/5 mx-auto border-b pb-10 mb-10 border-gray-800 sm:flex-row flex-col">
+          <div className="flex-grow sm:text-left text-center mt-6 sm:mt-0">
+            <h2 className="text-white text-lg title-font font-medium mb-2">
+              The Catalyzer
+            </h2>
+            <p className="leading-relaxed text-base">
+              Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+              taxidermy. Gastropub indxgo juice poutine.
+            </p>
+            <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+          <div className={`sm:w-32 order-first sm:order-none sm:h-32 h-20 w-20 sm:ml-10 inline-flex items-center justify-center rounded-full text-${props.theme}-400 bg-gray-800 flex-shrink-0`}>
+            <svg
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="sm:w-16 sm:h-16 w-10 h-10"
+              viewBox="0 0 24 24"
+            >
+              <circle cx="6" cy="6" r="3" />
+              <circle cx="6" cy="18" r="3" />
+              <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
+            </svg>
+          </div>
+        </div>
+        <div className="flex items-center lg:w-3/5 mx-auto sm:flex-row flex-col">
+          <div className={`sm:w-32 sm:h-32 h-20 w-20 sm:mr-10 inline-flex items-center justify-center rounded-full text-${props.theme}-400 bg-gray-800 flex-shrink-0`}>
+            <svg
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="sm:w-16 sm:h-16 w-10 h-10"
+              viewBox="0 0 24 24"
+            >
+              <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+              <circle cx="12" cy="7" r="4" />
+            </svg>
+          </div>
+          <div className="flex-grow sm:text-left text-center mt-6 sm:mt-0">
+            <h2 className="text-white text-lg title-font font-medium mb-2">
+              The 400 Blows
+            </h2>
+            <p className="leading-relaxed text-base">
+              Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+              taxidermy. Gastropub indxgo juice poutine.
+            </p>
+            <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+        </div>
+        <button className={`flex mx-auto mt-20 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+          Button
+        </button>
+      </div>
+    </section>
+  );
+}
+
+DarkFeatureF.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkFeatureF.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkFeatureF;

src/blocks/feature/dark/g.js

@@ -0,0 +1,150 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkFeatureG(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="text-center mb-20">
+          <h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-white mb-4">
+            Raw Denim Heirloom Man Braid
+          </h1>
+          <p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
+            Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+            taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi
+            pug.
+          </p>
+        </div>
+        <div className="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
+          <div className="p-2 sm:w-1/2 w-full">
+            <div className="bg-gray-800 rounded flex p-4 h-full items-center">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3"
+                className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
+                viewBox="0 0 24 24"
+              >
+                <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+                <path d="M22 4L12 14.01l-3-3" />
+              </svg>
+              <span className="title-font font-medium text-white">
+                Authentic Cliche Forage
+              </span>
+            </div>
+          </div>
+          <div className="p-2 sm:w-1/2 w-full">
+            <div className="bg-gray-800 rounded flex p-4 h-full items-center">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3"
+                className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
+                viewBox="0 0 24 24"
+              >
+                <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+                <path d="M22 4L12 14.01l-3-3" />
+              </svg>
+              <span className="title-font font-medium text-white">
+                Kinfolk Chips Snackwave
+              </span>
+            </div>
+          </div>
+          <div className="p-2 sm:w-1/2 w-full">
+            <div className="bg-gray-800 rounded flex p-4 h-full items-center">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3"
+                className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
+                viewBox="0 0 24 24"
+              >
+                <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+                <path d="M22 4L12 14.01l-3-3" />
+              </svg>
+              <span className="title-font font-medium text-white">
+                Coloring Book Ethical
+              </span>
+            </div>
+          </div>
+          <div className="p-2 sm:w-1/2 w-full">
+            <div className="bg-gray-800 rounded flex p-4 h-full items-center">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3"
+                className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
+                viewBox="0 0 24 24"
+              >
+                <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+                <path d="M22 4L12 14.01l-3-3" />
+              </svg>
+              <span className="title-font font-medium text-white">
+                Typewriter Polaroid Cray
+              </span>
+            </div>
+          </div>
+          <div className="p-2 sm:w-1/2 w-full">
+            <div className="bg-gray-800 rounded flex p-4 h-full items-center">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3"
+                className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
+                viewBox="0 0 24 24"
+              >
+                <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+                <path d="M22 4L12 14.01l-3-3" />
+              </svg>
+              <span className="title-font font-medium text-white">
+                Pack Truffaut Blue
+              </span>
+            </div>
+          </div>
+          <div className="p-2 sm:w-1/2 w-full">
+            <div className="bg-gray-800 rounded flex p-4 h-full items-center">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3"
+                className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
+                viewBox="0 0 24 24"
+              >
+                <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+                <path d="M22 4L12 14.01l-3-3" />
+              </svg>
+              <span className="title-font font-medium text-white">
+                The Catcher In The Rye
+              </span>
+            </div>
+          </div>
+        </div>
+        <button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+          Button
+        </button>
+      </div>
+    </section>
+  );
+}
+
+DarkFeatureG.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkFeatureG.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkFeatureG;

src/blocks/feature/dark/h.js

@@ -0,0 +1,384 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkFeatureH(props) {
+  return (
+    <section className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="text-center mb-20">
+          <h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-white mb-4">
+            Raw Denim Heirloom Man Braid
+          </h1>
+          <p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
+            Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+            taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi
+            pug.
+          </p>
+        </div>
+        <div className="flex flex-wrap -m-4">
+          <div className="p-4 lg:w-1/4 sm:w-1/2 w-full">
+            <h2 className="font-medium title-font tracking-widest text-white mb-4 text-sm text-center sm:text-left">
+              SHOOTING STARS
+            </h2>
+            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                First Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Second Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Third Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Fourth Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Fifth Link
+              </a>
+            </nav>
+          </div>
+          <div className="p-4 lg:w-1/4 sm:w-1/2 w-full">
+            <h2 className="font-medium title-font tracking-widest text-white mb-4 text-sm text-center sm:text-left">
+              THE 400 BLOWS
+            </h2>
+            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                First Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Second Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Third Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Fourth Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Fifth Link
+              </a>
+            </nav>
+          </div>
+          <div className="p-4 lg:w-1/4 sm:w-1/2 w-full">
+            <h2 className="font-medium title-font tracking-widest text-white mb-4 text-sm text-center sm:text-left">
+              THE CATALYZER
+            </h2>
+            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                First Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Second Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Third Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Fourth Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Fifth Link
+              </a>
+            </nav>
+          </div>
+          <div className="p-4 lg:w-1/4 sm:w-1/2 w-full">
+            <h2 className="font-medium title-font tracking-widest text-white mb-4 text-sm text-center sm:text-left">
+              NEPTUNE
+            </h2>
+            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                First Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Second Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Third Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Fourth Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Fifth Link
+              </a>
+            </nav>
+          </div>
+        </div>
+        <button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+          Button
+        </button>
+      </div>
+    </section>
+  );
+}
+
+DarkFeatureH.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkFeatureH.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkFeatureH;

src/blocks/feature/light/a.js

@@ -0,0 +1,150 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightFeatureA(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <h1 className="sm:text-3xl text-2xl font-medium title-font text-center text-gray-900 mb-20">
+          Raw Denim Heirloom Man Braid<br className="hidden sm:block" />
+          Selfies Wayfarers
+        </h1>
+        <div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
+          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
+            <div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4 flex-shrink-0`}>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-6 h-6"
+                viewBox="0 0 24 24"
+              >
+                <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+              </svg>
+            </div>
+            <div className="flex-grow pl-6">
+              <h2 className="text-gray-900 text-lg title-font font-medium mb-2">
+                Shooting Stars
+              </h2>
+              <p className="leading-relaxed text-base">
+                Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                taxidermy. Gastropub indxgo juice poutine, ramps microdosing
+                banh mi pug VHS try-hard ugh iceland kickstarter tumblr
+                live-edge tilde.
+              </p>
+              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
+            <div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4 flex-shrink-0`}>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-6 h-6"
+                viewBox="0 0 24 24"
+              >
+                <circle cx="6" cy="6" r="3" />
+                <circle cx="6" cy="18" r="3" />
+                <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
+              </svg>
+            </div>
+            <div className="flex-grow pl-6">
+              <h2 className="text-gray-900 text-lg title-font font-medium mb-2">
+                The Catalyzer
+              </h2>
+              <p className="leading-relaxed text-base">
+                Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                taxidermy. Gastropub indxgo juice poutine, ramps microdosing
+                banh mi pug VHS try-hard ugh iceland kickstarter tumblr
+                live-edge tilde.
+              </p>
+              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
+            <div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4 flex-shrink-0`}>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-6 h-6"
+                viewBox="0 0 24 24"
+              >
+                <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                <circle cx="12" cy="7" r="4" />
+              </svg>
+            </div>
+            <div className="flex-grow pl-6">
+              <h2 className="text-gray-900 text-lg title-font font-medium mb-2">
+                Neptune
+              </h2>
+              <p className="leading-relaxed text-base">
+                Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                taxidermy. Gastropub indxgo juice poutine, ramps microdosing
+                banh mi pug VHS try-hard ugh iceland kickstarter tumblr
+                live-edge tilde.
+              </p>
+              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightFeatureA.defaultProps = {
+  theme: 'indigo'
+};
+
+LightFeatureA.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightFeatureA;

src/blocks/feature/light/b.js

@@ -0,0 +1,159 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightFeatureB(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="text-center mb-20">
+          <h1 className="sm:text-3xl text-2xl font-medium title-font text-gray-900 mb-4">
+            Raw Denim Heirloom Man Braid
+          </h1>
+          <p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
+            Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+            taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi
+            pug.
+          </p>
+          <div className="flex mt-6 justify-center">
+            <div className={`w-16 h-1 rounded-full bg-${props.theme}-500 inline-flex`}></div>
+          </div>
+        </div>
+        <div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
+          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
+            <div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-5 flex-shrink-0`}>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-10 h-10"
+                viewBox="0 0 24 24"
+              >
+                <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+              </svg>
+            </div>
+            <div className="flex-grow">
+              <h2 className="text-gray-900 text-lg title-font font-medium mb-3">
+                Shooting Stars
+              </h2>
+              <p className="leading-relaxed text-base">
+                Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                taxidermy. Gastropub indxgo juice poutine, ramps microdosing
+                banh mi pug VHS try-hard.
+              </p>
+              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
+            <div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-5 flex-shrink-0`}>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-10 h-10"
+                viewBox="0 0 24 24"
+              >
+                <circle cx="6" cy="6" r="3" />
+                <circle cx="6" cy="18" r="3" />
+                <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
+              </svg>
+            </div>
+            <div className="flex-grow">
+              <h2 className="text-gray-900 text-lg title-font font-medium mb-3">
+                The Catalyzer
+              </h2>
+              <p className="leading-relaxed text-base">
+                Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                taxidermy. Gastropub indxgo juice poutine, ramps microdosing
+                banh mi pug VHS try-hard.
+              </p>
+              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
+            <div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-5 flex-shrink-0`}>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-10 h-10"
+                viewBox="0 0 24 24"
+              >
+                <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                <circle cx="12" cy="7" r="4" />
+              </svg>
+            </div>
+            <div className="flex-grow">
+              <h2 className="text-gray-900 text-lg title-font font-medium mb-3">
+                Neptune
+              </h2>
+              <p className="leading-relaxed text-base">
+                Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                taxidermy. Gastropub indxgo juice poutine, ramps microdosing
+                banh mi pug VHS try-hard.
+              </p>
+              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+        <button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+          Button
+        </button>
+      </div>
+    </section>
+  );
+}
+
+LightFeatureB.defaultProps = {
+  theme: 'indigo'
+};
+
+LightFeatureB.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightFeatureB;

src/blocks/feature/light/c.js

@@ -0,0 +1,147 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightFeatureC(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+        <div className="lg:w-1/2 w-full mb-10 lg:mb-0 rounded-lg overflow-hidden">
+          <img
+            alt="feature"
+            className="object-cover object-center h-full w-full"
+            src="https://dummyimage.com/460x500"
+          />
+        </div>
+        <div className="flex flex-col flex-wrap lg:py-6 -mb-10 lg:w-1/2 lg:pl-12 lg:text-left text-center">
+          <div className="flex flex-col mb-10 lg:items-start items-center">
+            <div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-5`}>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-6 h-6"
+                viewBox="0 0 24 24"
+              >
+                <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+              </svg>
+            </div>
+            <div className="flex-grow">
+              <h2 className="text-gray-900 text-lg title-font font-medium mb-3">
+                Shooting Stars
+              </h2>
+              <p className="leading-relaxed text-base">
+                Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                taxidermy. Gastropub indxgo juice poutine.
+              </p>
+              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div className="flex flex-col mb-10 lg:items-start items-center">
+            <div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-5`}>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-6 h-6"
+                viewBox="0 0 24 24"
+              >
+                <circle cx="6" cy="6" r="3" />
+                <circle cx="6" cy="18" r="3" />
+                <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
+              </svg>
+            </div>
+            <div className="flex-grow">
+              <h2 className="text-gray-900 text-lg title-font font-medium mb-3">
+                The Catalyzer
+              </h2>
+              <p className="leading-relaxed text-base">
+                Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                taxidermy. Gastropub indxgo juice poutine.
+              </p>
+              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+          <div className="flex flex-col mb-10 lg:items-start items-center">
+            <div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-5`}>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-6 h-6"
+                viewBox="0 0 24 24"
+              >
+                <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                <circle cx="12" cy="7" r="4" />
+              </svg>
+            </div>
+            <div className="flex-grow">
+              <h2 className="text-gray-900 text-lg title-font font-medium mb-3">
+                Neptune
+              </h2>
+              <p className="leading-relaxed text-base">
+                Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                taxidermy. Gastropub indxgo juice poutine.
+              </p>
+              <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                Learn More
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightFeatureC.defaultProps = {
+  theme: 'indigo'
+};
+
+LightFeatureC.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightFeatureC;

src/blocks/feature/light/d.js

@@ -0,0 +1,104 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightFeatureD(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto flex flex-wrap">
+        <div className="flex flex-wrap -m-4">
+          <div className="p-4 lg:w-1/2 md:w-full">
+            <div className="flex border-2 rounded-lg border-gray-200 p-8 sm:flex-row flex-col">
+              <div className={`w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 flex-shrink-0`}>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-8 h-8"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+                </svg>
+              </div>
+              <div className="flex-grow">
+                <h2 className="text-gray-900 text-lg title-font font-medium mb-3">
+                  Shooting Stars
+                </h2>
+                <p className="leading-relaxed text-base">
+                  Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                  taxidermy. Gastropub indxgo juice poutine.
+                </p>
+                <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                  Learn More
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-4 h-4 ml-2"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M5 12h14M12 5l7 7-7 7" />
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="p-4 lg:w-1/2 md:w-full">
+            <div className="flex border-2 rounded-lg border-gray-200 p-8 sm:flex-row flex-col">
+              <div className={`w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 flex-shrink-0`}>
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="w-10 h-10"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                  <circle cx="12" cy="7" r="4" />
+                </svg>
+              </div>
+              <div className="flex-grow">
+                <h2 className="text-gray-900 text-lg title-font font-medium mb-3">
+                  The Catalyzer
+                </h2>
+                <p className="leading-relaxed text-base">
+                  Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                  taxidermy. Gastropub indxgo juice poutine.
+                </p>
+                <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                  Learn More
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-4 h-4 ml-2"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M5 12h14M12 5l7 7-7 7" />
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightFeatureD.defaultProps = {
+  theme: 'indigo'
+};
+
+LightFeatureD.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightFeatureD;

src/blocks/feature/light/e.js

@@ -0,0 +1,160 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightFeatureE(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-col text-center w-full mb-20">
+          <h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
+            ROOF PARTY POLAROID
+          </h2>
+          <h1 className="sm:text-3xl text-2xl font-medium title-font text-gray-900">
+            Master Cleanse Reliac Heirloom
+          </h1>
+        </div>
+        <div className="flex flex-wrap -m-4">
+          <div className="p-4 md:w-1/3">
+            <div className="flex rounded-lg h-full bg-gray-100 p-8 flex-col">
+              <div className="flex items-center mb-3">
+                <div className={`w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-${props.theme}-500 text-white flex-shrink-0`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+                  </svg>
+                </div>
+                <h2 className="text-gray-900 text-lg title-font font-medium">
+                  Shooting Stars
+                </h2>
+              </div>
+              <div className="flex-grow">
+                <p className="leading-relaxed text-base">
+                  Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                  taxidermy. Gastropub indxgo juice poutine.
+                </p>
+                <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                  Learn More
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-4 h-4 ml-2"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M5 12h14M12 5l7 7-7 7" />
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="p-4 md:w-1/3">
+            <div className="flex rounded-lg h-full bg-gray-100 p-8 flex-col">
+              <div className="flex items-center mb-3">
+                <div className={`w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-${props.theme}-500 text-white flex-shrink-0`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+                    <circle cx="12" cy="7" r="4" />
+                  </svg>
+                </div>
+                <h2 className="text-gray-900 text-lg title-font font-medium">
+                  The Catalyzer
+                </h2>
+              </div>
+              <div className="flex-grow">
+                <p className="leading-relaxed text-base">
+                  Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                  taxidermy. Gastropub indxgo juice poutine.
+                </p>
+                <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                  Learn More
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-4 h-4 ml-2"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M5 12h14M12 5l7 7-7 7" />
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="p-4 md:w-1/3">
+            <div className="flex rounded-lg h-full bg-gray-100 p-8 flex-col">
+              <div className="flex items-center mb-3">
+                <div className={`w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-${props.theme}-500 text-white flex-shrink-0`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-5 h-5"
+                    viewBox="0 0 24 24"
+                  >
+                    <circle cx="6" cy="6" r="3" />
+                    <circle cx="6" cy="18" r="3" />
+                    <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
+                  </svg>
+                </div>
+                <h2 className="text-gray-900 text-lg title-font font-medium">
+                  Neptune
+                </h2>
+              </div>
+              <div className="flex-grow">
+                <p className="leading-relaxed text-base">
+                  Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+                  taxidermy. Gastropub indxgo juice poutine.
+                </p>
+                <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+                  Learn More
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="w-4 h-4 ml-2"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M5 12h14M12 5l7 7-7 7" />
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightFeatureE.defaultProps = {
+  theme: 'indigo'
+};
+
+LightFeatureE.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightFeatureE;

src/blocks/feature/light/f.js

@@ -0,0 +1,141 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightFeatureF(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex items-center lg:w-3/5 mx-auto border-b pb-10 mb-10 border-gray-200 sm:flex-row flex-col">
+          <div className={`sm:w-32 sm:h-32 h-20 w-20 sm:mr-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 flex-shrink-0`}>
+            <svg
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="sm:w-16 sm:h-16 w-10 h-10"
+              viewBox="0 0 24 24"
+            >
+              <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+            </svg>
+          </div>
+          <div className="flex-grow sm:text-left text-center mt-6 sm:mt-0">
+            <h2 className="text-gray-900 text-lg title-font font-medium mb-2">
+              Shooting Stars
+            </h2>
+            <p className="leading-relaxed text-base">
+              Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+              taxidermy. Gastropub indxgo juice poutine.
+            </p>
+            <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+        </div>
+        <div className="flex items-center lg:w-3/5 mx-auto border-b pb-10 mb-10 border-gray-200 sm:flex-row flex-col">
+          <div className="flex-grow sm:text-left text-center mt-6 sm:mt-0">
+            <h2 className="text-gray-900 text-lg title-font font-medium mb-2">
+              The Catalyzer
+            </h2>
+            <p className="leading-relaxed text-base">
+              Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+              taxidermy. Gastropub indxgo juice poutine.
+            </p>
+            <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+          <div className={`sm:w-32 sm:order-none order-first sm:h-32 h-20 w-20 sm:ml-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 flex-shrink-0`}>
+            <svg
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="sm:w-16 sm:h-16 w-10 h-10"
+              viewBox="0 0 24 24"
+            >
+              <circle cx="6" cy="6" r="3" />
+              <circle cx="6" cy="18" r="3" />
+              <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12" />
+            </svg>
+          </div>
+        </div>
+        <div className="flex items-center lg:w-3/5 mx-auto sm:flex-row flex-col">
+          <div className={`sm:w-32 sm:h-32 h-20 w-20 sm:mr-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 flex-shrink-0`}>
+            <svg
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="sm:w-16 sm:h-16 w-10 h-10"
+              viewBox="0 0 24 24"
+            >
+              <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" />
+              <circle cx="12" cy="7" r="4" />
+            </svg>
+          </div>
+          <div className="flex-grow sm:text-left text-center mt-6 sm:mt-0">
+            <h2 className="text-gray-900 text-lg title-font font-medium mb-2">
+              The 400 Blows
+            </h2>
+            <p className="leading-relaxed text-base">
+              Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+              taxidermy. Gastropub indxgo juice poutine.
+            </p>
+            <a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
+              Learn More
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-4 h-4 ml-2"
+                viewBox="0 0 24 24"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </a>
+          </div>
+        </div>
+        <button className={`flex mx-auto mt-20 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+          Button
+        </button>
+      </div>
+    </section>
+  );
+}
+
+LightFeatureF.defaultProps = {
+  theme: 'indigo'
+};
+
+LightFeatureF.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightFeatureF;

src/blocks/feature/light/g.js

@@ -0,0 +1,148 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightFeatureG(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="text-center mb-20">
+          <h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-gray-900 mb-4">
+            Raw Denim Heirloom Man Braid
+          </h1>
+          <p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
+            Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+            taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi
+            pug.
+          </p>
+        </div>
+        <div className="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
+          <div className="p-2 sm:w-1/2 w-full">
+            <div className="bg-gray-200 rounded flex p-4 h-full items-center">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3"
+                className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
+                viewBox="0 0 24 24"
+              >
+                <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+                <path d="M22 4L12 14.01l-3-3" />
+              </svg>
+              <span className="title-font font-medium">
+                Authentic Cliche Forage
+              </span>
+            </div>
+          </div>
+          <div className="p-2 sm:w-1/2 w-full">
+            <div className="bg-gray-200 rounded flex p-4 h-full items-center">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3"
+                className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
+                viewBox="0 0 24 24"
+              >
+                <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+                <path d="M22 4L12 14.01l-3-3" />
+              </svg>
+              <span className="title-font font-medium">
+                Kinfolk Chips Snackwave
+              </span>
+            </div>
+          </div>
+          <div className="p-2 sm:w-1/2 w-full">
+            <div className="bg-gray-200 rounded flex p-4 h-full items-center">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3"
+                className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
+                viewBox="0 0 24 24"
+              >
+                <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+                <path d="M22 4L12 14.01l-3-3" />
+              </svg>
+              <span className="title-font font-medium">
+                Coloring Book Ethical
+              </span>
+            </div>
+          </div>
+          <div className="p-2 sm:w-1/2 w-full">
+            <div className="bg-gray-200 rounded flex p-4 h-full items-center">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3"
+                className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
+                viewBox="0 0 24 24"
+              >
+                <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+                <path d="M22 4L12 14.01l-3-3" />
+              </svg>
+              <span className="title-font font-medium">
+                Typewriter Polaroid Cray
+              </span>
+            </div>
+          </div>
+          <div className="p-2 sm:w-1/2 w-full">
+            <div className="bg-gray-200 rounded flex p-4 h-full items-center">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3"
+                className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
+                viewBox="0 0 24 24"
+              >
+                <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+                <path d="M22 4L12 14.01l-3-3" />
+              </svg>
+              <span className="title-font font-medium">Pack Truffaut Blue</span>
+            </div>
+          </div>
+          <div className="p-2 sm:w-1/2 w-full">
+            <div className="bg-gray-200 rounded flex p-4 h-full items-center">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3"
+                className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
+                viewBox="0 0 24 24"
+              >
+                <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+                <path d="M22 4L12 14.01l-3-3" />
+              </svg>
+              <span className="title-font font-medium">
+                The Catcher In The Rye
+              </span>
+            </div>
+          </div>
+        </div>
+        <button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+          Button
+        </button>
+      </div>
+    </section>
+  );
+}
+
+LightFeatureG.defaultProps = {
+  theme: 'indigo'
+};
+
+LightFeatureG.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightFeatureG;

src/blocks/feature/light/h.js

@@ -0,0 +1,384 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightFeatureH(props) {
+  return (
+    <section className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="text-center mb-20">
+          <h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-gray-900 mb-4">
+            Raw Denim Heirloom Man Braid
+          </h1>
+          <p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
+            Blue bottle crucifix vinyl post-ironic four dollar toast vegan
+            taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi
+            pug.
+          </p>
+        </div>
+        <div className="flex flex-wrap -m-4">
+          <div className="p-4 lg:w-1/4 sm:w-1/2 w-full">
+            <h2 className="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">
+              SHOOTING STARS
+            </h2>
+            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                First Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Second Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Third Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Fourth Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Fifth Link
+              </a>
+            </nav>
+          </div>
+          <div className="p-4 lg:w-1/4 sm:w-1/2 w-full">
+            <h2 className="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">
+              THE 400 BLOWS
+            </h2>
+            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                First Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Second Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Third Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Fourth Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Fifth Link
+              </a>
+            </nav>
+          </div>
+          <div className="p-4 lg:w-1/4 sm:w-1/2 w-full">
+            <h2 className="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">
+              THE CATALYZER
+            </h2>
+            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                First Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Second Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Third Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Fourth Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Fifth Link
+              </a>
+            </nav>
+          </div>
+          <div className="p-4 lg:w-1/4 sm:w-1/2 w-full">
+            <h2 className="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">
+              NEPTUNE
+            </h2>
+            <nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                First Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Second Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Third Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Fourth Link
+              </a>
+              <a href className="mb-2">
+                <span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
+                  <svg
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="3"
+                    className="w-3 h-3"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </span>
+                Fifth Link
+              </a>
+            </nav>
+          </div>
+        </div>
+        <button className={`flex mx-auto mt-16 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
+          Button
+        </button>
+      </div>
+    </section>
+  );
+}
+
+LightFeatureH.defaultProps = {
+  theme: 'indigo'
+};
+
+LightFeatureH.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightFeatureH;

src/blocks/footer/dark/a.js

@@ -0,0 +1,186 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkFooterA(props) {
+  return (
+    <footer className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-no-wrap flex-wrap flex-col">
+        <div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
+          <a href className="flex title-font font-medium items-center md:justify-start justify-center text-white">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
+              viewBox="0 0 24 24"
+            >
+              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+            </svg>
+            <span className="ml-3 text-xl">madde</span>
+          </a>
+          <p className="mt-2 text-sm text-gray-700">
+            Air plant banjo lyft occupy retro adaptogen indego
+          </p>
+        </div>
+        <div className="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center">
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-white">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-white">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-white">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-white">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+        </div>
+      </div>
+      <div className="bg-gray-800">
+        <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
+          <p className="text-gray-600 text-sm text-center sm:text-left">
+            © 2020 madde —
+            <a href="https://twitter.com/knyttneve" rel="noopener noreferrer" className="text-gray-500 ml-1" target="_blank">
+              @knyttneve
+            </a>
+          </p>
+          <span className="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
+            <a href className="text-gray-600">
+              <svg
+                fill="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-600">
+              <svg
+                fill="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-600">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+                <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-600">
+              <svg
+                fill="currentColor"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="0"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke="none"
+                  d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
+                 />
+                <circle cx="4" cy="4" r="2" stroke="none" />
+              </svg>
+            </a>
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+DarkFooterA.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkFooterA.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkFooterA;

src/blocks/footer/dark/b.js

@@ -0,0 +1,186 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkFooterB(props) {
+  return (
+    <footer className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-no-wrap flex-wrap flex-col">
+        <div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left md:mt-0 mt-10">
+          <a href className="flex title-font font-medium items-center md:justify-start justify-center text-white">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
+              viewBox="0 0 24 24"
+            >
+              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+            </svg>
+            <span className="ml-3 text-xl">madde</span>
+          </a>
+          <p className="mt-2 text-sm text-gray-700">
+            Air plant banjo lyft occupy retro adaptogen indego
+          </p>
+        </div>
+        <div className="flex-grow flex flex-wrap md:pr-20 -mb-10 md:text-left text-center order-first">
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-white">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-white">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-white">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-white">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+        </div>
+      </div>
+      <div className="bg-gray-800">
+        <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
+          <p className="text-gray-600 text-sm text-center sm:text-left">
+            © 2020 madde —
+            <a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" rel="noopener noreferrer" target="_blank">
+              @knyttneve
+            </a>
+          </p>
+          <span className="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
+            <a href className="text-gray-600">
+              <svg
+                fill="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-600">
+              <svg
+                fill="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-600">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+                <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-600">
+              <svg
+                fill="currentColor"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="0"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke="none"
+                  d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
+                 />
+                <circle cx="4" cy="4" r="2" stroke="none" />
+              </svg>
+            </a>
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+DarkFooterB.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkFooterB.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkFooterB;

src/blocks/footer/dark/c.js

@@ -0,0 +1,225 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkFooterC(props) {
+  return (
+    <footer className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-wrap md:text-left text-center -mb-10 -mx-4">
+          <div className="lg:w-1/6 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-white">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/6 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-white">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/6 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-white">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/6 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-white">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/6 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-white">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/6 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-white">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+        </div>
+      </div>
+      <div className="border-t border-gray-800">
+        <div className="container px-5 py-8 flex flex-wrap mx-auto items-center">
+          <div className="flex md:flex-no-wrap flex-wrap justify-center md:justify-start">
+            <input
+              className={`sm:w-64 w-40 bg-gray-800 rounded sm:mr-4 mr-2 border border-gray-700 text-white focus:outline-none focus:border-${props.theme}-500 text-base py-2 px-4`}
+              placeholder="Placeholder"
+              type="text"
+            ></input>
+            <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
+              Button
+            </button>
+            <p className="text-gray-600 text-sm md:ml-6 md:mt-0 mt-2 text-center sm:text-left">
+              Bitters chicharrones fanny pack
+              <br className="lg:block hidden"></br>waistcoat green juice
+            </p>
+          </div>
+          <span className="inline-flex lg:ml-auto lg:mt-0 mt-6 w-full justify-center md:justify-start md:w-auto">
+            <a href className="text-gray-600">
+              <svg
+                fill="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-600">
+              <svg
+                fill="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-600">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+                <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-600">
+              <svg
+                fill="currentColor"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="0"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke="none"
+                  d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
+                 />
+                <circle cx="4" cy="4" r="2" stroke="none" />
+              </svg>
+            </a>
+          </span>
+        </div>
+      </div>
+      <div className="bg-gray-800">
+        <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
+          <p className="text-gray-600 text-sm text-center sm:text-left">
+            © 2020 madde —
+            <a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">
+              @knyttneve
+            </a>
+          </p>
+          <span className="sm:ml-auto sm:mt-0 mt-2 sm:w-auto w-full sm:text-left text-center text-gray-600 text-sm">
+            Enamel pin tousled raclette tacos irony
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+DarkFooterC.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkFooterC.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkFooterC;

src/blocks/footer/dark/d.js

@@ -0,0 +1,99 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkFooterD(props) {
+  return (
+    <footer className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
+        <a href className="flex title-font font-medium items-center md:justify-start justify-center text-white">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
+            viewBox="0 0 24 24"
+          >
+            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+          </svg>
+          <span class="ml-3 text-xl">madde</span>
+        </a>
+        <p className="text-sm text-gray-600 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-800 sm:py-2 sm:mt-0 mt-4">
+          © 2020 madde —
+          <a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">
+            @knyttneve
+          </a>
+        </p>
+        <span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
+          <a href className="text-gray-600">
+            <svg
+              fill="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="w-5 h-5"
+              viewBox="0 0 24 24"
+            >
+              <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
+            </svg>
+          </a>
+          <a href className="ml-3 text-gray-600">
+            <svg
+              fill="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="w-5 h-5"
+              viewBox="0 0 24 24"
+            >
+              <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
+            </svg>
+          </a>
+          <a href className="ml-3 text-gray-600">
+            <svg
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="w-5 h-5"
+              viewBox="0 0 24 24"
+            >
+              <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+              <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
+            </svg>
+          </a>
+          <a href className="ml-3 text-gray-600">
+            <svg
+              fill="currentColor"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="0"
+              className="w-5 h-5"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke="none"
+                d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
+               />
+              <circle cx="4" cy="4" r="2" stroke="none" />
+            </svg>
+          </a>
+        </span>
+      </div>
+    </footer>
+  );
+}
+
+DarkFooterD.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkFooterD.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkFooterD;

src/blocks/footer/dark/e.js

@@ -0,0 +1,181 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function DarkFooterE(props) {
+  return (
+    <footer className="text-gray-500 bg-gray-900 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-wrap md:text-left text-center order-first">
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-white">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-white">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-white">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-white">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
+              SUBSCRIBE
+            </h2>
+            <div className="flex xl:flex-no-wrap md:flex-no-wrap lg:flex-wrap flex-wrap justify-center md:justify-start">
+              <input
+                className={`w-40 sm:w-auto bg-gray-800 rounded text-white xl:mr-4 lg:mr-0 sm:mr-4 mr-2 border border-gray-700 focus:outline-none focus:border-${props.theme}-500 text-base py-2 px-4`}
+                placeholder="Placeholder"
+                type="text"
+              ></input>
+              <button className={`lg:mt-2 xl:mt-0 flex-shrink-0 inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
+                Button
+              </button>
+            </div>
+            <p className="text-gray-600 text-sm mt-2 md:text-left text-center">
+              Bitters chicharrones fanny pack
+              <br className="lg:block hidden"></br>waistcoat green juice
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="bg-gray-800">
+        <div className="container px-5 py-6 mx-auto flex items-center sm:flex-row flex-col">
+          <a href className="flex title-font font-medium items-center md:justify-start justify-center text-white">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
+              viewBox="0 0 24 24"
+            >
+              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+            </svg>
+            <span class="ml-3 text-xl">madde</span>
+          </a>
+          <p className="text-sm text-gray-600 sm:ml-6 sm:mt-0 mt-4">
+            © 2020 madde —
+            <a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">
+              @knyttneve
+            </a>
+          </p>
+          <span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
+            <a href className="text-gray-600">
+              <svg
+                fill="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-600">
+              <svg
+                fill="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-600">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+                <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-600">
+              <svg
+                fill="currentColor"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="0"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke="none"
+                  d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
+                 />
+                <circle cx="4" cy="4" r="2" stroke="none" />
+              </svg>
+            </a>
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+DarkFooterE.defaultProps = {
+  theme: 'indigo'
+};
+
+DarkFooterE.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default DarkFooterE;

src/blocks/footer/light/a.js

@@ -0,0 +1,186 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightFooterA(props) {
+  return (
+    <footer className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-no-wrap flex-wrap flex-col">
+        <div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
+          <a href className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
+              viewBox="0 0 24 24"
+            >
+              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+            </svg>
+            <span className="ml-3 text-xl">madde</span>
+          </a>
+          <p className="mt-2 text-sm text-gray-500">
+            Air plant banjo lyft occupy retro adaptogen indego
+          </p>
+        </div>
+        <div className="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center">
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+        </div>
+      </div>
+      <div className="bg-gray-200">
+        <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
+          <p className="text-gray-500 text-sm text-center sm:text-left">
+            © 2020 madde —
+            <a href="https://twitter.com/knyttneve" rel="noopener noreferrer" className="text-gray-600 ml-1" target="_blank">
+              @knyttneve
+            </a>
+          </p>
+          <span className="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
+            <a href className="text-gray-500">
+              <svg
+                fill="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-500">
+              <svg
+                fill="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-500">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+                <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-500">
+              <svg
+                fill="currentColor"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="0"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke="none"
+                  d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
+                 />
+                <circle cx="4" cy="4" r="2" stroke="none" />
+              </svg>
+            </a>
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+LightFooterA.defaultProps = {
+  theme: 'indigo'
+};
+
+LightFooterA.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightFooterA;

src/blocks/footer/light/b.js

@@ -0,0 +1,186 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightFooterB(props) {
+  return (
+    <footer className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-no-wrap flex-wrap flex-col">
+        <div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left md:mt-0 mt-10">
+          <a href className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
+              viewBox="0 0 24 24"
+            >
+              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+            </svg>
+            <span className="ml-3 text-xl">madde</span>
+          </a>
+          <p className="mt-2 text-sm text-gray-500">
+            Air plant banjo lyft occupy retro adaptogen indego
+          </p>
+        </div>
+        <div className="flex-grow flex flex-wrap md:pr-20 -mb-10 md:text-left text-center order-first">
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/4 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+        </div>
+      </div>
+      <div className="bg-gray-200">
+        <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
+          <p className="text-gray-500 text-sm text-center sm:text-left">
+            © 2020 madde —
+            <a href="https://twitter.com/knyttneve" rel="noopener noreferrer" className="text-gray-600 ml-1" target="_blank">
+              @knyttneve
+            </a>
+          </p>
+          <span className="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
+            <a href className="text-gray-500">
+              <svg
+                fill="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-500">
+              <svg
+                fill="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-500">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+                <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-500">
+              <svg
+                fill="currentColor"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="0"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke="none"
+                  d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
+                 />
+                <circle cx="4" cy="4" r="2" stroke="none" />
+              </svg>
+            </a>
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+LightFooterB.defaultProps = {
+  theme: 'indigo'
+};
+
+LightFooterB.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightFooterB;

src/blocks/footer/light/c.js

@@ -0,0 +1,225 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightFooterC(props) {
+  return (
+    <footer className="text-gray-700 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="flex flex-wrap md:text-left text-center -mb-10 -mx-4">
+          <div className="lg:w-1/6 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/6 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/6 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/6 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/6 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+          <div className="lg:w-1/6 md:w-1/2 w-full px-4">
+            <h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
+              CATEGORIES
+            </h2>
+            <nav className="list-none mb-10">
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">First Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Second Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Third Link</a>
+              </li>
+              <li>
+                <a href className="text-gray-600 hover:text-gray-800">Fourth Link</a>
+              </li>
+            </nav>
+          </div>
+        </div>
+      </div>
+      <div className="border-t border-gray-200">
+        <div className="container px-5 py-8 flex flex-wrap mx-auto items-center">
+          <div className="flex md:flex-no-wrap flex-wrap justify-center md:justify-start">
+            <input
+              className={`sm:w-64 w-40 bg-gray-100 rounded sm:mr-4 mr-2 border border-gray-400 focus:outline-none focus:border-${props.theme}-500 text-base py-2 px-4`}
+              placeholder="Placeholder"
+              type="text"
+            />
+            <button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
+              Button
+            </button>
+            <p className="text-gray-500 text-sm md:ml-6 md:mt-0 mt-2 sm:text-left text-center">
+              Bitters chicharrones fanny pack
+              <br className="lg:block hidden"></br>waistcoat green juice
+            </p>
+          </div>
+          <span className="inline-flex lg:ml-auto lg:mt-0 mt-6 w-full justify-center md:justify-start md:w-auto">
+            <a href className="text-gray-500">
+              <svg
+                fill="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-500">
+              <svg
+                fill="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-500">
+              <svg
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+                <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
+              </svg>
+            </a>
+            <a href className="ml-3 text-gray-500">
+              <svg
+                fill="currentColor"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="0"
+                className="w-5 h-5"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke="none"
+                  d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
+                 />
+                <circle cx="4" cy="4" r="2" stroke="none" />
+              </svg>
+            </a>
+          </span>
+        </div>
+      </div>
+      <div className="bg-gray-200">
+        <div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
+          <p className="text-gray-500 text-sm text-center sm:text-left">
+            © 2020 madde —
+            <a href="https://twitter.com/knyttneve" className="text-gray-600 ml-1" target="_blank" rel="noopener noreferrer">
+              @knyttneve
+            </a>
+          </p>
+          <span className="sm:ml-auto sm:mt-0 mt-2 sm:w-auto w-full sm:text-left text-center text-gray-500 text-sm">
+            Enamel pin tousled raclette tacos irony
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+LightFooterC.defaultProps = {
+  theme: 'indigo'
+};
+
+LightFooterC.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightFooterC;

src/blocks/footer/light/d.js

@@ -0,0 +1,99 @@
+import React from "react";
+import PropTypes from  "prop-types";
+
+function LightFooterD(props) {
+  return (
+    <footer className="text-gray-700 body-font">
+      <div className="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
+        <a href className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            className={`w-10 h-10 text-white p-2 bg-${props.theme}-500 rounded-full`}
+            viewBox="0 0 24 24"
+          >
+            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+          </svg>
+          <span class="ml-3 text-xl">madde</span>
+        </a>
+        <p className="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">
+          © 2020 madde —
+          <a href="https://twitter.com/knyttneve" className="text-gray-600 ml-1" rel="noopener noreferrer" target="_blank">
+            @knyttneve
+          </a>
+        </p>
+        <span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
+          <a href className="text-gray-500">
+            <svg
+              fill="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="w-5 h-5"
+              viewBox="0 0 24 24"
+            >
+              <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
+            </svg>
+          </a>
+          <a href className="ml-3 text-gray-500">
+            <svg
+              fill="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="w-5 h-5"
+              viewBox="0 0 24 24"
+            >
+              <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
+            </svg>
+          </a>
+          <a href className="ml-3 text-gray-500">
+            <svg
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="w-5 h-5"
+              viewBox="0 0 24 24"
+            >
+              <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+              <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
+            </svg>
+          </a>
+          <a href className="ml-3 text-gray-500">
+            <svg
+              fill="currentColor"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="0"
+              className="w-5 h-5"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke="none"
+                d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
+               />
+              <circle cx="4" cy="4" r="2" stroke="none" />
+            </svg>
+          </a>
+        </span>
+      </div>
+    </footer>
+  );
+}
+
+LightFooterD.defaultProps = {
+  theme: 'indigo'
+};
+
+LightFooterD.propTypes = {
+  theme: PropTypes.string.isRequired
+};
+
+export default LightFooterD;