Showing preview only (905K chars total). Download the full file or copy to clipboard to get everything.
Repository: mertJF/tailblocks
Branch: master
Commit: 34943e63da6a
Files: 207
Total size: 851.1 KB
Directory structure:
gitextract_quo_pmco/
├── .github/
│ └── FUNDING.yml
├── .gitignore
├── CNAME
├── LICENSE
├── README.md
├── package.json
├── public/
│ ├── ads.txt
│ ├── index.html
│ ├── manifest.json
│ └── robots.txt
└── src/
├── App.js
├── App.test.js
├── blocks/
│ ├── blog/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ ├── c.js
│ │ │ ├── d.js
│ │ │ └── e.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ └── e.js
│ ├── contact/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ └── c.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── content/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ ├── c.js
│ │ │ ├── d.js
│ │ │ ├── e.js
│ │ │ ├── f.js
│ │ │ ├── g.js
│ │ │ └── h.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ ├── e.js
│ │ ├── f.js
│ │ ├── g.js
│ │ └── h.js
│ ├── cta/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ ├── c.js
│ │ │ └── d.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ └── d.js
│ ├── ecommerce/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ └── c.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── feature/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ ├── c.js
│ │ │ ├── d.js
│ │ │ ├── e.js
│ │ │ ├── f.js
│ │ │ ├── g.js
│ │ │ └── h.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ ├── e.js
│ │ ├── f.js
│ │ ├── g.js
│ │ └── h.js
│ ├── footer/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ ├── c.js
│ │ │ ├── d.js
│ │ │ └── e.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ └── e.js
│ ├── gallery/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ └── c.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── header/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ ├── c.js
│ │ │ └── d.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ └── d.js
│ ├── hero/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ ├── c.js
│ │ │ ├── d.js
│ │ │ ├── e.js
│ │ │ └── f.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ ├── e.js
│ │ └── f.js
│ ├── index.js
│ ├── pricing/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ └── b.js
│ │ └── light/
│ │ ├── a.js
│ │ └── b.js
│ ├── statistic/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ └── c.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── step/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ └── c.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── team/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ └── c.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ └── testimonial/
│ ├── dark/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ └── light/
│ ├── a.js
│ ├── b.js
│ └── c.js
├── icons/
│ ├── blog/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ └── e.js
│ ├── contact/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── content/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ ├── e.js
│ │ ├── f.js
│ │ ├── g.js
│ │ └── h.js
│ ├── cta/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ └── d.js
│ ├── ecommerce/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── feature/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ ├── e.js
│ │ ├── f.js
│ │ ├── g.js
│ │ └── h.js
│ ├── footer/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ └── e.js
│ ├── gallery/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── header/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ └── d.js
│ ├── hero/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ ├── e.js
│ │ └── f.js
│ ├── index.js
│ ├── pricing/
│ │ ├── a.js
│ │ └── b.js
│ ├── statistic/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── step/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── team/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ └── testimonial/
│ ├── a.js
│ ├── b.js
│ └── c.js
├── index.css
├── index.js
├── serviceWorker.js
└── setupTests.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/FUNDING.yml
================================================
patreon: mertcukuren
================================================
FILE: .gitignore
================================================
node_modules
yarn.lock
build
================================================
FILE: CNAME
================================================
tailblocks.cc
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2020 Mert Cukuren
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
================================================
FILE: README.md
================================================
# Tailblocks
### Ready-to-use Tailwind CSS blocks
##### Features
* 60+ Blocks
* Responsive
* Dark Mode Support
* Color Variations
## How to use this project
[](https://tailblocks.cc)
This project provides multiple blocks built using [Tailwind
CSS](https://tailwindcss.com/) that you can use in your own projects. This
project is not a dependency that you add to your project, but instead provides
you with HTML that you can easily copy and paste into your own project.
To use the project:
1. Go to the [Tailblocks](https://tailblocks.cc)
1. Select a block that you would like to use.
1. Choose a color from the color palette for the block you selected.
1. Select whether you would like to use light or dark mode with the dark/light toggle button.
1. Click the "View Code" button.
1. Copy/paste into your project.
1. 🎉
## License
Code copyright 2020 Mert Cukuren. Code released under [the MIT license](https://github.com/mertjf/tailblocks/blob/master/LICENSE).
================================================
FILE: package.json
================================================
{
"name": "tailblocks",
"homepage": "https://tailblocks.cc",
"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.4.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"
}
}
================================================
FILE: public/ads.txt
================================================
google.com, pub-7764280421704625, DIRECT, f08c47fec0942fa0
================================================
FILE: public/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Ready-to-use Tailwind CSS blocks"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/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>Tailblocks — Ready-to-use Tailwind CSS 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>
================================================
FILE: public/manifest.json
================================================
{
"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"
}
================================================
FILE: public/robots.txt
================================================
# https://www.robotstxt.org/robotstxt.html
User-agent: *
================================================
FILE: src/App.js
================================================
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 blockListArr = [];
Object.entries(iconList).forEach(([type, icons]) => {
Object.keys(icons).map(name => blockListArr.push(`${name},${type}`));
});
const themeList = ["indigo", "yellow", "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 clipboardIcon = (
<svg
viewBox="0 0 25 24"
stroke="currentColor"
strokeWidth={2}
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M19.914 1h-18v19"/>
<path d="M6 5v18h18V5z"/>
</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,
copied: false,
sidebar: true,
codeView: false,
currentKeyCode: null,
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.copyToClipboard = this.copyToClipboard.bind(this);
this.keyboardNavigation = this.keyboardNavigation.bind(this);
this.markupRef = React.createRef();
this.textareaRef = React.createRef();
this.sidebarRef = React.createRef();
this.openerRef = React.createRef();
}
componentDidMount() {
document.addEventListener('keydown', this.keyboardNavigation);
}
hideSidebar() {
const sidebar = this.sidebarRef.current;
const opener = this.openerRef.current;
document.addEventListener('click', (e) => {
if (e.target === opener) {
return;
}
if ((!e.target === sidebar || !sidebar.contains(e.target))) {
this.setState({ sidebar: false });
}
});
}
keyboardNavigation(e) {
const { blockType, blockName } = this.state;
const blockStringFormat = `${blockName},${blockType}`;
const keyCode = e.which || e.keyCode;
switch (keyCode) {
case 40: // Down
e.preventDefault();
blockListArr.forEach((block, index) => {
if (block === blockStringFormat) {
const newActiveBlock = index + 1 <= blockListArr.length - 1 ? blockListArr[index + 1].split(',') : blockListArr[0].split(',');
const newBlockName = newActiveBlock[0];
const newBlockType = newActiveBlock[1];
const newBlockNode = document.querySelector(`.block-item[block-name="${newBlockName}"]`);
if (newBlockNode) newBlockNode.focus();
this.setState({
blockType: newBlockType,
blockName: newBlockName,
codeView: false,
currentKeyCode: 40
});
}
});
break;
case 37: // Left
e.preventDefault();
this.setState({ sidebar: false, currentKeyCode: 37 });
break;
case 39: // Right
e.preventDefault();
this.setState({ sidebar: true, currentKeyCode: 39 });
break;
case 38: // Up
e.preventDefault();
blockListArr.forEach((block, index) => {
if (block === blockStringFormat) {
const newActiveBlock = index - 1 >= 0 ? blockListArr[index - 1].split(',') : blockListArr[blockListArr.length - 1].split(',');
const newBlockName = newActiveBlock[0];
const newBlockType = newActiveBlock[1];
const newBlockNode = document.querySelector(`.block-item[block-name="${newBlockName}"]`);
if (newBlockNode) newBlockNode.focus();
this.setState({
blockType: newBlockType,
blockName: newBlockName,
codeView: false,
currentKeyCode: 38
});
}
});
break;
default:
return;
}
setTimeout(() => {
if (keyCode === 37 || keyCode === 38 || keyCode === 39 || keyCode === 40) {
this.setState({ currentKeyCode: null })
}
}, 200);
}
changeMode() {
this.setState({ darkMode: !this.state.darkMode })
}
handleContentDidMount() {
const iframe = document.querySelector('iframe');
iframe.contentWindow.document.addEventListener('keydown', this.keyboardNavigation);
iframe.contentWindow.document.addEventListener('click', () => this.setState({ sidebar: false }));
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() {
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} onKeyDown={this.keyboardNavigation} 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]} tabIndex="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 });
}
copyToClipboard() {
const code = this.beautifyHTML(this.state.markup);
var input = document.createElement('textarea');
input.innerHTML = code;
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input);
this.setState({copied: true});
setTimeout(() => {
this.setState({
copied: false
})
}, 2000);
}
render() {
const { darkMode, theme, blockName, blockType, sidebar, view, copied, currentKeyCode } = this.state;
return (
<div className={`app${darkMode ? ' dark-mode' : ''}${sidebar ? ' has-sidebar' : ''} ${theme} ${view}`}>
<textarea className="copy-textarea" ref={this.textareaRef} />
<aside className="sidebar" ref={this.sidebarRef}>
{this.listRenderer()}
</aside>
<div className="toolbar">
<button className="opener" onClick={this.toggleSidebar} ref={this.openerRef}>TAILBLOCKS</button>
{this.state.codeView &&
<div className="clipboard-wrapper">
<button className="copy-the-block copy-to-clipboard" onClick={this.copyToClipboard}>
{clipboardIcon}
<span>COPY TO CLIPBOARD</span>
</button>
<span className={`clipboard-tooltip${copied ? ' is-copied ' : ''}`} >Copied!</span>
</div>
}
<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/2.0.2/tailwind.min.css" rel="stylesheet" />
{
<style dangerouslySetInnerHTML={{__html:
`img { filter:
${darkMode ?
'invert(1) opacity(.5); mix-blend-mode: luminosity; }'
:
'sepia(1) hue-rotate(190deg) opacity(.46) 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>
<a href="https://github.com/mertJF/tailblocks" className="github" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M12 .5C5.37.5 0 5.78 0 12.292c0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56C20.565 21.917 24 17.495 24 12.292 24 5.78 18.627.5 12 .5z"
/>
</svg>
GitHub
</a>
<div className="keyboard-nav">
<div className={`k-up keyboard-button${currentKeyCode === 38 ? ' is-active' : ''}`} data-info="Previous block">
<svg stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
<path d="M12 19V5M5 12l7-7 7 7"/>
</svg>
</div>
<div className="keyboard-nav-row">
<div className={`k-left keyboard-button${currentKeyCode === 37 ? ' is-active' : ''}`} data-info="Hide sidebar">
<svg stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
<path d="M19 12H5M12 19l-7-7 7-7"/>
</svg>
</div>
<div className={`k-down keyboard-button${currentKeyCode === 40 ? ' is-active' : ''}`} data-info="Next block">
<svg stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
<path d="M12 5v14M19 12l-7 7-7-7"/>
</svg>
</div>
<div className={`k-right keyboard-button${currentKeyCode === 39 ? ' is-active' : ''}`} data-info="Show sidebar">
<svg stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</div>
</div>
</div>
</div>
);
}
}
export default App;
================================================
FILE: src/App.test.js
================================================
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();
});
================================================
FILE: src/blocks/blog/dark/a.js
================================================
import React from 'react';
import PropTypes from "prop-types";
function DarkBlogA(props) {
return (
<section className="text-gray-400 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}-400 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-500 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-500 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}-400 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-500 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-500 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}-400 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-500 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-500 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;
================================================
FILE: src/blocks/blog/dark/b.js
================================================
import React from 'react';
import PropTypes from "prop-types";
function DarkBlogB(props) {
return (
<section className="text-gray-400 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 bg-opacity-40 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-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}-400 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-500 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-700 border-opacity-50">
<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-500 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 bg-opacity-40 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-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}-400 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-500 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-700 border-opacity-50">
<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-500 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 bg-opacity-40 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-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}-400 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-500 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-700 border-opacity-50">
<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-500 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;
================================================
FILE: src/blocks/blog/dark/c.js
================================================
import React from 'react';
import PropTypes from "prop-types";
function DarkBlogC(props) {
return (
<section className="text-gray-400 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-2 rounded bg-gray-800 text-gray-400 text-opacity-75 text-xs 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 border-opacity-75 mt-auto w-full">
<a href className={`text-${props.theme}-400 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-500 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-500 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-500 text-xs tracking-widest mt-0.5">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-2 rounded bg-gray-800 text-gray-400 text-opacity-75 text-xs 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 border-opacity-75 mt-auto w-full">
<a href className={`text-${props.theme}-400 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-500 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-500 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-500 text-xs tracking-widest mt-0.5">DESIGNER</span>
</span>
</a>
</div>
</div>
</div>
</section>
)
}
DarkBlogC.defaultProps = {
theme: 'indigo'
};
DarkBlogC.propTypes = {
theme: PropTypes.string.isRequired
};
export default DarkBlogC;
================================================
FILE: src/blocks/blog/dark/d.js
================================================
import React from 'react';
import PropTypes from "prop-types";
function DarkBlogD(props) {
return (
<section className="text-gray-400 bg-gray-900 body-font overflow-hidden">
<div className="container px-5 py-24 mx-auto">
<div className="-my-8 divide-y-2 divide-gray-800">
<div className="py-8 flex flex-wrap md:flex-nowrap">
<div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
<span className="font-semibold title-font text-white">
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-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}-400 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-nowrap">
<div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
<span className="font-semibold title-font text-white">
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-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}-400 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-nowrap">
<div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
<span className="font-semibold title-font text-white">
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-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}-400 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;
================================================
FILE: src/blocks/blog/dark/e.js
================================================
import React from 'react';
import PropTypes from "prop-types";
function DarkBlogE(props) {
return (
<section className="text-gray-400 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-400 pb-2 mb-2 border-b-2 border-gray-700">
Jul
</span>
<span className="font-medium text-lg leading-none 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}-400 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-400 pb-2 mb-2 border-b-2 border-gray-700">
Jul
</span>
<span className="font-medium text-lg leading-none 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}-400 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-400 pb-2 mb-2 border-b-2 border-gray-700">
Jul
</span>
<span className="font-medium text-lg leading-none 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}-400 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;
================================================
FILE: src/blocks/blog/light/a.js
================================================
import React from 'react';
import PropTypes from "prop-types";
function LightBlogA(props) {
return (
<section className="text-gray-600 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 border-opacity-60 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-400 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-400 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-200">
<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-400 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 border-opacity-60 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-400 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-400 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-200">
<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-400 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 border-opacity-60 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-400 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-400 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-200">
<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-400 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;
================================================
FILE: src/blocks/blog/light/b.js
================================================
import React from 'react';
import PropTypes from "prop-types";
function LightBlogB(props) {
return (
<section className="text-gray-600 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-100 bg-opacity-75 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-400 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-400 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-200">
<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-400 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-100 bg-opacity-75 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-400 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-400 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-200">
<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-400 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-100 bg-opacity-75 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-400 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-400 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-200">
<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-400 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;
================================================
FILE: src/blocks/blog/light/c.js
================================================
import React from 'react';
import PropTypes from "prop-types";
function LightBlogC(props) {
return (
<section className="text-gray-600 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-2 rounded bg-${props.theme}-50 text-${props.theme}-500 text-xs 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-100 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-400 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200">
<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-400 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-400 text-xs tracking-widest mt-0.5">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-2 rounded bg-${props.theme}-50 text-${props.theme}-500 text-xs 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-100 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-400 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200">
<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-400 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-400 text-xs tracking-widest mt-0.5">DESIGNER</span>
</span>
</a>
</div>
</div>
</div>
</section>
)
}
LightBlogC.defaultProps = {
theme: 'indigo'
};
LightBlogC.propTypes = {
theme: PropTypes.string.isRequired
};
export default LightBlogC;
================================================
FILE: src/blocks/blog/light/d.js
================================================
import React from 'react';
import PropTypes from "prop-types";
function LightBlogD(props) {
return (
<section className="text-gray-600 body-font overflow-hidden">
<div className="container px-5 py-24 mx-auto">
<div className="-my-8 divide-y-2 divide-gray-100">
<div className="py-8 flex flex-wrap md:flex-nowrap">
<div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
<span className="font-semibold title-font text-gray-700">
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 flex-wrap md:flex-nowrap">
<div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
<span className="font-semibold title-font text-gray-700">
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 flex-wrap md:flex-nowrap">
<div className="md:w-64 md:mb-0 mb-6 flex-shrink-0 flex flex-col">
<span className="font-semibold title-font text-gray-700">
CATEGORY
</span>
<span className="text-sm text-gray-500">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;
================================================
FILE: src/blocks/blog/light/e.js
================================================
import React from 'react';
import PropTypes from "prop-types";
function LightBlogE(props) {
return (
<section className="text-gray-600 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-200">
Jul
</span>
<span className="font-medium text-lg text-gray-800 title-font leading-none">
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-200">
Jul
</span>
<span className="font-medium text-lg text-gray-800 title-font leading-none">
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-200">
Jul
</span>
<span className="font-medium text-lg text-gray-800 title-font leading-none">
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;
================================================
FILE: src/blocks/contact/dark/a.js
================================================
import React from "react";
import PropTypes from "prop-types";
function DarkContactA(props) {
return (
<section className="text-gray-400 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%&height=600&hl=en&q=%C4%B0zmir+(My%20Business%20Name)&ie=UTF8&t=&z=14&iwloc=B&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 shadow-md 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">
Post-ironic portland shabby chic echo park, banjo fashion axe
</p>
<div className="relative mb-4">
<label
htmlFor="email"
className="leading-7 text-sm text-gray-400"
>
Email
</label>
<input
type="email"
id="email"
name="email"
className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
<div className="relative mb-4">
<label
htmlFor="message"
className="leading-7 text-sm text-gray-400"
>
Message
</label>
<textarea
id="message"
name="message"
className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
></textarea>
</div>
<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-400 text-opacity-90 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;
================================================
FILE: src/blocks/contact/dark/b.js
================================================
import React from "react";
import PropTypes from "prop-types";
function DarkContactB(props) {
return (
<section className="text-gray-400 bg-gray-900 body-font relative">
<div className="container px-5 py-24 mx-auto flex sm:flex-nowrap 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%&height=600&hl=en&q=%C4%B0zmir+(My%20Business%20Name)&ie=UTF8&t=&z=14&iwloc=B&output=embed"
/>
<div className="bg-gray-900 relative flex flex-wrap py-6 rounded shadow-md">
<div className="lg:w-1/2 px-6">
<h2 className="title-font font-semibold text-white tracking-widest text-xs">
ADDRESS
</h2>
<p className="mt-1">
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-semibold text-white tracking-widest text-xs">
EMAIL
</h2>
<a href className={`text-${props.theme}-400 leading-relaxed`}>
example@email.com
</a>
<h2 className="title-font font-semibold text-white tracking-widest text-xs 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">
Post-ironic portland shabby chic echo park, banjo fashion axe
</p>
<div className="relative mb-4">
<label
htmlFor="name"
className="leading-7 text-sm text-gray-400"
>
Name
</label>
<input
type="text"
id="name"
name="name"
className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
<div className="relative mb-4">
<label
htmlFor="email"
className="leading-7 text-sm text-gray-400"
>
Email
</label>
<input
type="email"
id="email"
name="email"
className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
<div className="relative mb-4">
<label
htmlFor="message"
className="leading-7 text-sm text-gray-400"
>
Message
</label>
<textarea
id="message"
name="message"
className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
></textarea>
</div>
<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-400 text-opacity-90 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;
================================================
FILE: src/blocks/contact/dark/c.js
================================================
import React from "react";
import PropTypes from "prop-types";
function DarkContactC(props) {
return (
<section className="text-gray-400 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">
<div className="relative">
<label
htmlFor="name"
className="leading-7 text-sm text-gray-400"
>
Name
</label>
<input
type="text"
id="name"
name="name"
className={`w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-${props.theme}-500 focus:bg-gray-900 focus:ring-2 focus:ring-${props.theme}-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
</div>
<div className="p-2 w-1/2">
<div className="relative">
<label
htmlFor="email"
className="leading-7 text-sm text-gray-400"
>
Email
</label>
<input
type="email"
id="email"
name="email"
className={`w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-${props.theme}-500 focus:bg-gray-900 focus:ring-2 focus:ring-${props.theme}-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
</div>
<div className="p-2 w-full">
<div className="relative">
<label
htmlFor="message"
className="leading-7 text-sm text-gray-400"
>
Message
</label>
<textarea
id="message"
name="message"
className={`w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-${props.theme}-500 focus:bg-gray-900 focus:ring-2 focus:ring-${props.theme}-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
></textarea>
</div>
</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}-400`}>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;
================================================
FILE: src/blocks/contact/light/a.js
================================================
import React from "react";
import PropTypes from "prop-types";
function LightContactA(props) {
return (
<section className="text-gray-600 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%&height=600&hl=en&q=%C4%B0zmir+(My%20Business%20Name)&ie=UTF8&t=&z=14&iwloc=B&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 shadow-md">
<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>
<div className="relative mb-4">
<label
htmlFor="email"
className="leading-7 text-sm text-gray-600"
>
Email
</label>
<input
type="email"
id="email"
name="email"
className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
<div className="relative mb-4">
<label
htmlFor="message"
className="leading-7 text-sm text-gray-600"
>
Message
</label>
<textarea
id="message"
name="message"
className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
></textarea>
</div>
<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;
================================================
FILE: src/blocks/contact/light/b.js
================================================
import React from "react";
import PropTypes from "prop-types";
function LightContactB(props) {
return (
<section className="text-gray-600 body-font relative">
<div className="container px-5 py-24 mx-auto flex sm:flex-nowrap 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%&height=600&hl=en&q=%C4%B0zmir+(My%20Business%20Name)&ie=UTF8&t=&z=14&iwloc=B&output=embed"
/>
<div className="bg-white relative flex flex-wrap py-6 rounded shadow-md">
<div className="lg:w-1/2 px-6">
<h2 className="title-font font-semibold text-gray-900 tracking-widest text-xs">
ADDRESS
</h2>
<p className="mt-1">
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-semibold text-gray-900 tracking-widest text-xs">
EMAIL
</h2>
<a href className={`text-${props.theme}-500 leading-relaxed`}>
example@email.com
</a>
<h2 className="title-font font-semibold text-gray-900 tracking-widest text-xs 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>
<div className="relative mb-4">
<label
htmlFor="name"
className="leading-7 text-sm text-gray-600"
>
Name
</label>
<input
type="text"
id="name"
name="name"
className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
<div className="relative mb-4">
<label
htmlFor="email"
className="leading-7 text-sm text-gray-600"
>
Email
</label>
<input
type="email"
id="email"
name="email"
className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
<div className="relative mb-4">
<label
htmlFor="message"
className="leading-7 text-sm text-gray-600"
>
Message
</label>
<textarea
id="message"
name="message"
className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
></textarea>
</div>
<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;
================================================
FILE: src/blocks/contact/light/c.js
================================================
import React from "react";
import PropTypes from "prop-types";
function LightContactC(props) {
return (
<section className="text-gray-600 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">
<div className="relative">
<label
htmlFor="name"
className="leading-7 text-sm text-gray-600"
>
Name
</label>
<input
type="text"
id="name"
name="name"
className={`w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-${props.theme}-500 focus:bg-white focus:ring-2 focus:ring-${props.theme}-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
</div>
<div className="p-2 w-1/2">
<div className="relative">
<label
htmlFor="email"
className="leading-7 text-sm text-gray-600"
>
Email
</label>
<input
type="email"
id="email"
name="email"
className={`w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-${props.theme}-500 focus:bg-white focus:ring-2 focus:ring-${props.theme}-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
</div>
<div className="p-2 w-full">
<div className="relative">
<label
htmlFor="message"
className="leading-7 text-sm text-gray-600"
>
Message
</label>
<textarea
id="message"
name="message"
className={`w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-${props.theme}-500 focus:bg-white focus:ring-2 focus:ring-${props.theme}-200 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
></textarea>
</div>
</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;
================================================
FILE: src/blocks/content/dark/a.js
================================================
import React from "react";
import PropTypes from "prop-types";
function DarkContentA(props) {
return (
<section className="text-gray-400 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}-400 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'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}-400 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}-400 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}-400 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}-400 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;
================================================
FILE: src/blocks/content/dark/b.js
================================================
import React from "react";
import PropTypes from "prop-types";
function DarkContentB(props) {
return (
<section className="text-gray-400 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-gray-400 text-opacity-90">
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
gentrify, subway tile poke farm-to-table. Franzen you probably
haven'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 bg-opacity-40 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}-400 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 bg-opacity-40 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}-400 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 bg-opacity-40 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}-400 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 bg-opacity-40 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}-400 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;
================================================
FILE: src/blocks/content/dark/c.js
================================================
import React from "react";
import PropTypes from "prop-types";
function DarkContentC(props) {
return (
<section className="text-gray-400 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-opacity-80">
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-700 border-opacity-75 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-700 border-opacity-75 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-700 border-opacity-75 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-700 border-opacity-75 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-700 border-opacity-75 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-700 border-opacity-75 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;
================================================
FILE: src/blocks/content/dark/d.js
================================================
import React from "react";
import PropTypes from "prop-types";
function DarkContentD(props) {
return (
<section className="text-gray-400 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}-400 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-semibold text-white tracking-wider 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;
================================================
FILE: src/blocks/content/dark/e.js
================================================
import React from "react";
import PropTypes from "prop-types";
function DarkContentE(props) {
return (
<section className="text-gray-400 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}-400 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;
================================================
FILE: src/blocks/content/dark/f.js
================================================
import React from "react";
import PropTypes from "prop-types";
function DarkContentF(props) {
return (
<section className="text-gray-400 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-400">
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'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}-400 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;
================================================
FILE: src/blocks/content/dark/g.js
================================================
import React from "react";
import PropTypes from "prop-types";
function DarkContentG(props) {
return (
<section className="text-gray-400 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;
================================================
FILE: src/blocks/content/dark/h.js
================================================
import React from "react";
import PropTypes from "prop-types";
function DarkContentH(props) {
return (
<section className="text-gray-400 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}-400 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}-400 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}-400 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;
================================================
FILE: src/blocks/content/light/a.js
================================================
import React from "react";
import PropTypes from "prop-types";
function LightContentA(props) {
return (
<section className="text-gray-600 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'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 border-opacity-60">
<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 border-opacity-60">
<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 border-opacity-60">
<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 border-opacity-60">
<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;
================================================
FILE: src/blocks/content/light/b.js
================================================
import React from "react";
import PropTypes from "prop-types";
function LightContentB(props) {
return (
<section className="text-gray-600 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-gray-500">
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical
gentrify, subway tile poke farm-to-table. Franzen you probably
haven'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;
================================================
FILE: src/blocks/content/light/c.js
================================================
import React from "react";
import PropTypes from "prop-types";
function LightContentC(props) {
return (
<section className="text-gray-600 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-gray-500">
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-200 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-200 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-200 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-200 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-200 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-200 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;
================================================
FILE: src/blocks/content/light/d.js
================================================
import React from "react";
import PropTypes from "prop-types";
function LightContentD(props) {
return (
<section className="text-gray-600 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-200">
<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-semibold text-gray-800 tracking-wider 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;
================================================
FILE: src/blocks/content/light/e.js
================================================
import React from "react";
import PropTypes from "prop-types";
function LightContentE(props) {
return (
<section className="text-gray-600 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;
================================================
FILE: src/blocks/content/light/f.js
================================================
import React from "react";
import PropTypes from "prop-types";
function LightContentF(props) {
return (
<section className="text-gray-600 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">
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-200 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'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;
================================================
FILE: src/blocks/content/light/g.js
================================================
import React from "react";
import PropTypes from "prop-types";
function LightContentG(props) {
return (
<section className="text-gray-600 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;
================================================
FILE: src/blocks/content/light/h.js
================================================
import React from "react";
import PropTypes from "prop-types";
function LightContentH(props) {
return (
<section className="text-gray-600 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;
================================================
FILE: src/blocks/cta/dark/a.js
================================================
import React from "react";
import PropTypes from "prop-types";
function DarkCTAA(props) {
return (
<section className="text-gray-400 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;
================================================
FILE: src/blocks/cta/dark/b.js
================================================
import React from "react";
import PropTypes from "prop-types";
function DarkCTAB(props) {
return (
<section className="text-gray-400 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 bg-opacity-50 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>
<div className="relative mb-4">
<label
htmlFor="full-name"
className="leading-7 text-sm text-gray-400"
>
Full Name
</label>
<input
type="text"
id="full-name"
name="full-name"
className={`w-full bg-gray-600 bg-opacity-20 focus:bg-transparent focus:ring-2 focus:ring-${props.theme}-900 rounded border border-gray-600 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
<div className="relative mb-4">
<label
htmlFor="email"
className="leading-7 text-sm text-gray-400"
>
Email
</label>
<input
type="email"
id="email"
name="email"
className={`w-full bg-gray-600 bg-opacity-20 focus:bg-transparent focus:ring-2 focus:ring-${props.theme}-900 rounded border border-gray-600 focus:border-${props.theme}-500 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
<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 mt-3">
Literally you probably haven't heard of them jean shorts.
</p>
</div>
</div>
</section>
);
}
DarkCTAB.defaultProps = {
theme: 'indigo'
};
DarkCTAB.propTypes = {
theme: PropTypes.string.isRequired
};
export default DarkCTAB;
================================================
FILE: src/blocks/cta/dark/c.js
================================================
import React from "react";
import PropTypes from "prop-types";
function DarkCTAC(props) {
return (
<section className="text-gray-400 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'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 items-end sm:space-x-4 sm:space-y-0 space-y-4">
<div className="relative sm:mb-0 flex-grow w-full">
<label
htmlFor="full-name"
className="leading-7 text-sm text-gray-400"
>
Full Name
</label>
<input
type="text"
id="full-name"
name="full-name"
className={`w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-900 focus:bg-transparent text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
<div className="relative sm:mb-0 flex-grow w-full">
<label
htmlFor="email"
className="leading-7 text-sm text-gray-400"
>
Email
</label>
<input
type="email"
id="email"
name="email"
className={`w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-${props.theme}-500 focus:ring-2 focus:ring-${props.theme}-900 focus:bg-transparent text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
<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;
================================================
FILE: src/blocks/cta/dark/d.js
================================================
import React from "react";
import PropTypes from "prop-types";
function DarkCTAD(props) {
return (
<section className="text-gray-400 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}-400 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 space-x-4">
<button className="bg-gray-800 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-700 hover:bg-opacity-50 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>
gitextract_quo_pmco/
├── .github/
│ └── FUNDING.yml
├── .gitignore
├── CNAME
├── LICENSE
├── README.md
├── package.json
├── public/
│ ├── ads.txt
│ ├── index.html
│ ├── manifest.json
│ └── robots.txt
└── src/
├── App.js
├── App.test.js
├── blocks/
│ ├── blog/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ ├── c.js
│ │ │ ├── d.js
│ │ │ └── e.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ └── e.js
│ ├── contact/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ └── c.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── content/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ ├── c.js
│ │ │ ├── d.js
│ │ │ ├── e.js
│ │ │ ├── f.js
│ │ │ ├── g.js
│ │ │ └── h.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ ├── e.js
│ │ ├── f.js
│ │ ├── g.js
│ │ └── h.js
│ ├── cta/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ ├── c.js
│ │ │ └── d.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ └── d.js
│ ├── ecommerce/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ └── c.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── feature/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ ├── c.js
│ │ │ ├── d.js
│ │ │ ├── e.js
│ │ │ ├── f.js
│ │ │ ├── g.js
│ │ │ └── h.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ ├── e.js
│ │ ├── f.js
│ │ ├── g.js
│ │ └── h.js
│ ├── footer/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ ├── c.js
│ │ │ ├── d.js
│ │ │ └── e.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ └── e.js
│ ├── gallery/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ └── c.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── header/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ ├── c.js
│ │ │ └── d.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ └── d.js
│ ├── hero/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ ├── c.js
│ │ │ ├── d.js
│ │ │ ├── e.js
│ │ │ └── f.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ ├── e.js
│ │ └── f.js
│ ├── index.js
│ ├── pricing/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ └── b.js
│ │ └── light/
│ │ ├── a.js
│ │ └── b.js
│ ├── statistic/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ └── c.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── step/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ └── c.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── team/
│ │ ├── dark/
│ │ │ ├── a.js
│ │ │ ├── b.js
│ │ │ └── c.js
│ │ └── light/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ └── testimonial/
│ ├── dark/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ └── light/
│ ├── a.js
│ ├── b.js
│ └── c.js
├── icons/
│ ├── blog/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ └── e.js
│ ├── contact/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── content/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ ├── e.js
│ │ ├── f.js
│ │ ├── g.js
│ │ └── h.js
│ ├── cta/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ └── d.js
│ ├── ecommerce/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── feature/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ ├── e.js
│ │ ├── f.js
│ │ ├── g.js
│ │ └── h.js
│ ├── footer/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ └── e.js
│ ├── gallery/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── header/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ └── d.js
│ ├── hero/
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ │ ├── e.js
│ │ └── f.js
│ ├── index.js
│ ├── pricing/
│ │ ├── a.js
│ │ └── b.js
│ ├── statistic/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── step/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ ├── team/
│ │ ├── a.js
│ │ ├── b.js
│ │ └── c.js
│ └── testimonial/
│ ├── a.js
│ ├── b.js
│ └── c.js
├── index.css
├── index.js
├── serviceWorker.js
└── setupTests.js
SYMBOL INDEX (213 symbols across 193 files)
FILE: src/App.js
class App (line 88) | class App extends Component {
method constructor (line 89) | constructor(props) {
method componentDidMount (line 120) | componentDidMount() {
method hideSidebar (line 124) | hideSidebar() {
method keyboardNavigation (line 139) | keyboardNavigation(e) {
method changeMode (line 201) | changeMode() {
method handleContentDidMount (line 205) | handleContentDidMount() {
method beautifyHTML (line 218) | beautifyHTML(codeStr) {
method changeBlock (line 247) | changeBlock(e) {
method changeTheme (line 257) | changeTheme(e) {
method changeView (line 263) | changeView(e) {
method toggleView (line 269) | toggleView() {
method themeListRenderer (line 273) | themeListRenderer() {
method listRenderer (line 280) | listRenderer() {
method viewModeRenderer (line 292) | viewModeRenderer() {
method toggleSidebar (line 297) | toggleSidebar() {
method copyToClipboard (line 301) | copyToClipboard() {
method render (line 317) | render() {
FILE: src/blocks/blog/dark/a.js
function DarkBlogA (line 4) | function DarkBlogA(props) {
FILE: src/blocks/blog/dark/b.js
function DarkBlogB (line 5) | function DarkBlogB(props) {
FILE: src/blocks/blog/dark/c.js
function DarkBlogC (line 4) | function DarkBlogC(props) {
FILE: src/blocks/blog/dark/d.js
function DarkBlogD (line 4) | function DarkBlogD(props) {
FILE: src/blocks/blog/dark/e.js
function DarkBlogE (line 4) | function DarkBlogE(props) {
FILE: src/blocks/blog/light/a.js
function LightBlogA (line 4) | function LightBlogA(props) {
FILE: src/blocks/blog/light/b.js
function LightBlogB (line 4) | function LightBlogB(props) {
FILE: src/blocks/blog/light/c.js
function LightBlogC (line 4) | function LightBlogC(props) {
FILE: src/blocks/blog/light/d.js
function LightBlogD (line 4) | function LightBlogD(props) {
FILE: src/blocks/blog/light/e.js
function LightBlogE (line 4) | function LightBlogE(props) {
FILE: src/blocks/contact/dark/a.js
function DarkContactA (line 4) | function DarkContactA(props) {
FILE: src/blocks/contact/dark/b.js
function DarkContactB (line 4) | function DarkContactB(props) {
FILE: src/blocks/contact/dark/c.js
function DarkContactC (line 4) | function DarkContactC(props) {
FILE: src/blocks/contact/light/a.js
function LightContactA (line 4) | function LightContactA(props) {
FILE: src/blocks/contact/light/b.js
function LightContactB (line 4) | function LightContactB(props) {
FILE: src/blocks/contact/light/c.js
function LightContactC (line 4) | function LightContactC(props) {
FILE: src/blocks/content/dark/a.js
function DarkContentA (line 4) | function DarkContentA(props) {
FILE: src/blocks/content/dark/b.js
function DarkContentB (line 4) | function DarkContentB(props) {
FILE: src/blocks/content/dark/c.js
function DarkContentC (line 4) | function DarkContentC(props) {
FILE: src/blocks/content/dark/d.js
function DarkContentD (line 4) | function DarkContentD(props) {
FILE: src/blocks/content/dark/e.js
function DarkContentE (line 4) | function DarkContentE(props) {
FILE: src/blocks/content/dark/f.js
function DarkContentF (line 4) | function DarkContentF(props) {
FILE: src/blocks/content/dark/g.js
function DarkContentG (line 4) | function DarkContentG(props) {
FILE: src/blocks/content/dark/h.js
function DarkContentH (line 4) | function DarkContentH(props) {
FILE: src/blocks/content/light/a.js
function LightContentA (line 4) | function LightContentA(props) {
FILE: src/blocks/content/light/b.js
function LightContentB (line 4) | function LightContentB(props) {
FILE: src/blocks/content/light/c.js
function LightContentC (line 4) | function LightContentC(props) {
FILE: src/blocks/content/light/d.js
function LightContentD (line 4) | function LightContentD(props) {
FILE: src/blocks/content/light/e.js
function LightContentE (line 4) | function LightContentE(props) {
FILE: src/blocks/content/light/f.js
function LightContentF (line 4) | function LightContentF(props) {
FILE: src/blocks/content/light/g.js
function LightContentG (line 4) | function LightContentG(props) {
FILE: src/blocks/content/light/h.js
function LightContentH (line 4) | function LightContentH(props) {
FILE: src/blocks/cta/dark/a.js
function DarkCTAA (line 4) | function DarkCTAA(props) {
FILE: src/blocks/cta/dark/b.js
function DarkCTAB (line 4) | function DarkCTAB(props) {
FILE: src/blocks/cta/dark/c.js
function DarkCTAC (line 4) | function DarkCTAC(props) {
FILE: src/blocks/cta/dark/d.js
function DarkCTAD (line 4) | function DarkCTAD(props) {
FILE: src/blocks/cta/light/a.js
function LightCTAA (line 4) | function LightCTAA(props) {
FILE: src/blocks/cta/light/b.js
function LightCTAB (line 4) | function LightCTAB(props) {
FILE: src/blocks/cta/light/c.js
function LightCTAC (line 4) | function LightCTAC(props) {
FILE: src/blocks/cta/light/d.js
function LightCTAD (line 4) | function LightCTAD(props) {
FILE: src/blocks/ecommerce/dark/a.js
function DarkEcommerceA (line 3) | function DarkEcommerceA() {
FILE: src/blocks/ecommerce/dark/b.js
function DarkEcommerceB (line 4) | function DarkEcommerceB(props) {
FILE: src/blocks/ecommerce/dark/c.js
function DarkEcommerceC (line 4) | function DarkEcommerceC(props) {
FILE: src/blocks/ecommerce/light/a.js
function LightEcommerceA (line 3) | function LightEcommerceA() {
FILE: src/blocks/ecommerce/light/b.js
function LightEcommerceB (line 4) | function LightEcommerceB(props) {
FILE: src/blocks/ecommerce/light/c.js
function LightEcommerceC (line 4) | function LightEcommerceC(props) {
FILE: src/blocks/feature/dark/a.js
function DarkFeatureA (line 4) | function DarkFeatureA(props) {
FILE: src/blocks/feature/dark/b.js
function DarkFeatureB (line 4) | function DarkFeatureB(props) {
FILE: src/blocks/feature/dark/c.js
function DarkFeatureC (line 4) | function DarkFeatureC(props) {
FILE: src/blocks/feature/dark/d.js
function DarkFeatureD (line 4) | function DarkFeatureD(props) {
FILE: src/blocks/feature/dark/e.js
function DarkFeatureE (line 4) | function DarkFeatureE(props) {
FILE: src/blocks/feature/dark/f.js
function DarkFeatureF (line 4) | function DarkFeatureF(props) {
FILE: src/blocks/feature/dark/g.js
function DarkFeatureG (line 4) | function DarkFeatureG(props) {
FILE: src/blocks/feature/dark/h.js
function DarkFeatureH (line 4) | function DarkFeatureH(props) {
FILE: src/blocks/feature/light/a.js
function LightFeatureA (line 4) | function LightFeatureA(props) {
FILE: src/blocks/feature/light/b.js
function LightFeatureB (line 4) | function LightFeatureB(props) {
FILE: src/blocks/feature/light/c.js
function LightFeatureC (line 4) | function LightFeatureC(props) {
FILE: src/blocks/feature/light/d.js
function LightFeatureD (line 4) | function LightFeatureD(props) {
FILE: src/blocks/feature/light/e.js
function LightFeatureE (line 4) | function LightFeatureE(props) {
FILE: src/blocks/feature/light/f.js
function LightFeatureF (line 4) | function LightFeatureF(props) {
FILE: src/blocks/feature/light/g.js
function LightFeatureG (line 4) | function LightFeatureG(props) {
FILE: src/blocks/feature/light/h.js
function LightFeatureH (line 4) | function LightFeatureH(props) {
FILE: src/blocks/footer/dark/a.js
function DarkFooterA (line 4) | function DarkFooterA(props) {
FILE: src/blocks/footer/dark/b.js
function DarkFooterB (line 5) | function DarkFooterB(props) {
FILE: src/blocks/footer/dark/c.js
function DarkFooterC (line 4) | function DarkFooterC(props) {
FILE: src/blocks/footer/dark/d.js
function DarkFooterD (line 4) | function DarkFooterD(props) {
FILE: src/blocks/footer/dark/e.js
function DarkFooterE (line 4) | function DarkFooterE(props) {
FILE: src/blocks/footer/light/a.js
function LightFooterA (line 4) | function LightFooterA(props) {
FILE: src/blocks/footer/light/b.js
function LightFooterB (line 4) | function LightFooterB(props) {
FILE: src/blocks/footer/light/c.js
function LightFooterC (line 4) | function LightFooterC(props) {
FILE: src/blocks/footer/light/d.js
function LightFooterD (line 4) | function LightFooterD(props) {
FILE: src/blocks/footer/light/e.js
function LightFooterE (line 4) | function LightFooterE(props) {
FILE: src/blocks/gallery/dark/a.js
function DarkGalleryA (line 3) | function DarkGalleryA() {
FILE: src/blocks/gallery/dark/b.js
function DarkGalleryB (line 4) | function DarkGalleryB(props) {
FILE: src/blocks/gallery/dark/c.js
function DarkGalleryC (line 4) | function DarkGalleryC(props) {
FILE: src/blocks/gallery/light/a.js
function LightGalleryA (line 3) | function LightGalleryA() {
FILE: src/blocks/gallery/light/b.js
function LightGalleryB (line 4) | function LightGalleryB(props) {
FILE: src/blocks/gallery/light/c.js
function LightGalleryC (line 4) | function LightGalleryC(props) {
FILE: src/blocks/header/dark/a.js
function DarkHeaderA (line 4) | function DarkHeaderA(props) {
FILE: src/blocks/header/dark/b.js
function DarkHeaderB (line 4) | function DarkHeaderB(props) {
FILE: src/blocks/header/dark/c.js
function DarkHeaderC (line 4) | function DarkHeaderC(props) {
FILE: src/blocks/header/dark/d.js
function DarkHeaderD (line 4) | function DarkHeaderD(props) {
FILE: src/blocks/header/light/a.js
function LightHeaderA (line 4) | function LightHeaderA(props) {
FILE: src/blocks/header/light/b.js
function LightHeaderB (line 4) | function LightHeaderB(props) {
FILE: src/blocks/header/light/c.js
function LightHeaderC (line 4) | function LightHeaderC(props) {
FILE: src/blocks/header/light/d.js
function LightHeaderD (line 4) | function LightHeaderD(props) {
FILE: src/blocks/hero/dark/a.js
function DarkHeroA (line 4) | function DarkHeroA(props) {
FILE: src/blocks/hero/dark/b.js
function DarkHeroB (line 4) | function DarkHeroB(props) {
FILE: src/blocks/hero/dark/c.js
function DarkHeroC (line 4) | function DarkHeroC(props) {
FILE: src/blocks/hero/dark/d.js
function DarkHeroD (line 4) | function DarkHeroD(props) {
FILE: src/blocks/hero/dark/e.js
function DarkHeroE (line 4) | function DarkHeroE(props) {
FILE: src/blocks/hero/dark/f.js
function DarkHeroF (line 4) | function DarkHeroF(props) {
FILE: src/blocks/hero/light/a.js
function LightHeroA (line 4) | function LightHeroA(props) {
FILE: src/blocks/hero/light/b.js
function LightHeroB (line 4) | function LightHeroB(props) {
FILE: src/blocks/hero/light/c.js
function LightHeroC (line 4) | function LightHeroC(props) {
FILE: src/blocks/hero/light/d.js
function LightHeroD (line 4) | function LightHeroD(props) {
FILE: src/blocks/hero/light/e.js
function LightHeroE (line 4) | function LightHeroE(props) {
FILE: src/blocks/hero/light/f.js
function LightHeroF (line 4) | function LightHeroF(props) {
FILE: src/blocks/index.js
function getBlock (line 160) | function getBlock({theme = 'indigo', darkMode = false}) {
FILE: src/blocks/pricing/dark/a.js
function DarkPricingA (line 4) | function DarkPricingA(props) {
FILE: src/blocks/pricing/dark/b.js
function DarkPricingB (line 4) | function DarkPricingB(props) {
FILE: src/blocks/pricing/light/a.js
function LightPricingA (line 4) | function LightPricingA(props) {
FILE: src/blocks/pricing/light/b.js
function LightPricingB (line 4) | function LightPricingB(props) {
FILE: src/blocks/statistic/dark/a.js
function DarkStatisticA (line 3) | function DarkStatisticA() {
FILE: src/blocks/statistic/dark/b.js
function DarkStatisticB (line 3) | function DarkStatisticB() {
FILE: src/blocks/statistic/dark/c.js
function DarkStatisticC (line 4) | function DarkStatisticC(props) {
FILE: src/blocks/statistic/light/a.js
function LightStatisticA (line 3) | function LightStatisticA() {
FILE: src/blocks/statistic/light/b.js
function LightStatisticB (line 3) | function LightStatisticB() {
FILE: src/blocks/statistic/light/c.js
function LightStatisicC (line 4) | function LightStatisicC(props) {
FILE: src/blocks/step/dark/a.js
function DarkStepA (line 4) | function DarkStepA(props) {
FILE: src/blocks/step/dark/b.js
function DarkStepB (line 4) | function DarkStepB(props) {
FILE: src/blocks/step/dark/c.js
function DarkStepC (line 4) | function DarkStepC(props) {
FILE: src/blocks/step/light/a.js
function LightStepA (line 4) | function LightStepA(props) {
FILE: src/blocks/step/light/b.js
function LightStepB (line 4) | function LightStepB(props) {
FILE: src/blocks/step/light/c.js
function LightStepC (line 4) | function LightStepC(props) {
FILE: src/blocks/team/dark/a.js
function DarkTeamA (line 3) | function DarkTeamA(props) {
FILE: src/blocks/team/dark/b.js
function DarkTeamB (line 3) | function DarkTeamB() {
FILE: src/blocks/team/dark/c.js
function DarkTeamC (line 3) | function DarkTeamC() {
FILE: src/blocks/team/light/a.js
function LightTeamA (line 3) | function LightTeamA() {
FILE: src/blocks/team/light/b.js
function LightTeamB (line 3) | function LightTeamB() {
FILE: src/blocks/team/light/c.js
function LightTeamC (line 3) | function LightTeamC() {
FILE: src/blocks/testimonial/dark/a.js
function DarkTestimonialA (line 3) | function DarkTestimonialA() {
FILE: src/blocks/testimonial/dark/b.js
function DarkTestimonialB (line 4) | function DarkTestimonialB(props) {
FILE: src/blocks/testimonial/dark/c.js
function DarkTestimonialC (line 4) | function DarkTestimonialC(props) {
FILE: src/blocks/testimonial/light/a.js
function LightTestimonialA (line 3) | function LightTestimonialA(props) {
FILE: src/blocks/testimonial/light/b.js
function LightTestimonialC (line 4) | function LightTestimonialC(props) {
FILE: src/blocks/testimonial/light/c.js
function LightTestimonialC (line 4) | function LightTestimonialC(props) {
FILE: src/icons/blog/a.js
function BlogA (line 3) | function BlogA() {
FILE: src/icons/blog/b.js
function BlogB (line 3) | function BlogB() {
FILE: src/icons/blog/c.js
function BlogC (line 3) | function BlogC() {
FILE: src/icons/blog/d.js
function BlogD (line 3) | function BlogD() {
FILE: src/icons/blog/e.js
function BlogE (line 3) | function BlogE() {
FILE: src/icons/contact/a.js
function ContactA (line 3) | function ContactA() {
FILE: src/icons/contact/b.js
function ContactB (line 3) | function ContactB() {
FILE: src/icons/contact/c.js
function ContactC (line 3) | function ContactC() {
FILE: src/icons/content/a.js
function ContentA (line 3) | function ContentA() {
FILE: src/icons/content/b.js
function ContentB (line 3) | function ContentB() {
FILE: src/icons/content/c.js
function ContentC (line 3) | function ContentC() {
FILE: src/icons/content/d.js
function ContentD (line 3) | function ContentD() {
FILE: src/icons/content/e.js
function ContentE (line 3) | function ContentE() {
FILE: src/icons/content/f.js
function ContentF (line 3) | function ContentF() {
FILE: src/icons/content/g.js
function ContentG (line 3) | function ContentG() {
FILE: src/icons/content/h.js
function ContentH (line 3) | function ContentH() {
FILE: src/icons/cta/a.js
function CTAA (line 3) | function CTAA() {
FILE: src/icons/cta/b.js
function CTAB (line 3) | function CTAB() {
FILE: src/icons/cta/c.js
function CTAC (line 3) | function CTAC() {
FILE: src/icons/cta/d.js
function CTAD (line 3) | function CTAD() {
FILE: src/icons/ecommerce/a.js
function EcommerceA (line 3) | function EcommerceA() {
FILE: src/icons/ecommerce/b.js
function EcommerceB (line 3) | function EcommerceB() {
FILE: src/icons/ecommerce/c.js
function EcommerceC (line 3) | function EcommerceC() {
FILE: src/icons/feature/a.js
function FeatureA (line 3) | function FeatureA() {
FILE: src/icons/feature/b.js
function FeatureB (line 3) | function FeatureB() {
FILE: src/icons/feature/c.js
function FeatureC (line 3) | function FeatureC() {
FILE: src/icons/feature/d.js
function FeatureD (line 3) | function FeatureD() {
FILE: src/icons/feature/e.js
function FeatureE (line 3) | function FeatureE() {
FILE: src/icons/feature/f.js
function FeatureF (line 3) | function FeatureF() {
FILE: src/icons/feature/g.js
function FeatureG (line 3) | function FeatureG() {
FILE: src/icons/feature/h.js
function FeatureH (line 3) | function FeatureH() {
FILE: src/icons/footer/a.js
function FooterA (line 3) | function FooterA() {
FILE: src/icons/footer/b.js
function FooterB (line 3) | function FooterB() {
FILE: src/icons/footer/c.js
function FooterC (line 3) | function FooterC() {
FILE: src/icons/footer/d.js
function FooterD (line 3) | function FooterD(props) {
FILE: src/icons/footer/e.js
function FooterE (line 3) | function FooterE() {
FILE: src/icons/gallery/a.js
function GalleryA (line 3) | function GalleryA() {
FILE: src/icons/gallery/b.js
function GalleryB (line 3) | function GalleryB() {
FILE: src/icons/gallery/c.js
function GalleryC (line 3) | function GalleryC() {
FILE: src/icons/header/a.js
function HeaderA (line 3) | function HeaderA() {
FILE: src/icons/header/b.js
function HeaderB (line 3) | function HeaderB() {
FILE: src/icons/header/c.js
function HeaderC (line 3) | function HeaderC() {
FILE: src/icons/header/d.js
function HeaderD (line 3) | function HeaderD() {
FILE: src/icons/hero/a.js
function HeroA (line 3) | function HeroA() {
FILE: src/icons/hero/b.js
function HeroB (line 3) | function HeroB() {
FILE: src/icons/hero/c.js
function HeroC (line 3) | function HeroC() {
FILE: src/icons/hero/d.js
function HeroD (line 3) | function HeroD() {
FILE: src/icons/hero/e.js
function HeroE (line 3) | function HeroE() {
FILE: src/icons/hero/f.js
function HeroF (line 3) | function HeroF() {
FILE: src/icons/index.js
function getIcons (line 81) | function getIcons() {
FILE: src/icons/pricing/a.js
function PricingA (line 3) | function PricingA() {
FILE: src/icons/pricing/b.js
function PricingC (line 3) | function PricingC() {
FILE: src/icons/statistic/a.js
function StatisticA (line 3) | function StatisticA() {
FILE: src/icons/statistic/b.js
function StatisticB (line 3) | function StatisticB() {
FILE: src/icons/statistic/c.js
function StatisticC (line 3) | function StatisticC() {
FILE: src/icons/step/a.js
function StepA (line 3) | function StepA() {
FILE: src/icons/step/b.js
function StepB (line 3) | function StepB() {
FILE: src/icons/step/c.js
function StepC (line 3) | function StepC() {
FILE: src/icons/team/a.js
function TeamA (line 3) | function TeamA() {
FILE: src/icons/team/b.js
function TeamB (line 3) | function TeamB() {
FILE: src/icons/team/c.js
function TeamC (line 3) | function TeamC() {
FILE: src/icons/testimonial/a.js
function TestimonialA (line 3) | function TestimonialA() {
FILE: src/icons/testimonial/b.js
function TestimonialB (line 3) | function TestimonialB() {
FILE: src/icons/testimonial/c.js
function TestimonialC (line 3) | function TestimonialC() {
FILE: src/serviceWorker.js
function register (line 23) | function register(config) {
function registerValidSW (line 57) | function registerValidSW(swUrl, config) {
function checkValidServiceWorker (line 101) | function checkValidServiceWorker(swUrl, config) {
function unregister (line 131) | function unregister() {
Condensed preview — 207 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (926K chars).
[
{
"path": ".github/FUNDING.yml",
"chars": 21,
"preview": "patreon: mertcukuren\n"
},
{
"path": ".gitignore",
"chars": 29,
"preview": "node_modules\nyarn.lock\nbuild\n"
},
{
"path": "CNAME",
"chars": 13,
"preview": "tailblocks.cc"
},
{
"path": "LICENSE",
"chars": 1079,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2020 Mert Cukuren\n\nPermission is hereby granted, free of charge, to any person obta"
},
{
"path": "README.md",
"chars": 1051,
"preview": "# Tailblocks\n### Ready-to-use Tailwind CSS blocks\n##### Features\n\n* 60+ Blocks\n* Responsive\n* Dark Mode Support\n* Color "
},
{
"path": "package.json",
"chars": 1013,
"preview": "{\n \"name\": \"tailblocks\",\n \"homepage\": \"https://tailblocks.cc\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencie"
},
{
"path": "public/ads.txt",
"chars": 59,
"preview": "google.com, pub-7764280421704625, DIRECT, f08c47fec0942fa0\n"
},
{
"path": "public/index.html",
"chars": 1791,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <link rel=\"icon\" href=\"%PUBLIC_URL%/favicon.p"
},
{
"path": "public/manifest.json",
"chars": 492,
"preview": "{\n \"short_name\": \"React App\",\n \"name\": \"Create React App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n "
},
{
"path": "public/robots.txt",
"chars": 57,
"preview": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\n"
},
{
"path": "src/App.js",
"chars": 15298,
"preview": "import React, { Component } from 'react';\nimport Frame from 'react-frame-component';\nimport SyntaxHighlighter from 'reac"
},
{
"path": "src/App.test.js",
"chars": 280,
"preview": "import React from 'react';\nimport { render } from '@testing-library/react';\nimport App from './App';\n\ntest('renders lear"
},
{
"path": "src/blocks/blog/dark/a.js",
"chars": 9680,
"preview": "import React from 'react';\nimport PropTypes from \"prop-types\";\n\nfunction DarkBlogA(props) {\n return (\n <section cla"
},
{
"path": "src/blocks/blog/dark/b.js",
"chars": 8741,
"preview": "\nimport React from 'react';\nimport PropTypes from \"prop-types\";\n\nfunction DarkBlogB(props) {\n return (\n <section cl"
},
{
"path": "src/blocks/blog/dark/c.js",
"chars": 7357,
"preview": "import React from 'react';\nimport PropTypes from \"prop-types\";\n\nfunction DarkBlogC(props) {\n return (\n <section cla"
},
{
"path": "src/blocks/blog/dark/d.js",
"chars": 5069,
"preview": "import React from 'react';\nimport PropTypes from \"prop-types\";\n\nfunction DarkBlogD(props) {\n return (\n <section cla"
},
{
"path": "src/blocks/blog/dark/e.js",
"chars": 5325,
"preview": "import React from 'react';\nimport PropTypes from \"prop-types\";\n\nfunction DarkBlogE(props) {\n return (\n <section cla"
},
{
"path": "src/blocks/blog/light/a.js",
"chars": 9849,
"preview": "import React from 'react';\nimport PropTypes from \"prop-types\";\n\nfunction LightBlogA(props) {\n return (\n <section cl"
},
{
"path": "src/blocks/blog/light/b.js",
"chars": 8687,
"preview": "import React from 'react';\nimport PropTypes from \"prop-types\";\n\nfunction LightBlogB(props) {\n return (\n <section cl"
},
{
"path": "src/blocks/blog/light/c.js",
"chars": 7335,
"preview": "import React from 'react';\nimport PropTypes from \"prop-types\";\n\nfunction LightBlogC(props) {\n return (\n <section cl"
},
{
"path": "src/blocks/blog/light/d.js",
"chars": 5020,
"preview": "import React from 'react';\nimport PropTypes from \"prop-types\";\n\nfunction LightBlogD(props) {\n return (\n <section cl"
},
{
"path": "src/blocks/blog/light/e.js",
"chars": 5335,
"preview": "import React from 'react';\nimport PropTypes from \"prop-types\";\n\nfunction LightBlogE(props) {\n return (\n <section cl"
},
{
"path": "src/blocks/contact/dark/a.js",
"chars": 2894,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkContactA(props) {\n return (\n <section "
},
{
"path": "src/blocks/contact/dark/b.js",
"chars": 4601,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkContactB(props) {\n return (\n <section "
},
{
"path": "src/blocks/contact/dark/c.js",
"chars": 6174,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkContactC(props) {\n return (\n <section "
},
{
"path": "src/blocks/contact/light/a.js",
"chars": 2877,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightContactA(props) {\n return (\n <section"
},
{
"path": "src/blocks/contact/light/b.js",
"chars": 4599,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightContactB(props) {\n return (\n <section"
},
{
"path": "src/blocks/contact/light/c.js",
"chars": 6160,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightContactC(props) {\n return (\n <section"
},
{
"path": "src/blocks/content/dark/a.js",
"chars": 5117,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkContentA(props) {\n return (\n <section "
},
{
"path": "src/blocks/content/dark/b.js",
"chars": 4579,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkContentB(props) {\n return (\n <section "
},
{
"path": "src/blocks/content/dark/c.js",
"chars": 7511,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkContentC(props) {\n return (\n <section "
},
{
"path": "src/blocks/content/dark/d.js",
"chars": 2849,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkContentD(props) {\n return (\n <section "
},
{
"path": "src/blocks/content/dark/e.js",
"chars": 1728,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkContentE(props) {\n return (\n <section "
},
{
"path": "src/blocks/content/dark/f.js",
"chars": 3471,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkContentF(props) {\n return (\n <section "
},
{
"path": "src/blocks/content/dark/g.js",
"chars": 2231,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkContentG(props) {\n return (\n <section "
},
{
"path": "src/blocks/content/dark/h.js",
"chars": 4907,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkContentH(props) {\n return (\n <section "
},
{
"path": "src/blocks/content/light/a.js",
"chars": 5196,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightContentA(props) {\n return (\n <section"
},
{
"path": "src/blocks/content/light/b.js",
"chars": 4518,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightContentB(props) {\n return (\n <section"
},
{
"path": "src/blocks/content/light/c.js",
"chars": 7474,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightContentC(props) {\n return (\n <section"
},
{
"path": "src/blocks/content/light/d.js",
"chars": 2983,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightContentD(props) {\n return (\n <section"
},
{
"path": "src/blocks/content/light/e.js",
"chars": 1723,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightContentE(props) {\n return (\n <section"
},
{
"path": "src/blocks/content/light/f.js",
"chars": 3452,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightContentF(props) {\n return (\n <section"
},
{
"path": "src/blocks/content/light/g.js",
"chars": 2229,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightContentG(props) {\n return (\n <section"
},
{
"path": "src/blocks/content/light/h.js",
"chars": 4910,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightContentH(props) {\n return (\n <section"
},
{
"path": "src/blocks/cta/dark/a.js",
"chars": 928,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkCTAA(props) {\n return (\n <section clas"
},
{
"path": "src/blocks/cta/dark/b.js",
"chars": 2712,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkCTAB(props) {\n return (\n <section clas"
},
{
"path": "src/blocks/cta/dark/c.js",
"chars": 2541,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkCTAC(props) {\n return (\n <section clas"
},
{
"path": "src/blocks/cta/dark/d.js",
"chars": 3627,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkCTAD(props) {\n return (\n <section clas"
},
{
"path": "src/blocks/cta/light/a.js",
"chars": 923,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightCTAA(props) {\n return (\n <section cla"
},
{
"path": "src/blocks/cta/light/b.js",
"chars": 2634,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightCTAB(props) {\n return (\n <section cla"
},
{
"path": "src/blocks/cta/light/c.js",
"chars": 2520,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightCTAC(props) {\n return (\n <section cla"
},
{
"path": "src/blocks/cta/light/d.js",
"chars": 3582,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightCTAD(props) {\n return (\n <section cla"
},
{
"path": "src/blocks/ecommerce/dark/a.js",
"chars": 6028,
"preview": "import React from \"react\";\n\nfunction DarkEcommerceA() {\n return (\n <section className=\"text-gray-400 bg-gray-900 bod"
},
{
"path": "src/blocks/ecommerce/dark/b.js",
"chars": 8572,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkEcommerceB(props) {\n return (\n <sectio"
},
{
"path": "src/blocks/ecommerce/dark/c.js",
"chars": 3594,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkEcommerceC(props) {\n return (\n <sectio"
},
{
"path": "src/blocks/ecommerce/light/a.js",
"chars": 6043,
"preview": "import React from \"react\";\n\nfunction LightEcommerceA() {\n return (\n <section className=\"text-gray-600 body-font\">\n "
},
{
"path": "src/blocks/ecommerce/light/b.js",
"chars": 8632,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightEcommerceB(props) {\n return (\n <secti"
},
{
"path": "src/blocks/ecommerce/light/c.js",
"chars": 3602,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightEcommerceC(props) {\n return (\n <secti"
},
{
"path": "src/blocks/feature/dark/a.js",
"chars": 5811,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkFeatureA(props) {\n return (\n <section "
},
{
"path": "src/blocks/feature/dark/b.js",
"chars": 6365,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkFeatureB(props) {\n return (\n <section "
},
{
"path": "src/blocks/feature/dark/c.js",
"chars": 5560,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkFeatureC(props) {\n return (\n <section "
},
{
"path": "src/blocks/feature/dark/d.js",
"chars": 3982,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkFeatureD(props) {\n return (\n <section "
},
{
"path": "src/blocks/feature/dark/e.js",
"chars": 6380,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkFeatureE(props) {\n return (\n <section "
},
{
"path": "src/blocks/feature/dark/f.js",
"chars": 5522,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkFeatureF(props) {\n return (\n <section "
},
{
"path": "src/blocks/feature/dark/g.js",
"chars": 5683,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkFeatureG(props) {\n return (\n <section "
},
{
"path": "src/blocks/feature/dark/h.js",
"chars": 15108,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkFeatureH(props) {\n return (\n <section "
},
{
"path": "src/blocks/feature/light/a.js",
"chars": 5845,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightFeatureA(props) {\n return (\n <section"
},
{
"path": "src/blocks/feature/light/b.js",
"chars": 6384,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightFeatureB(props) {\n return (\n <section"
},
{
"path": "src/blocks/feature/light/c.js",
"chars": 5591,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightFeatureC(props) {\n return (\n <section"
},
{
"path": "src/blocks/feature/light/d.js",
"chars": 4036,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightFeatureD(props) {\n return (\n <section"
},
{
"path": "src/blocks/feature/light/e.js",
"chars": 6327,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightFeatureE(props) {\n return (\n <section"
},
{
"path": "src/blocks/feature/light/f.js",
"chars": 5553,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightFeatureF(props) {\n return (\n <section"
},
{
"path": "src/blocks/feature/light/g.js",
"chars": 5580,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightFeatureG(props) {\n return (\n <section"
},
{
"path": "src/blocks/feature/light/h.js",
"chars": 15323,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightFeatureH(props) {\n return (\n <section"
},
{
"path": "src/blocks/footer/dark/a.js",
"chars": 7229,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkFooterA(props) {\n return (\n <footer cl"
},
{
"path": "src/blocks/footer/dark/b.js",
"chars": 7242,
"preview": "\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkFooterB(props) {\n return (\n <footer c"
},
{
"path": "src/blocks/footer/dark/c.js",
"chars": 9356,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkFooterC(props) {\n return (\n <footer cl"
},
{
"path": "src/blocks/footer/dark/d.js",
"chars": 3508,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkFooterD(props) {\n return (\n <footer cl"
},
{
"path": "src/blocks/footer/dark/e.js",
"chars": 7675,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkFooterE(props) {\n return (\n <footer cl"
},
{
"path": "src/blocks/footer/light/a.js",
"chars": 7269,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightFooterA(props) {\n return (\n <footer c"
},
{
"path": "src/blocks/footer/light/b.js",
"chars": 7282,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightFooterB(props) {\n return (\n <footer c"
},
{
"path": "src/blocks/footer/light/c.js",
"chars": 9424,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightFooterC(props) {\n return (\n <footer c"
},
{
"path": "src/blocks/footer/light/d.js",
"chars": 3504,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightFooterD(props) {\n return (\n <footer c"
},
{
"path": "src/blocks/footer/light/e.js",
"chars": 7703,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightFooterE(props) {\n return (\n <footer c"
},
{
"path": "src/blocks/gallery/dark/a.js",
"chars": 2577,
"preview": "import React from \"react\";\n\nfunction DarkGalleryA() {\n return (\n <section className=\"text-gray-400 bg-gray-900 body-"
},
{
"path": "src/blocks/gallery/dark/b.js",
"chars": 4451,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkGalleryB(props) {\n return (\n <section "
},
{
"path": "src/blocks/gallery/dark/c.js",
"chars": 6901,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkGalleryC(props) {\n return (\n <section "
},
{
"path": "src/blocks/gallery/light/a.js",
"chars": 2570,
"preview": "import React from \"react\";\n\nfunction LightGalleryA() {\n return (\n <section className=\"text-gray-600 body-font\">\n "
},
{
"path": "src/blocks/gallery/light/b.js",
"chars": 4451,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightGalleryB(props) {\n return (\n <section"
},
{
"path": "src/blocks/gallery/light/c.js",
"chars": 6896,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightGalleryC(props) {\n return (\n <section"
},
{
"path": "src/blocks/header/dark/a.js",
"chars": 1931,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkHeaderA(props) {\n return (\n <header cla"
},
{
"path": "src/blocks/header/dark/b.js",
"chars": 1987,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkHeaderB(props) {\n return (\n <header cl"
},
{
"path": "src/blocks/header/dark/c.js",
"chars": 2127,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkHeaderC(props) {\n return (\n <header cl"
},
{
"path": "src/blocks/header/dark/d.js",
"chars": 1943,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkHeaderD(props) {\n return (\n <header cl"
},
{
"path": "src/blocks/header/light/a.js",
"chars": 1939,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightHeaderA(props) {\n return (\n <header c"
},
{
"path": "src/blocks/header/light/b.js",
"chars": 1994,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightHeaderB(props) {\n return (\n <header c"
},
{
"path": "src/blocks/header/light/c.js",
"chars": 2115,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightHeaderC(props) {\n return (\n <header c"
},
{
"path": "src/blocks/header/light/d.js",
"chars": 1950,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightHeaderD(props) {\n return (\n <header c"
},
{
"path": "src/blocks/hero/dark/a.js",
"chars": 1804,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkHeroA(props) {\n return (\n <section cla"
},
{
"path": "src/blocks/hero/dark/b.js",
"chars": 1707,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkHeroB(props) {\n return (\n <section cla"
},
{
"path": "src/blocks/hero/dark/c.js",
"chars": 1804,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkHeroC(props) {\n return (\n <section cla"
},
{
"path": "src/blocks/hero/dark/d.js",
"chars": 5154,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkHeroD(props) {\n return (\n <section cla"
},
{
"path": "src/blocks/hero/dark/e.js",
"chars": 5144,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkHeroE(props) {\n return (\n <section cla"
},
{
"path": "src/blocks/hero/dark/f.js",
"chars": 5062,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkHeroF(props) {\n return (\n <section cla"
},
{
"path": "src/blocks/hero/light/a.js",
"chars": 1782,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightHeroA(props) {\n return (\n <section cl"
},
{
"path": "src/blocks/hero/light/b.js",
"chars": 1685,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightHeroB(props) {\n return (\n <section cl"
},
{
"path": "src/blocks/hero/light/c.js",
"chars": 1785,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightHeroC(props) {\n return (\n <section cl"
},
{
"path": "src/blocks/hero/light/d.js",
"chars": 5101,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightHeroD(props) {\n return (\n <section cl"
},
{
"path": "src/blocks/hero/light/e.js",
"chars": 5091,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightHeroE(props) {\n return (\n <section cl"
},
{
"path": "src/blocks/hero/light/f.js",
"chars": 5009,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightHeroF(props) {\n return (\n <section cl"
},
{
"path": "src/blocks/index.js",
"chars": 11746,
"preview": "import React from 'react';\n\nimport LightBlogA from './blog/light/a';\nimport LightBlogB from './blog/light/b';\nimport Lig"
},
{
"path": "src/blocks/pricing/dark/a.js",
"chars": 18464,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkPricingA(props) {\n return (\n <section c"
},
{
"path": "src/blocks/pricing/dark/b.js",
"chars": 5063,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkPricingB(props) {\n return (\n <section c"
},
{
"path": "src/blocks/pricing/light/a.js",
"chars": 18336,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightPricingA(props) {\n return (\n <section "
},
{
"path": "src/blocks/pricing/light/b.js",
"chars": 5109,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightPricingB(props) {\n return (\n <section "
},
{
"path": "src/blocks/statistic/dark/a.js",
"chars": 1281,
"preview": "import React from \"react\";\n\nfunction DarkStatisticA() {\n return (\n <section className=\"text-gray-400 bg-gray-900 bod"
},
{
"path": "src/blocks/statistic/dark/b.js",
"chars": 1918,
"preview": "import React from \"react\";\n\nfunction DarkStatisticB() {\n return (\n <section className=\"text-gray-400 bg-gray-900 bod"
},
{
"path": "src/blocks/statistic/dark/c.js",
"chars": 4351,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkStatisticC(props) {\n return (\n <section"
},
{
"path": "src/blocks/statistic/light/a.js",
"chars": 1283,
"preview": "import React from \"react\";\n\nfunction LightStatisticA() {\n return (\n <section className=\"text-gray-600 body-font\">\n "
},
{
"path": "src/blocks/statistic/light/b.js",
"chars": 2008,
"preview": "import React from \"react\";\n\nfunction LightStatisticB() {\n return (\n <section className=\"text-gray-600 body-font\">\n "
},
{
"path": "src/blocks/statistic/light/c.js",
"chars": 4418,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightStatisicC(props) {\n return (\n <section"
},
{
"path": "src/blocks/step/dark/a.js",
"chars": 6933,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkStepA(props) {\n return (\n <section clas"
},
{
"path": "src/blocks/step/dark/b.js",
"chars": 3738,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkStepB(props) {\n return (\n <section clas"
},
{
"path": "src/blocks/step/dark/c.js",
"chars": 6798,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkStepC(props) {\n return (\n <section clas"
},
{
"path": "src/blocks/step/light/a.js",
"chars": 6940,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightStepA(props) {\n return (\n <section cla"
},
{
"path": "src/blocks/step/light/b.js",
"chars": 3755,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightStepB(props) {\n return (\n <section cla"
},
{
"path": "src/blocks/step/light/c.js",
"chars": 6842,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightStepC(props) {\n return (\n <section cla"
},
{
"path": "src/blocks/team/dark/a.js",
"chars": 6617,
"preview": "import React from \"react\";\n\nfunction DarkTeamA(props) {\n return (\n <section className=\"text-gray-400 bg-gray-900 bod"
},
{
"path": "src/blocks/team/dark/b.js",
"chars": 11862,
"preview": "import React from \"react\";\n\nfunction DarkTeamB() {\n return (\n <section className=\"text-gray-400 bg-gray-900 body-fon"
},
{
"path": "src/blocks/team/dark/c.js",
"chars": 11594,
"preview": "import React from \"react\";\n\nfunction DarkTeamC() {\n return (\n <section className=\"text-gray-400 bg-gray-900 body-fon"
},
{
"path": "src/blocks/team/light/a.js",
"chars": 6668,
"preview": "import React from \"react\";\n\nfunction LightTeamA() {\n return (\n <section className=\"text-gray-600 body-font\">\n <"
},
{
"path": "src/blocks/team/light/b.js",
"chars": 11867,
"preview": "import React from \"react\";\n\nfunction LightTeamB() {\n return (\n <section className=\"text-gray-600 body-font\">\n <"
},
{
"path": "src/blocks/team/light/c.js",
"chars": 11599,
"preview": "import React from \"react\";\n\nfunction LightTeamC() {\n return (\n <section className=\"text-gray-600 body-font\">\n <"
},
{
"path": "src/blocks/testimonial/dark/a.js",
"chars": 4467,
"preview": "import React from \"react\";\n\nfunction DarkTestimonialA() {\n return (\n <section className=\"text-gray-400 bg-gray-900 b"
},
{
"path": "src/blocks/testimonial/dark/b.js",
"chars": 2502,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkTestimonialB(props) {\n return (\n <secti"
},
{
"path": "src/blocks/testimonial/dark/c.js",
"chars": 3690,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction DarkTestimonialC(props) {\n return (\n <secti"
},
{
"path": "src/blocks/testimonial/light/a.js",
"chars": 4440,
"preview": "import React from \"react\";\n\nfunction LightTestimonialA(props) {\n return (\n <section className=\"text-gray-600 body-fo"
},
{
"path": "src/blocks/testimonial/light/b.js",
"chars": 2497,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightTestimonialC(props) {\n return (\n <sect"
},
{
"path": "src/blocks/testimonial/light/c.js",
"chars": 3649,
"preview": "import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nfunction LightTestimonialC(props) {\n return (\n <sect"
},
{
"path": "src/icons/blog/a.js",
"chars": 3181,
"preview": "import React from \"react\"\n\nfunction BlogA() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill=\"v"
},
{
"path": "src/icons/blog/b.js",
"chars": 1876,
"preview": "import React from \"react\"\n\nfunction BlogB() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill=\"v"
},
{
"path": "src/icons/blog/c.js",
"chars": 2647,
"preview": "import React from \"react\"\n\nfunction BlogC() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill=\"v"
},
{
"path": "src/icons/blog/d.js",
"chars": 2721,
"preview": "import React from \"react\"\n\nfunction BlogD() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill=\"v"
},
{
"path": "src/icons/blog/e.js",
"chars": 2618,
"preview": "import React from \"react\"\n\nfunction BlogE() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill=\"v"
},
{
"path": "src/icons/contact/a.js",
"chars": 1500,
"preview": "import React from \"react\"\n\nfunction ContactA() {\n return (\n <svg fill=\"none\" viewBox=\"0 0 266 150\">\n <path fill"
},
{
"path": "src/icons/contact/b.js",
"chars": 2487,
"preview": "import React from \"react\"\n\nfunction ContactB() {\n return (\n <svg fill=\"none\" viewBox=\"0 0 266 150\">\n <path fill"
},
{
"path": "src/icons/contact/c.js",
"chars": 1105,
"preview": "import React from \"react\"\n\nfunction ContactC() {\n return (\n <svg fill=\"none\" viewBox=\"0 0 266 150\">\n <path fill"
},
{
"path": "src/icons/content/a.js",
"chars": 3239,
"preview": "import React from \"react\"\n\nfunction ContentA() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/content/b.js",
"chars": 4190,
"preview": "import React from \"react\"\n\nfunction ContentB() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/content/c.js",
"chars": 3554,
"preview": "import React from \"react\"\n\nfunction ContentC() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/content/d.js",
"chars": 2053,
"preview": "import React from \"react\"\n\nfunction ContentD() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/content/e.js",
"chars": 1062,
"preview": "import React from \"react\"\n\nfunction ContentE() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/content/f.js",
"chars": 1679,
"preview": "import React from \"react\"\n\nfunction ContentF() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/content/g.js",
"chars": 2017,
"preview": "import React from \"react\"\n\nfunction ContentG() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/content/h.js",
"chars": 3272,
"preview": "import React from \"react\"\n\nfunction ContentH() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/cta/a.js",
"chars": 608,
"preview": "import React from \"react\"\n\nfunction CTAA() {\n return (\n <svg fill=\"none\" viewBox=\"0 0 266 150\">\n <path fill=\"va"
},
{
"path": "src/icons/cta/b.js",
"chars": 1372,
"preview": "import React from \"react\"\n\nfunction CTAB() {\n return (\n <svg fill=\"none\" viewBox=\"0 0 266 150\">\n <path fill=\"va"
},
{
"path": "src/icons/cta/c.js",
"chars": 958,
"preview": "import React from \"react\"\n\nfunction CTAC() {\n return (\n <svg fill=\"none\" viewBox=\"0 0 266 150\">\n <path fill=\"va"
},
{
"path": "src/icons/cta/d.js",
"chars": 743,
"preview": "import React from \"react\"\n\nfunction CTAD() {\n return (\n <svg fill=\"none\" viewBox=\"0 0 266 150\">\n <path fill=\"va"
},
{
"path": "src/icons/ecommerce/a.js",
"chars": 6032,
"preview": "import React from \"react\"\n\nfunction EcommerceA() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fi"
},
{
"path": "src/icons/ecommerce/b.js",
"chars": 1936,
"preview": "import React from \"react\"\n\nfunction EcommerceB() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fi"
},
{
"path": "src/icons/ecommerce/c.js",
"chars": 2126,
"preview": "import React from \"react\"\n\nfunction EcommerceC() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fi"
},
{
"path": "src/icons/feature/a.js",
"chars": 2136,
"preview": "import React from \"react\"\n\nfunction FeatureA() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/feature/b.js",
"chars": 2271,
"preview": "import React from \"react\"\n\nfunction FeatureB() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/feature/c.js",
"chars": 1969,
"preview": "import React from \"react\"\n\nfunction FeatureC() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/feature/d.js",
"chars": 1648,
"preview": "import React from \"react\"\n\nfunction FeatureD() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/feature/e.js",
"chars": 2352,
"preview": "import React from \"react\"\n\nfunction FeatureE() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/feature/f.js",
"chars": 1796,
"preview": "import React from \"react\"\n\nfunction FeatureF() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/feature/g.js",
"chars": 2798,
"preview": "import React from \"react\"\n\nfunction FeatureG() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/feature/h.js",
"chars": 5135,
"preview": "import React from \"react\"\n\nfunction FeatureH() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/footer/a.js",
"chars": 3369,
"preview": "import React from \"react\"\n\nfunction FooterA() {\n return (\n <svg fill=\"none\" viewBox=\"0 0 266 150\">\n <path fill="
},
{
"path": "src/icons/footer/b.js",
"chars": 3365,
"preview": "import React from \"react\"\n\nfunction FooterB() {\n return (\n <svg fill=\"none\" viewBox=\"0 0 266 150\">\n <path fill="
},
{
"path": "src/icons/footer/c.js",
"chars": 4447,
"preview": "import React from \"react\"\n\nfunction FooterC() {\n return (\n <svg fill=\"none\" viewBox=\"0 0 266 150\">\n <path fill="
},
{
"path": "src/icons/footer/d.js",
"chars": 668,
"preview": "import React from \"react\"\n\nfunction FooterD(props) {\n return (\n <svg fill=\"none\" viewBox=\"0 0 266 150\" {...props}>\n "
},
{
"path": "src/icons/footer/e.js",
"chars": 3186,
"preview": "import React from \"react\"\n\nfunction FooterE() {\n return (\n <svg fill=\"none\" viewBox=\"0 0 266 150\">\n <path fill="
},
{
"path": "src/icons/gallery/a.js",
"chars": 2998,
"preview": "import React from \"react\"\n\nfunction GalleryA() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/gallery/b.js",
"chars": 1559,
"preview": "import React from \"react\"\n\nfunction GalleryB() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/gallery/c.js",
"chars": 2499,
"preview": "import React from \"react\"\n\nfunction GalleryC() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/header/a.js",
"chars": 1031,
"preview": "import React from \"react\"\n\nfunction HeaderA() {\n return (\n <svg fill=\"none\" viewBox=\"0 0 266 150\">\n <path fill="
},
{
"path": "src/icons/header/b.js",
"chars": 1085,
"preview": "import React from \"react\"\n\nfunction HeaderB() {\n return (\n <svg fill=\"none\" viewBox=\"0 0 266 150\">\n <path fill="
},
{
"path": "src/icons/header/c.js",
"chars": 1028,
"preview": "import React from \"react\"\n\nfunction HeaderC() {\n return (\n <svg fill=\"none\" viewBox=\"0 0 266 150\">\n <path fill="
},
{
"path": "src/icons/header/d.js",
"chars": 1029,
"preview": "import React from \"react\"\n\nfunction HeaderD() {\n return (\n <svg fill=\"none\" viewBox=\"0 0 266 150\">\n <path fill="
},
{
"path": "src/icons/hero/a.js",
"chars": 1217,
"preview": "import React from \"react\"\n\nfunction HeroA() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill=\"v"
},
{
"path": "src/icons/hero/b.js",
"chars": 1277,
"preview": "import React from \"react\"\n\nfunction HeroB() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill=\"v"
},
{
"path": "src/icons/hero/c.js",
"chars": 1269,
"preview": "import React from \"react\"\n\nfunction HeroC() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill=\"v"
},
{
"path": "src/icons/hero/d.js",
"chars": 1215,
"preview": "import React from \"react\"\n\nfunction HeroD() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill=\"v"
},
{
"path": "src/icons/hero/e.js",
"chars": 1267,
"preview": "import React from \"react\"\n\nfunction HeroE() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill=\"v"
},
{
"path": "src/icons/hero/f.js",
"chars": 1274,
"preview": "import React from \"react\"\n\nfunction HeroF() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill=\"v"
},
{
"path": "src/icons/index.js",
"chars": 4355,
"preview": "import React from 'react';\n\nimport BlogA from './blog/a';\nimport BlogB from './blog/b';\nimport BlogC from './blog/c';\nim"
},
{
"path": "src/icons/pricing/a.js",
"chars": 6269,
"preview": "import React from \"react\"\n\nfunction PricingA() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/pricing/b.js",
"chars": 3382,
"preview": "import React from \"react\"\n\nfunction PricingC() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill"
},
{
"path": "src/icons/statistic/a.js",
"chars": 1190,
"preview": "import React from \"react\"\n\nfunction StatisticA() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fi"
},
{
"path": "src/icons/statistic/b.js",
"chars": 1843,
"preview": "import React from \"react\"\n\nfunction StatisticB() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fi"
},
{
"path": "src/icons/statistic/c.js",
"chars": 2760,
"preview": "import React from \"react\"\n\nfunction StatisticC() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fi"
},
{
"path": "src/icons/step/a.js",
"chars": 2569,
"preview": "import React from \"react\"\n\nfunction StepA() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill=\"v"
},
{
"path": "src/icons/step/b.js",
"chars": 1504,
"preview": "import React from \"react\"\n\nfunction StepB() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill=\"v"
},
{
"path": "src/icons/step/c.js",
"chars": 2481,
"preview": "import React from \"react\"\n\nfunction StepC() {\n return (\n <svg viewBox=\"0 0 266 150\" fill=\"none\">\n <path fill=\"v"
},
{
"path": "src/icons/team/a.js",
"chars": 4832,
"preview": "import React from \"react\"\n\nfunction TeamA() {\n return (\n <svg fill=\"none\" viewBox=\"0 0 266 150\">\n <path fill=\"v"
},
{
"path": "src/icons/team/b.js",
"chars": 3373,
"preview": "import React from \"react\"\n\nfunction TeamB() {\n return (\n <svg fill=\"none\" viewBox=\"0 0 266 150\">\n <path fill=\"v"
},
{
"path": "src/icons/team/c.js",
"chars": 6503,
"preview": "import React from \"react\"\n\nfunction TeamC() {\n return (\n <svg fill=\"none\" viewBox=\"0 0 266 150\">\n <path fill=\"v"
}
]
// ... and 7 more files (download for full content)
About this extraction
This page contains the full source code of the mertJF/tailblocks GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 207 files (851.1 KB), approximately 258.8k tokens, and a symbol index with 213 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.