Mirroring/tailblocks
1
0
Fork 0
mirror of https://github.com/mertJF/tailblocks.git synced 2025-12-08 17:03:24 +00:00
Code Issues Projects Releases Wiki Activity

making the blocks compatible with the latest tailwind version

Browse Source
This commit is contained in:
mertJF
2020-12-25 01:56:01 +03:00
parent 366e0ef392
commit e21e8960c1
134 changed files with 1103 additions and 2134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@@ -7,9 +7,9 @@
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
content="Ready-to-use Tailwind CSS blocks"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css">
<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/

16
src/App.js
View File

@@ -12,7 +12,7 @@ Object.entries(iconList).forEach(([type, icons]) => {
Object.keys(icons).map(name => blockListArr.push(`${name},${type}`));
});
const themeList = ["indigo", "orange", "teal", "red", "purple", "pink", "blue", "green"];
const themeList = ["indigo", "yellow", "red", "purple", "pink", "blue", "green"];
const desktopIcon = (
<svg
@@ -376,8 +376,18 @@ class App extends Component {
contentDidUpdate={this.handleContentDidUpdate}
head={
<>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet" />
{darkMode ? <style dangerouslySetInnerHTML={{__html:`img { filter: invert(1); mix-blend-mode: color-dodge }`}} /> : <style dangerouslySetInnerHTML={{__html:`img { filter: sepia(1) hue-rotate(180deg) opacity(.9) grayscale(.7) }`}} />}
<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) }'
}`
}}
/>
}
</>
}
>

20
src/blocks/blog/dark/a.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkBlogA(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<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">
@@ -25,7 +25,7 @@ function DarkBlogA(props) {
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`}>
<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"
@@ -40,7 +40,7 @@ function DarkBlogA(props) {
<path d="M12 5l7 7-7 7" />
</svg>
</a>
<span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
<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"
@@ -55,7 +55,7 @@ function DarkBlogA(props) {
</svg>
1.2K
</span>
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
<span className="text-gray-500 inline-flex items-center leading-none text-sm">
<svg
className="w-4 h-4 mr-1"
stroke="currentColor"
@@ -92,7 +92,7 @@ function DarkBlogA(props) {
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`}>
<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"
@@ -107,7 +107,7 @@ function DarkBlogA(props) {
<path d="M12 5l7 7-7 7" />
</svg>
</a>
<span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
<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"
@@ -122,7 +122,7 @@ function DarkBlogA(props) {
</svg>
1.2K
</span>
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
<span className="text-gray-500 inline-flex items-center leading-none text-sm">
<svg
className="w-4 h-4 mr-1"
stroke="currentColor"
@@ -161,7 +161,7 @@ function DarkBlogA(props) {
<div className="flex items-center flex-wrap ">
<a
href
className={`text-${props.theme}-500 inline-flex items-center md:mb-2 lg:mb-0`}
className={`text-${props.theme}-400 inline-flex items-center md:mb-2 lg:mb-0`}
>
Learn More
<svg
@@ -177,7 +177,7 @@ function DarkBlogA(props) {
<path d="M12 5l7 7-7 7" />
</svg>
</a>
<span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
<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"
@@ -192,7 +192,7 @@ function DarkBlogA(props) {
</svg>
1.2K
</span>
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
<span className="text-gray-500 inline-flex items-center leading-none text-sm">
<svg
className="w-4 h-4 mr-1"
stroke="currentColor"

33
src/blocks/blog/dark/b.js
View File

@@ -1,14 +1,15 @@
import React from 'react';
import PropTypes from "prop-types";
function DarkBlogB(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<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 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
<h2 className="tracking-widest text-xs title-font font-medium text-gray-600 mb-1">
<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">
@@ -18,7 +19,7 @@ function DarkBlogB(props) {
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
microdosing tousled waistcoat.
</p>
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
<a href className={`text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
className="w-4 h-4 ml-2"
@@ -34,7 +35,7 @@ function DarkBlogB(props) {
</svg>
</a>
<div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
<span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-700">
<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"
@@ -49,7 +50,7 @@ function DarkBlogB(props) {
</svg>
1.2K
</span>
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
<span className="text-gray-500 inline-flex items-center leading-none text-sm">
<svg
className="w-4 h-4 mr-1"
stroke="currentColor"
@@ -67,8 +68,8 @@ function DarkBlogB(props) {
</div>
</div>
<div className="p-4 lg:w-1/3">
<div className="h-full bg-gray-800 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
<h2 className="tracking-widest text-xs title-font font-medium text-gray-600 mb-1">
<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">
@@ -78,7 +79,7 @@ function DarkBlogB(props) {
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
microdosing tousled waistcoat.
</p>
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
<a href className={`text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
className="w-4 h-4 ml-2"
@@ -94,7 +95,7 @@ function DarkBlogB(props) {
</svg>
</a>
<div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
<span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-700">
<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"
@@ -109,7 +110,7 @@ function DarkBlogB(props) {
</svg>
1.2K
</span>
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
<span className="text-gray-500 inline-flex items-center leading-none text-sm">
<svg
className="w-4 h-4 mr-1"
stroke="currentColor"
@@ -127,8 +128,8 @@ function DarkBlogB(props) {
</div>
</div>
<div className="p-4 lg:w-1/3">
<div className="h-full bg-gray-800 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
<h2 className="tracking-widest text-xs title-font font-medium text-gray-600 mb-1">
<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">
@@ -138,7 +139,7 @@ function DarkBlogB(props) {
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
microdosing tousled waistcoat.
</p>
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
<a href className={`text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
className="w-4 h-4 ml-2"
@@ -154,7 +155,7 @@ function DarkBlogB(props) {
</svg>
</a>
<div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
<span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-700">
<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"
@@ -169,7 +170,7 @@ function DarkBlogB(props) {
</svg>
1.2K
</span>
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
<span className="text-gray-500 inline-flex items-center leading-none text-sm">
<svg
className="w-4 h-4 mr-1"
stroke="currentColor"

26
src/blocks/blog/dark/c.js
View File

@@ -3,11 +3,11 @@ import PropTypes from "prop-types";
function DarkBlogC(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font overflow-hidden">
<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-3 rounded bg-gray-800 text-gray-500 text-sm font-medium tracking-widest">
<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">
@@ -20,8 +20,8 @@ function DarkBlogC(props) {
slow-carb etsy tumeric. Cray pug you probably haven't heard of them
hexagon kickstarter craft beer pork chic.
</p>
<div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-800 mt-auto w-full">
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
<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"
@@ -36,7 +36,7 @@ function DarkBlogC(props) {
<path d="M12 5l7 7-7 7" />
</svg>
</a>
<span className="text-gray-600 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
<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"
@@ -51,7 +51,7 @@ function DarkBlogC(props) {
</svg>
1.2K
</span>
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
<span className="text-gray-500 inline-flex items-center leading-none text-sm">
<svg
className="w-4 h-4 mr-1"
stroke="currentColor"
@@ -76,12 +76,12 @@ function DarkBlogC(props) {
<span className="title-font font-medium text-white">
Holden Caulfield
</span>
<span className="text-gray-600 text-sm">UI DEVELOPER</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-3 rounded bg-gray-800 text-gray-500 text-sm font-medium tracking-widest">
<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">
@@ -93,8 +93,8 @@ function DarkBlogC(props) {
hashtag waistcoat fashion axe chia unicorn. Plaid fixie chambray 90's,
slow-carb etsy tumeric.
</p>
<div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-800 mt-auto w-full">
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
<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"
@@ -109,7 +109,7 @@ function DarkBlogC(props) {
<path d="M12 5l7 7-7 7" />
</svg>
</a>
<span className="text-gray-600 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
<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"
@@ -124,7 +124,7 @@ function DarkBlogC(props) {
</svg>
1.2K
</span>
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
<span className="text-gray-500 inline-flex items-center leading-none text-sm">
<svg
className="w-4 h-4 mr-1"
stroke="currentColor"
@@ -149,7 +149,7 @@ function DarkBlogC(props) {
<span className="title-font font-medium text-white">
Alper Kamu
</span>
<span className="text-gray-600 text-sm">DESIGNER</span>
<span className="text-gray-500 text-xs tracking-widest mt-0.5">DESIGNER</span>
</span>
</a>
</div>

28
src/blocks/blog/dark/d.js
View File

@@ -3,15 +3,15 @@ import PropTypes from "prop-types";
function DarkBlogD(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font overflow-hidden">
<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">
<div className="py-8 flex flex-wrap md:flex-no-wrap">
<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="tracking-widest font-medium title-font text-white">
<span className="font-semibold title-font text-white">
CATEGORY
</span>
<span className="mt-1 text-gray-600 text-sm">12 Jun 2019</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">
@@ -23,7 +23,7 @@ function DarkBlogD(props) {
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`}>
<a href className={`text-${props.theme}-400 inline-flex items-center mt-4`}>
Learn More
<svg
className="w-4 h-4 ml-2"
@@ -40,12 +40,12 @@ function DarkBlogD(props) {
</a>
</div>
</div>
<div className="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-no-wrap">
<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="tracking-widest font-medium title-font text-white">
<span className="font-semibold title-font text-white">
CATEGORY
</span>
<span className="mt-1 text-gray-600 text-sm">12 Jun 2019</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">
@@ -57,7 +57,7 @@ function DarkBlogD(props) {
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`}>
<a href className={`text-${props.theme}-400 inline-flex items-center mt-4`}>
Learn More
<svg
className="w-4 h-4 ml-2"
@@ -74,12 +74,12 @@ function DarkBlogD(props) {
</a>
</div>
</div>
<div className="py-8 flex border-t-2 border-gray-800 flex-wrap md:flex-no-wrap">
<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="tracking-widest font-medium title-font text-white">
<span className="font-semibold title-font text-white">
CATEGORY
</span>
<span className="mt-1 text-gray-600 text-sm">12 Jun 2019</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">
@@ -91,7 +91,7 @@ function DarkBlogD(props) {
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`}>
<a href className={`text-${props.theme}-400 inline-flex items-center mt-4`}>
Learn More
<svg
className="w-4 h-4 ml-2"

20
src/blocks/blog/dark/e.js
View File

@@ -3,21 +3,21 @@ import PropTypes from "prop-types";
function DarkBlogE(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<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-600 pb-2 mb-2 border-b-2 border-gray-800">
<span className="text-gray-400 pb-2 mb-2 border-b-2 border-gray-700">
Jul
</span>
<span className="font-medium text-xl text-gray-300 title-font">
<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}-500 mb-1`}>
<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">
@@ -45,15 +45,15 @@ function DarkBlogE(props) {
<div className="py-8 px-4 lg:w-1/3">
<div className="h-full flex items-start">
<div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
<span className="text-gray-600 pb-2 mb-2 border-b-2 border-gray-800">
<span className="text-gray-400 pb-2 mb-2 border-b-2 border-gray-700">
Jul
</span>
<span className="font-medium text-xl text-gray-300 title-font">
<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}-500 mb-1`}>
<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">
@@ -81,15 +81,15 @@ function DarkBlogE(props) {
<div className="py-8 px-4 lg:w-1/3">
<div className="h-full flex items-start">
<div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
<span className="text-gray-600 pb-2 mb-2 border-b-2 border-gray-800">
<span className="text-gray-400 pb-2 mb-2 border-b-2 border-gray-700">
Jul
</span>
<span className="font-medium text-xl text-gray-300 title-font">
<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}-500 mb-1`}>
<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">

26
src/blocks/blog/light/a.js
View File

@@ -3,18 +3,18 @@ import PropTypes from "prop-types";
function LightBlogA(props) {
return (
<section className="text-gray-700 body-font">
<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 rounded-lg overflow-hidden">
<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-500 mb-1">
<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">
@@ -43,7 +43,7 @@ function LightBlogA(props) {
<path d="M12 5l7 7-7 7" />
</svg>
</a>
<span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
<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"
@@ -58,7 +58,7 @@ function LightBlogA(props) {
</svg>
1.2K
</span>
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
<span className="text-gray-400 inline-flex items-center leading-none text-sm">
<svg
className="w-4 h-4 mr-1"
stroke="currentColor"
@@ -77,14 +77,14 @@ function LightBlogA(props) {
</div>
</div>
<div className="p-4 md:w-1/3">
<div className="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<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-500 mb-1">
<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">
@@ -113,7 +113,7 @@ function LightBlogA(props) {
<path d="M12 5l7 7-7 7" />
</svg>
</a>
<span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
<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"
@@ -128,7 +128,7 @@ function LightBlogA(props) {
</svg>
1.2K
</span>
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
<span className="text-gray-400 inline-flex items-center leading-none text-sm">
<svg
className="w-4 h-4 mr-1"
stroke="currentColor"
@@ -147,14 +147,14 @@ function LightBlogA(props) {
</div>
</div>
<div className="p-4 md:w-1/3">
<div className="h-full border-2 border-gray-200 rounded-lg overflow-hidden">
<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-500 mb-1">
<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">
@@ -183,7 +183,7 @@ function LightBlogA(props) {
<path d="M12 5l7 7-7 7" />
</svg>
</a>
<span className="text-gray-600 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
<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"
@@ -198,7 +198,7 @@ function LightBlogA(props) {
</svg>
1.2K
</span>
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
<span className="text-gray-400 inline-flex items-center leading-none text-sm">
<svg
className="w-4 h-4 mr-1"
stroke="currentColor"

26
src/blocks/blog/light/b.js
View File

@@ -3,12 +3,12 @@ import PropTypes from "prop-types";
function LightBlogB(props) {
return (
<section className="text-gray-700 body-font">
<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-200 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
<h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
<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">
@@ -34,7 +34,7 @@ function LightBlogB(props) {
</svg>
</a>
<div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
<span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
<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"
@@ -49,7 +49,7 @@ function LightBlogB(props) {
</svg>
1.2K
</span>
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
<span className="text-gray-400 inline-flex items-center leading-none text-sm">
<svg
className="w-4 h-4 mr-1"
stroke="currentColor"
@@ -67,8 +67,8 @@ function LightBlogB(props) {
</div>
</div>
<div className="p-4 lg:w-1/3">
<div className="h-full bg-gray-200 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
<h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
<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">
@@ -94,7 +94,7 @@ function LightBlogB(props) {
</svg>
</a>
<div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
<span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
<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"
@@ -109,7 +109,7 @@ function LightBlogB(props) {
</svg>
1.2K
</span>
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
<span className="text-gray-400 inline-flex items-center leading-none text-sm">
<svg
className="w-4 h-4 mr-1"
stroke="currentColor"
@@ -127,8 +127,8 @@ function LightBlogB(props) {
</div>
</div>
<div className="p-4 lg:w-1/3">
<div className="h-full bg-gray-200 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
<h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
<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">
@@ -154,7 +154,7 @@ function LightBlogB(props) {
</svg>
</a>
<div className="text-center mt-2 leading-none flex justify-center absolute bottom-0 left-0 w-full py-4">
<span className="text-gray-600 mr-3 inline-flex items-center leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
<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"
@@ -169,7 +169,7 @@ function LightBlogB(props) {
</svg>
1.2K
</span>
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
<span className="text-gray-400 inline-flex items-center leading-none text-sm">
<svg
className="w-4 h-4 mr-1"
stroke="currentColor"

22
src/blocks/blog/light/c.js
View File

@@ -3,11 +3,11 @@ import PropTypes from "prop-types";
function LightBlogC(props) {
return (
<section className="text-gray-700 body-font overflow-hidden">
<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-3 rounded bg-${props.theme}-100 text-${props.theme}-500 text-sm font-medium tracking-widest`}>
<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">
@@ -20,7 +20,7 @@ function LightBlogC(props) {
slow-carb etsy tumeric. Cray pug you probably haven't heard of them
hexagon kickstarter craft beer pork chic.
</p>
<div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-200 mt-auto w-full">
<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
@@ -36,7 +36,7 @@ function LightBlogC(props) {
<path d="M12 5l7 7-7 7" />
</svg>
</a>
<span className="text-gray-600 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
<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"
@@ -51,7 +51,7 @@ function LightBlogC(props) {
</svg>
1.2K
</span>
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
<span className="text-gray-400 inline-flex items-center leading-none text-sm">
<svg
className="w-4 h-4 mr-1"
stroke="currentColor"
@@ -76,12 +76,12 @@ function LightBlogC(props) {
<span className="title-font font-medium text-gray-900">
Holden Caulfield
</span>
<span className="text-gray-500 text-sm">UI DEVELOPER</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-3 rounded bg-${props.theme}-100 text-${props.theme}-500 text-sm font-medium tracking-widest`}>
<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">
@@ -93,7 +93,7 @@ function LightBlogC(props) {
hashtag waistcoat fashion axe chia unicorn. Plaid fixie chambray 90's,
slow-carb etsy tumeric.
</p>
<div className="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-200 mt-auto w-full">
<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
@@ -109,7 +109,7 @@ function LightBlogC(props) {
<path d="M12 5l7 7-7 7" />
</svg>
</a>
<span className="text-gray-600 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-300">
<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"
@@ -124,7 +124,7 @@ function LightBlogC(props) {
</svg>
1.2K
</span>
<span className="text-gray-600 inline-flex items-center leading-none text-sm">
<span className="text-gray-400 inline-flex items-center leading-none text-sm">
<svg
className="w-4 h-4 mr-1"
stroke="currentColor"
@@ -149,7 +149,7 @@ function LightBlogC(props) {
<span className="title-font font-medium text-gray-900">
Alper Kamu
</span>
<span className="text-gray-500 text-sm">DESIGNER</span>
<span className="text-gray-400 text-xs tracking-widest mt-0.5">DESIGNER</span>
</span>
</a>
</div>

18
src/blocks/blog/light/d.js
View File

@@ -3,12 +3,12 @@ import PropTypes from "prop-types";
function LightBlogD(props) {
return (
<section className="text-gray-700 body-font overflow-hidden">
<section className="text-gray-600 body-font overflow-hidden">
<div className="container px-5 py-24 mx-auto">
<div className="-my-8">
<div className="py-8 flex flex-wrap md:flex-no-wrap">
<div className="-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="tracking-widest font-medium title-font text-gray-900">
<span className="font-semibold title-font text-gray-700">
CATEGORY
</span>
<span className="mt-1 text-gray-500 text-sm">12 Jun 2019</span>
@@ -40,9 +40,9 @@ function LightBlogD(props) {
</a>
</div>
</div>
<div className="py-8 flex border-t-2 border-gray-200 flex-wrap md:flex-no-wrap">
<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="tracking-widest font-medium title-font text-gray-900">
<span className="font-semibold title-font text-gray-700">
CATEGORY
</span>
<span className="mt-1 text-gray-500 text-sm">12 Jun 2019</span>
@@ -74,12 +74,12 @@ function LightBlogD(props) {
</a>
</div>
</div>
<div className="py-8 flex border-t-2 border-gray-200 flex-wrap md:flex-no-wrap">
<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="tracking-widest font-medium title-font text-gray-900">
<span className="font-semibold title-font text-gray-700">
CATEGORY
</span>
<span className="mt-1 text-gray-500 text-sm">12 Jun 2019</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">

14
src/blocks/blog/light/e.js
View File

@@ -3,16 +3,16 @@ import PropTypes from "prop-types";
function LightBlogE(props) {
return (
<section className="text-gray-700 body-font">
<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-300">
<span className="text-gray-500 pb-2 mb-2 border-b-2 border-gray-200">
Jul
</span>
<span className="font-medium text-xl text-gray-800 title-font">
<span className="font-medium text-lg text-gray-800 title-font leading-none">
18
</span>
</div>
@@ -45,10 +45,10 @@ function LightBlogE(props) {
<div className="py-8 px-4 lg:w-1/3">
<div className="h-full flex items-start">
<div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
<span className="text-gray-500 pb-2 mb-2 border-b-2 border-gray-300">
<span className="text-gray-500 pb-2 mb-2 border-b-2 border-gray-200">
Jul
</span>
<span className="font-medium text-xl text-gray-800 title-font">
<span className="font-medium text-lg text-gray-800 title-font leading-none">
18
</span>
</div>
@@ -81,10 +81,10 @@ function LightBlogE(props) {
<div className="py-8 px-4 lg:w-1/3">
<div className="h-full flex items-start">
<div className="w-12 flex-shrink-0 flex flex-col text-center leading-none">
<span className="text-gray-500 pb-2 mb-2 border-b-2 border-gray-300">
<span className="text-gray-500 pb-2 mb-2 border-b-2 border-gray-200">
Jul
</span>
<span className="font-medium text-xl text-gray-800 title-font">
<span className="font-medium text-lg text-gray-800 title-font leading-none">
18
</span>
</div>

12
src/blocks/contact/dark/a.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkContactA(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font relative">
<section className="text-gray-400 bg-gray-900 body-font relative">
<div className="absolute inset-0 bg-gray-900">
<iframe
title="map"
@@ -18,11 +18,11 @@ function DarkContactA(props) {
/>
</div>
<div className="container px-5 py-24 mx-auto flex">
<div className="lg:w-1/3 md:w-1/2 bg-gray-900 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0 relative z-10">
<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 text-gray-500">
<p className="leading-relaxed mb-5">
Post-ironic portland shabby chic echo park, banjo fashion axe
</p>
<div className="relative mb-4">
@@ -36,7 +36,7 @@ function DarkContactA(props) {
type="email"
id="email"
name="email"
className={`w-full bg-gray-800 rounded border border-gray-700 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`}
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">
@@ -49,13 +49,13 @@ function DarkContactA(props) {
<textarea
id="message"
name="message"
className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
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-600 mt-3">
<p className="text-xs text-gray-400 text-opacity-90 mt-3">
Chicharrones blog helvetica normcore iceland tousled brook viral
artisan.
</p>

26
src/blocks/contact/dark/b.js
View File

@@ -3,8 +3,8 @@ import PropTypes from "prop-types";
function DarkContactB(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font relative">
<div className="container px-5 py-24 mx-auto flex sm:flex-no-wrap flex-wrap">
<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%"
@@ -18,24 +18,24 @@ function DarkContactB(props) {
scrolling="no"
src="https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;q=%C4%B0zmir+(My%20Business%20Name)&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed"
/>
<div className="bg-gray-900 relative flex flex-wrap py-6">
<div className="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-medium text-white tracking-widest text-sm">
<h2 className="title-font font-semibold text-white tracking-widest text-xs">
ADDRESS
</h2>
<p className="leading-relaxed">
<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-medium text-white tracking-widest text-sm">
<h2 className="title-font font-semibold text-white tracking-widest text-xs">
EMAIL
</h2>
<a href className={`text-${props.theme}-500 leading-relaxed`}>
<a href className={`text-${props.theme}-400 leading-relaxed`}>
example@email.com
</a>
<h2 className="title-font font-medium text-white tracking-widest text-sm mt-4">
<h2 className="title-font font-semibold text-white tracking-widest text-xs mt-4">
PHONE
</h2>
<p className="leading-relaxed">123-456-7890</p>
@@ -46,7 +46,7 @@ function DarkContactB(props) {
<h2 className="text-white text-lg mb-1 font-medium title-font">
Feedback
</h2>
<p className="leading-relaxed mb-5 text-gray-600">
<p className="leading-relaxed mb-5">
Post-ironic portland shabby chic echo park, banjo fashion axe
</p>
<div className="relative mb-4">
@@ -60,7 +60,7 @@ function DarkContactB(props) {
type="text"
id="name"
name="name"
className={`w-full bg-gray-800 rounded border border-gray-700 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`}
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">
@@ -74,7 +74,7 @@ function DarkContactB(props) {
type="email"
id="email"
name="email"
className={`w-full bg-gray-800 rounded border border-gray-700 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`}
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">
@@ -87,13 +87,13 @@ function DarkContactB(props) {
<textarea
id="message"
name="message"
className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
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-500 mt-3">
<p className="text-xs text-gray-400 text-opacity-90 mt-3">
Chicharrones blog helvetica normcore iceland tousled brook viral
artisan.
</p>

10
src/blocks/contact/dark/c.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkContactC(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font relative">
<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">
@@ -28,7 +28,7 @@ function DarkContactC(props) {
type="text"
id="name"
name="name"
className={`w-full bg-gray-800 rounded border border-gray-700 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`}
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>
@@ -44,7 +44,7 @@ function DarkContactC(props) {
type="email"
id="email"
name="email"
className={`w-full bg-gray-800 rounded border border-gray-700 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`}
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>
@@ -59,7 +59,7 @@ function DarkContactC(props) {
<textarea
id="message"
name="message"
className={`w-full bg-gray-800 rounded border border-gray-700 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
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>
@@ -69,7 +69,7 @@ function DarkContactC(props) {
</button>
</div>
<div className="p-2 w-full pt-8 mt-8 border-t border-gray-800 text-center">
<a href className={`text-${props.theme}-500`}>example@email.com</a>
<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>

8
src/blocks/contact/light/a.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightContactA(props) {
return (
<section className="text-gray-700 body-font relative">
<section className="text-gray-600 body-font relative">
<div className="absolute inset-0 bg-gray-300">
<iframe
width="100%"
@@ -18,7 +18,7 @@ function LightContactA(props) {
/>
</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">
<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>
@@ -36,7 +36,7 @@ function LightContactA(props) {
type="email"
id="email"
name="email"
className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
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">
@@ -49,7 +49,7 @@ function LightContactA(props) {
<textarea
id="message"
name="message"
className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
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`}>

20
src/blocks/contact/light/b.js
View File

@@ -3,8 +3,8 @@ import PropTypes from "prop-types";
function LightContactB(props) {
return (
<section className="text-gray-700 body-font relative">
<div className="container px-5 py-24 mx-auto flex sm:flex-no-wrap flex-wrap">
<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%"
@@ -18,24 +18,24 @@ function LightContactB(props) {
scrolling="no"
src="https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;q=%C4%B0zmir+(My%20Business%20Name)&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed"
/>
<div className="bg-white relative flex flex-wrap py-6">
<div className="bg-white relative flex flex-wrap py-6 rounded shadow-md">
<div className="lg:w-1/2 px-6">
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm">
<h2 className="title-font font-semibold text-gray-900 tracking-widest text-xs">
ADDRESS
</h2>
<p className="leading-relaxed">
<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-medium text-gray-900 tracking-widest text-sm">
<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-medium text-gray-900 tracking-widest text-sm mt-4">
<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>
@@ -60,7 +60,7 @@ function LightContactB(props) {
type="text"
id="name"
name="name"
className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
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">
@@ -74,7 +74,7 @@ function LightContactB(props) {
type="email"
id="email"
name="email"
className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
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">
@@ -87,7 +87,7 @@ function LightContactB(props) {
<textarea
id="message"
name="message"
className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
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`}>

8
src/blocks/contact/light/c.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightContactC(props) {
return (
<section className="text-gray-700 body-font relative">
<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">
@@ -28,7 +28,7 @@ function LightContactC(props) {
type="text"
id="name"
name="name"
className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
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>
@@ -44,7 +44,7 @@ function LightContactC(props) {
type="email"
id="email"
name="email"
className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
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>
@@ -59,7 +59,7 @@ function LightContactC(props) {
<textarea
id="message"
name="message"
className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 h-32 text-base outline-none text-gray-700 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out`}
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>

12
src/blocks/content/dark/a.js
View File

@@ -3,10 +3,10 @@ import PropTypes from "prop-types";
function DarkContentA(props) {
return (
<section className="text-gray-500 body-font bg-gray-900">
<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}-500 tracking-widest font-medium title-font mb-1`}>
<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">
@@ -28,7 +28,7 @@ function DarkContentA(props) {
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
hexagon disrupt edison bulbche.
</p>
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
<a href className={`text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"
@@ -51,7 +51,7 @@ function DarkContentA(props) {
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
hexagon disrupt edison bulbche.
</p>
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
<a href className={`text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"
@@ -74,7 +74,7 @@ function DarkContentA(props) {
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
hexagon disrupt edison bulbche.
</p>
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
<a href className={`text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"
@@ -97,7 +97,7 @@ function DarkContentA(props) {
Fingerstache flexitarian street art 8-bit waistcoat. Distillery
hexagon disrupt edison bulbche.
</p>
<a href className={`text-${props.theme}-500 inline-flex items-center`}>
<a href className={`text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"

20
src/blocks/content/dark/b.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkContentB(props) {
return (
<section className="text-gray-500 body-font bg-gray-900">
<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">
@@ -12,7 +12,7 @@ function DarkContentB(props) {
</h1>
<div className={`h-1 w-20 bg-${props.theme}-500 rounded`} />
</div>
<p className="lg:w-1/2 w-full leading-relaxed text-base">
<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&apos;t heard of them man bun deep jianbing selfies heirloom
@@ -21,13 +21,13 @@ function DarkContentB(props) {
</div>
<div className="flex flex-wrap -m-4">
<div className="xl:w-1/4 md:w-1/2 p-4">
<div className="bg-gray-800 p-6 rounded-lg">
<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}-500 text-xs font-medium title-font`}>
<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">
@@ -40,13 +40,13 @@ function DarkContentB(props) {
</div>
</div>
<div className="xl:w-1/4 md:w-1/2 p-4">
<div className="bg-gray-800 p-6 rounded-lg">
<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}-500 text-xs font-medium title-font`}>
<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">
@@ -59,13 +59,13 @@ function DarkContentB(props) {
</div>
</div>
<div className="xl:w-1/4 md:w-1/2 p-4">
<div className="bg-gray-800 p-6 rounded-lg">
<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}-500 text-xs font-medium title-font`}>
<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">
@@ -78,13 +78,13 @@ function DarkContentB(props) {
</div>
</div>
<div className="xl:w-1/4 md:w-1/2 p-4">
<div className="bg-gray-800 p-6 rounded-lg">
<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}-500 text-xs font-medium title-font`}>
<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">

16
src/blocks/content/dark/c.js
View File

@@ -3,20 +3,20 @@ import PropTypes from "prop-types";
function DarkContentC(props) {
return (
<section className="text-gray-500 body-font bg-gray-900">
<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-base">
<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-800 p-6 rounded-lg">
<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"
@@ -40,7 +40,7 @@ function DarkContentC(props) {
</div>
</div>
<div className="xl:w-1/3 md:w-1/2 p-4">
<div className="border border-gray-800 p-6 rounded-lg">
<div className="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"
@@ -66,7 +66,7 @@ function DarkContentC(props) {
</div>
</div>
<div className="xl:w-1/3 md:w-1/2 p-4">
<div className="border border-gray-800 p-6 rounded-lg">
<div className="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"
@@ -91,7 +91,7 @@ function DarkContentC(props) {
</div>
</div>
<div className="xl:w-1/3 md:w-1/2 p-4">
<div className="border border-gray-800 p-6 rounded-lg">
<div className="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"
@@ -115,7 +115,7 @@ function DarkContentC(props) {
</div>
</div>
<div className="xl:w-1/3 md:w-1/2 p-4">
<div className="border border-gray-800 p-6 rounded-lg">
<div className="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"
@@ -139,7 +139,7 @@ function DarkContentC(props) {
</div>
</div>
<div className="xl:w-1/3 md:w-1/2 p-4">
<div className="border border-gray-800 p-6 rounded-lg">
<div className="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"

6
src/blocks/content/dark/d.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkContentD(props) {
return (
<section className="text-gray-500 body-font bg-gray-900">
<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">
@@ -15,7 +15,7 @@ function DarkContentD(props) {
succulents. Actually taiyaki neutra, distillery gastropub pok pok
ugh.
</p>
<a href className={`text-${props.theme}-500 inline-flex items-center mt-4`}>
<a href className={`text-${props.theme}-400 inline-flex items-center mt-4`}>
Learn More
<svg
fill="none"
@@ -31,7 +31,7 @@ function DarkContentD(props) {
</a>
</div>
<div className="flex flex-col md:w-1/2 md:pl-12">
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
<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">

4
src/blocks/content/dark/e.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkContentE(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<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
@@ -19,7 +19,7 @@ function DarkContentE(props) {
<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`}>
<a href className={`text-${props.theme}-400 inline-flex items-center ml-4`}>
Learn More
<svg
fill="none"

6
src/blocks/content/dark/f.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkContentF(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<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">
@@ -34,7 +34,7 @@ function DarkContentF(props) {
Phoebe Caulfield
</h2>
<div className={`w-12 h-1 bg-${props.theme}-500 rounded mt-2 mb-4`}></div>
<p className="text-base text-gray-600">
<p className="text-base text-gray-400">
Raclette knausgaard hella meggs normcore williamsburg enamel
pin sartorial venmo tbh hot chicken gentrify portland.
</p>
@@ -52,7 +52,7 @@ function DarkContentF(props) {
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`}>
<a href className={`text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"

2
src/blocks/content/dark/g.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkContentG(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<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">

8
src/blocks/content/dark/h.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkContentH(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<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">
@@ -37,7 +37,7 @@ function DarkContentH(props) {
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`}>
<a href className={`text-${props.theme}-400 inline-flex items-center mt-3`}>
Learn More
<svg
fill="none"
@@ -68,7 +68,7 @@ function DarkContentH(props) {
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`}>
<a href className={`text-${props.theme}-400 inline-flex items-center mt-3`}>
Learn More
<svg
fill="none"
@@ -99,7 +99,7 @@ function DarkContentH(props) {
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`}>
<a href className={`text-${props.theme}-400 inline-flex items-center mt-3`}>
Learn More
<svg
fill="none"

10
src/blocks/content/light/a.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightContentA(props) {
return (
<section className="text-gray-700 body-font">
<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`}>
@@ -20,7 +20,7 @@ function LightContentA(props) {
</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">
<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>
@@ -43,7 +43,7 @@ function LightContentA(props) {
</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">
<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>
@@ -66,7 +66,7 @@ function LightContentA(props) {
</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">
<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>
@@ -89,7 +89,7 @@ function LightContentA(props) {
</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">
<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>

4
src/blocks/content/light/b.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightContentB(props) {
return (
<section className="text-gray-700 body-font">
<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">
@@ -12,7 +12,7 @@ function LightContentB(props) {
</h1>
<div className={`h-1 w-20 bg-${props.theme}-500 rounded`}></div>
</div>
<p className="lg:w-1/2 w-full leading-relaxed text-base">
<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&apos;t heard of them man bun deep jianbing selfies heirloom

16
src/blocks/content/light/c.js
View File

@@ -3,20 +3,20 @@ import PropTypes from "prop-types";
function LightContentC(props) {
return (
<section className="text-gray-700 body-font">
<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-base">
<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-300 p-6 rounded-lg">
<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"
@@ -40,7 +40,7 @@ function LightContentC(props) {
</div>
</div>
<div className="xl:w-1/3 md:w-1/2 p-4">
<div className="border border-gray-300 p-6 rounded-lg">
<div className="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"
@@ -66,7 +66,7 @@ function LightContentC(props) {
</div>
</div>
<div className="xl:w-1/3 md:w-1/2 p-4">
<div className="border border-gray-300 p-6 rounded-lg">
<div className="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"
@@ -91,7 +91,7 @@ function LightContentC(props) {
</div>
</div>
<div className="xl:w-1/3 md:w-1/2 p-4">
<div className="border border-gray-300 p-6 rounded-lg">
<div className="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"
@@ -115,7 +115,7 @@ function LightContentC(props) {
</div>
</div>
<div className="xl:w-1/3 md:w-1/2 p-4">
<div className="border border-gray-300 p-6 rounded-lg">
<div className="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"
@@ -139,7 +139,7 @@ function LightContentC(props) {
</div>
</div>
<div className="xl:w-1/3 md:w-1/2 p-4">
<div className="border border-gray-300 p-6 rounded-lg">
<div className="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"

6
src/blocks/content/light/d.js
View File

@@ -3,9 +3,9 @@ import PropTypes from "prop-types";
function LightContentD(props) {
return (
<section className="text-gray-700 body-font">
<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-300">
<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>
@@ -31,7 +31,7 @@ function LightContentD(props) {
</a>
</div>
<div className="flex flex-col md:w-1/2 md:pl-12">
<h2 className="title-font font-medium text-gray-800 tracking-widest text-sm mb-3">
<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">

2
src/blocks/content/light/e.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightContentE(props) {
return (
<section className="text-gray-700 body-font">
<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

6
src/blocks/content/light/f.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightContentF(props) {
return (
<section className="text-gray-700 body-font">
<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">
@@ -34,13 +34,13 @@ function LightContentF(props) {
Phoebe Caulfield
</h2>
<div className={`w-12 h-1 bg-${props.theme}-500 rounded mt-2 mb-4`}></div>
<p className="text-base text-gray-600">
<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-300 sm:border-t-0 border-t mt-4 pt-4 sm:mt-0 text-center sm:text-left">
<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

2
src/blocks/content/light/g.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightContentG(props) {
return (
<section className="text-gray-700 body-font">
<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">

2
src/blocks/content/light/h.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightContentH(props) {
return (
<section className="text-gray-700 body-font">
<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">

2
src/blocks/cta/dark/a.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkCTAA(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<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">

10
src/blocks/cta/dark/b.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkCTAB(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<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">
@@ -14,7 +14,7 @@ function DarkCTAB(props) {
hammock starladder roathse. Craies vegan tousled etsy austin.
</p>
</div>
<div className="lg:w-2/6 md:w-1/2 bg-gray-800 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
<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>
@@ -29,7 +29,7 @@ function DarkCTAB(props) {
type="text"
id="full-name"
name="full-name"
className={`w-full bg-gray-700 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`}
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">
@@ -43,13 +43,13 @@ function DarkCTAB(props) {
type="email"
id="email"
name="email"
className={`w-full bg-gray-700 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`}
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 text-gray-600 mt-3">
<p className="text-xs mt-3">
Literally you probably haven&apos;t heard of them jean shorts.
</p>
</div>

12
src/blocks/cta/dark/c.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkCTAC(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<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">
@@ -15,8 +15,8 @@ function DarkCTAC(props) {
haven&apos;t heard of them man bun deep.
</p>
</div>
<div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0 items-end">
<div className="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
<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"
@@ -27,10 +27,10 @@ function DarkCTAC(props) {
type="text"
id="full-name"
name="full-name"
className={`w-full bg-gray-800 rounded border border-gray-700 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`}
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:mr-4 mb-4 sm:mb-0 flex-grow w-full">
<div className="relative sm:mb-0 flex-grow w-full">
<label
htmlFor="email"
className="leading-7 text-sm text-gray-400"
@@ -41,7 +41,7 @@ function DarkCTAC(props) {
type="email"
id="email"
name="email"
className={`w-full bg-gray-800 rounded border border-gray-700 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`}
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`}>

10
src/blocks/cta/dark/d.js
View File

@@ -3,18 +3,18 @@ import PropTypes from "prop-types";
function DarkCTAD(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<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}-500 tracking-widest font-medium title-font mb-1`}>
<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">
<button className="bg-gray-800 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-700 focus:outline-none">
<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"
@@ -28,7 +28,7 @@ function DarkCTAD(props) {
<span className="title-font font-medium">Google Play</span>
</span>
</button>
<button className="bg-gray-800 inline-flex py-3 px-5 rounded-lg items-center ml-4 hover:bg-gray-700 focus:outline-none">
<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"

2
src/blocks/cta/light/a.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightCTAA(props) {
return (
<section className="text-gray-700 body-font">
<section className="text-gray-600 body-font">
<div className="container px-5 py-24 mx-auto">
<div className="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
<h1 className="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">

8
src/blocks/cta/light/b.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightCTAB(props) {
return (
<section className="text-gray-700 body-font">
<section className="text-gray-600 body-font">
<div className="container px-5 py-24 mx-auto flex flex-wrap items-center">
<div className="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
<h1 className="title-font font-medium text-3xl text-gray-900">
@@ -14,7 +14,7 @@ function LightCTAB(props) {
hammock starladder roathse. Craies vegan tousled etsy austin.
</p>
</div>
<div className="lg:w-2/6 md:w-1/2 bg-gray-200 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
<div className="lg:w-2/6 md:w-1/2 bg-gray-100 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
<h2 className="text-gray-900 text-lg font-medium title-font mb-5">
Sign Up
</h2>
@@ -29,7 +29,7 @@ function LightCTAB(props) {
type="text"
id="full-name"
name="full-name"
className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
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">
@@ -43,7 +43,7 @@ function LightCTAB(props) {
type="email"
id="email"
name="email"
className={`w-full bg-white rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
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>
<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`}>

12
src/blocks/cta/light/c.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightCTAC(props) {
return (
<section className="text-gray-700 body-font">
<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-12">
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">
@@ -15,8 +15,8 @@ function LightCTAC(props) {
haven&apos;t heard of them man bun deep.
</p>
</div>
<div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0 items-end">
<div className="relative sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
<div className="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:space-x-4 sm:space-y-0 space-y-4 sm:px-0 items-end">
<div className="relative flex-grow w-full">
<label
htmlFor="full-name"
className="leading-7 text-sm text-gray-600"
@@ -27,10 +27,10 @@ function LightCTAC(props) {
type="text"
id="full-name"
name="full-name"
className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
className={`w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-${props.theme}-500 focus:bg-transparent 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 sm:mr-4 mb-4 sm:mb-0 flex-grow w-full">
<div className="relative flex-grow w-full">
<label
htmlFor="email"
className="leading-7 text-sm text-gray-600"
@@ -41,7 +41,7 @@ function LightCTAC(props) {
type="email"
id="email"
name="email"
className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
className={`w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-${props.theme}-500 focus:bg-transparent 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>
<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`}>

8
src/blocks/cta/light/d.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightCTAD(props) {
return (
<section className="text-gray-700 body-font">
<section className="text-gray-600 body-font">
<div className="container px-5 py-24 mx-auto flex items-center md:flex-row flex-col">
<div className="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center">
<h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
@@ -13,8 +13,8 @@ function LightCTAD(props) {
Master Cleanse Reliac Heirloom
</h1>
</div>
<div className="flex md:ml-auto md:mr-0 mx-auto items-center flex-shrink-0">
<button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-300 focus:outline-none">
<div className="flex md:ml-auto md:mr-0 mx-auto items-center flex-shrink-0 space-x-4">
<button className="bg-gray-100 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-200 focus:outline-none">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
@@ -28,7 +28,7 @@ function LightCTAD(props) {
<span className="title-font font-medium">Google Play</span>
</span>
</button>
<button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center ml-4 hover:bg-gray-300 focus:outline-none">
<button className="bg-gray-100 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-200 focus:outline-none">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"

2
src/blocks/ecommerce/dark/a.js
View File

@@ -2,7 +2,7 @@ import React from "react";
function DarkEcommerceA() {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<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="lg:w-1/4 md:w-1/2 p-4 w-full">

28
src/blocks/ecommerce/dark/b.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkEcommerceB(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font overflow-hidden">
<section className="text-gray-400 bg-gray-900 body-font overflow-hidden">
<div className="container px-5 py-24 mx-auto">
<div className="lg:w-4/5 mx-auto flex flex-wrap">
<img
@@ -12,7 +12,7 @@ function DarkEcommerceB(props) {
src="https://dummyimage.com/400x400"
/>
<div className="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
<h2 className="text-sm title-font text-gray-600 tracking-widest">
<h2 className="text-sm title-font text-gray-500 tracking-widest">
BRAND NAME
</h2>
<h1 className="text-white text-3xl title-font font-medium mb-1">
@@ -26,7 +26,7 @@ function DarkEcommerceB(props) {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className={`w-4 h-4 text-${props.theme}-500`}
className={`w-4 h-4 text-${props.theme}-400`}
viewBox="0 0 24 24"
>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
@@ -37,7 +37,7 @@ function DarkEcommerceB(props) {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className={`w-4 h-4 text-${props.theme}-500`}
className={`w-4 h-4 text-${props.theme}-400`}
viewBox="0 0 24 24"
>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
@@ -48,7 +48,7 @@ function DarkEcommerceB(props) {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className={`w-4 h-4 text-${props.theme}-500`}
className={`w-4 h-4 text-${props.theme}-400`}
viewBox="0 0 24 24"
>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
@@ -59,7 +59,7 @@ function DarkEcommerceB(props) {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className={`w-4 h-4 text-${props.theme}-500`}
className={`w-4 h-4 text-${props.theme}-400`}
viewBox="0 0 24 24"
>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
@@ -70,14 +70,14 @@ function DarkEcommerceB(props) {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className={`w-4 h-4 text-${props.theme}-500`}
className={`w-4 h-4 text-${props.theme}-400`}
viewBox="0 0 24 24"
>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
</svg>
<span className="text-gray-500 ml-3">4 Reviews</span>
<span className="ml-3">4 Reviews</span>
</span>
<span className="flex ml-3 pl-3 py-2 border-l-2 border-gray-800 text-gray-600">
<span className="flex ml-3 pl-3 py-2 border-l-2 border-gray-800 text-gray-500 space-x-2">
<a href>
<svg
fill="currentColor"
@@ -90,7 +90,7 @@ function DarkEcommerceB(props) {
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
</svg>
</a>
<a href className="ml-2">
<a href>
<svg
fill="currentColor"
strokeLinecap="round"
@@ -102,7 +102,7 @@ function DarkEcommerceB(props) {
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
</svg>
</a>
<a href className="ml-2">
<a href>
<svg
fill="currentColor"
strokeLinecap="round"
@@ -118,7 +118,7 @@ function DarkEcommerceB(props) {
</div>
<p className="leading-relaxed">
Fam locavore kickstarter distillery. Mixtape chillwave tumeric
sriracha taximy chia microdosing tilde DIY. XOXO fam ${props.theme}
sriracha taximy chia microdosing tilde DIY. XOXO fam indxgo
juiceramps cornhole raw denim forage brooklyn. Everyday carry +1
seitan poutine tumeric. Gastropub blue bottle austin listicle
pour-over, neutra jean shorts keytar banjo tattooed umami
@@ -134,7 +134,7 @@ function DarkEcommerceB(props) {
<div className="flex ml-6 items-center">
<span className="mr-3">Size</span>
<div className="relative">
<select className={`rounded border border-gray-700 bg-gray-800 appearance-none py-2 focus:outline-none focus:border-${props.theme}-500 text-white pl-3 pr-10`}>
<select className={`rounded border border-gray-700 focus:ring-2 focus:ring-${props.theme}-900 bg-transparent appearance-none py-2 focus:outline-none focus:border-${props.theme}-500 text-white pl-3 pr-10`}>
<option>SM</option>
<option>M</option>
<option>L</option>
@@ -163,7 +163,7 @@ function DarkEcommerceB(props) {
<button className={`flex ml-auto text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
Button
</button>
<button className="rounded-full w-10 h-10 bg-gray-800 p-0 border-0 inline-flex items-center justify-center text-gray-600 ml-4">
<button className="rounded-full w-10 h-10 bg-gray-800 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4">
<svg
fill="currentColor"
strokeLinecap="round"

8
src/blocks/ecommerce/dark/c.js
View File

@@ -3,18 +3,18 @@ import PropTypes from "prop-types";
function DarkEcommerceC(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font overflow-hidden">
<section className="text-gray-400 bg-gray-900 body-font overflow-hidden">
<div className="container px-5 py-24 mx-auto">
<div className="lg:w-4/5 mx-auto flex flex-wrap">
<div className="lg:w-1/2 w-full lg:pr-10 lg:py-6 mb-6 lg:mb-0">
<h2 className="text-sm title-font text-gray-600 tracking-widest">
<h2 className="text-sm title-font text-gray-500 tracking-widest">
BRAND NAME
</h2>
<h1 className="text-white text-3xl title-font font-medium mb-4">
Animated Night Hill Illustrations
</h1>
<div className="flex mb-4">
<a href className={`flex-grow text-${props.theme}-500 border-b-2 border-${props.theme}-500 py-2 text-lg px-1`}>
<a href className={`flex-grow text-${props.theme}-400 border-b-2 border-${props.theme}-500 py-2 text-lg px-1`}>
Description
</a>
<a href className="flex-grow border-b-2 border-gray-800 py-2 text-lg px-1">
@@ -50,7 +50,7 @@ function DarkEcommerceC(props) {
<button className={`flex ml-auto text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
Button
</button>
<button className="rounded-full w-10 h-10 bg-gray-800 p-0 border-0 inline-flex items-center justify-center text-gray-600 ml-4">
<button className="rounded-full w-10 h-10 bg-gray-800 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4">
<svg
fill="currentColor"
strokeLinecap="round"

2
src/blocks/ecommerce/light/a.js
View File

@@ -2,7 +2,7 @@ import React from "react";
function LightEcommerceA() {
return (
<section className="text-gray-700 body-font">
<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="lg:w-1/4 md:w-1/2 p-4 w-full">

12
src/blocks/ecommerce/light/b.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightEcommerceB(props) {
return (
<section className="text-gray-700 body-font overflow-hidden">
<section className="text-gray-600 body-font overflow-hidden">
<div className="container px-5 py-24 mx-auto">
<div className="lg:w-4/5 mx-auto flex flex-wrap">
<img
@@ -77,7 +77,7 @@ function LightEcommerceB(props) {
</svg>
<span className="text-gray-600 ml-3">4 Reviews</span>
</span>
<span className="flex ml-3 pl-3 py-2 border-l-2 border-gray-200">
<span className="flex ml-3 pl-3 py-2 border-l-2 border-gray-200 space-x-2s">
<a href className="text-gray-500">
<svg
fill="currentColor"
@@ -90,7 +90,7 @@ function LightEcommerceB(props) {
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
</svg>
</a>
<a href className="ml-2 text-gray-500">
<a href className="text-gray-500">
<svg
fill="currentColor"
strokeLinecap="round"
@@ -102,7 +102,7 @@ function LightEcommerceB(props) {
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
</svg>
</a>
<a href className="ml-2 text-gray-500">
<a href className="text-gray-500">
<svg
fill="currentColor"
strokeLinecap="round"
@@ -124,7 +124,7 @@ function LightEcommerceB(props) {
pour-over, neutra jean shorts keytar banjo tattooed umami
cardigan.
</p>
<div className="flex mt-6 items-center pb-5 border-b-2 border-gray-200 mb-5">
<div className="flex mt-6 items-center pb-5 border-b-2 border-gray-100 mb-5">
<div className="flex">
<span className="mr-3">Color</span>
<button className="border-2 border-gray-300 rounded-full w-6 h-6 focus:outline-none"></button>
@@ -134,7 +134,7 @@ function LightEcommerceB(props) {
<div className="flex ml-6 items-center">
<span className="mr-3">Size</span>
<div className="relative">
<select className={`rounded border appearance-none border-gray-400 py-2 focus:outline-none focus:border-${props.theme}-500 text-base pl-3 pr-10`}>
<select className={`rounded border appearance-none border-gray-300 py-2 focus:outline-none focus:ring-2 focus:ring-${props.theme}-200 focus:border-${props.theme}-500 text-base pl-3 pr-10`}>
<option>SM</option>
<option>M</option>
<option>L</option>

8
src/blocks/ecommerce/light/c.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightEcommerceC(props) {
return (
<section className="text-gray-700 body-font overflow-hidden">
<section className="text-gray-600 body-font overflow-hidden">
<div className="container px-5 py-24 mx-auto">
<div className="lg:w-4/5 mx-auto flex flex-wrap">
<div className="lg:w-1/2 w-full lg:pr-10 lg:py-6 mb-6 lg:mb-0">
@@ -31,15 +31,15 @@ function LightEcommerceC(props) {
seitan poutine tumeric. Gastropub blue bottle austin listicle
pour-over, neutra jean.
</p>
<div className="flex border-t border-gray-300 py-2">
<div className="flex border-t border-gray-200 py-2">
<span className="text-gray-500">Color</span>
<span className="ml-auto text-gray-900">Blue</span>
</div>
<div className="flex border-t border-gray-300 py-2">
<div className="flex border-t border-gray-200 py-2">
<span className="text-gray-500">Size</span>
<span className="ml-auto text-gray-900">Medium</span>
</div>
<div className="flex border-t border-b mb-6 border-gray-300 py-2">
<div className="flex border-t border-b mb-6 border-gray-200 py-2">
<span className="text-gray-500">Quantity</span>
<span className="ml-auto text-gray-900">4</span>
</div>

16
src/blocks/feature/dark/a.js
View File

@@ -3,14 +3,14 @@ import PropTypes from "prop-types";
function DarkFeatureA(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<section className="text-gray-400 bg-gray-900 body-font">
<div className="container px-5 py-24 mx-auto">
<h1 className="sm:text-3xl text-2xl font-medium title-font text-center text-white mb-20">
Raw Denim Heirloom Man Braid<br className="hidden sm:block" />
Selfies Wayfarers
</h1>
<div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
<div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
<div className="p-4 md:w-1/3 flex">
<div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4 flex-shrink-0`}>
<svg
fill="none"
@@ -34,7 +34,7 @@ function DarkFeatureA(props) {
banh mi pug VHS try-hard ugh iceland kickstarter tumblr
live-edge tilde.
</p>
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
<a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"
@@ -50,7 +50,7 @@ function DarkFeatureA(props) {
</a>
</div>
</div>
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
<div className="p-4 md:w-1/3 flex">
<div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4 flex-shrink-0`}>
<svg
fill="none"
@@ -76,7 +76,7 @@ function DarkFeatureA(props) {
banh mi pug VHS try-hard ugh iceland kickstarter tumblr
live-edge tilde.
</p>
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
<a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"
@@ -92,7 +92,7 @@ function DarkFeatureA(props) {
</a>
</div>
</div>
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
<div className="p-4 md:w-1/3 flex">
<div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-4 flex-shrink-0`}>
<svg
fill="none"
@@ -117,7 +117,7 @@ function DarkFeatureA(props) {
banh mi pug VHS try-hard ugh iceland kickstarter tumblr
live-edge tilde.
</p>
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
<a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"

18
src/blocks/feature/dark/b.js
View File

@@ -3,13 +3,13 @@ import PropTypes from "prop-types";
function DarkFeatureB(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<section className="text-gray-400 bg-gray-900 body-font">
<div className="container px-5 py-24 mx-auto">
<div className="text-center mb-20">
<h1 className="sm:text-3xl text-2xl font-medium title-font text-white mb-4">
Raw Denim Heirloom Man Braid
</h1>
<p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
<p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto text-gray-400 text-opacity-80">
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi
pug.
@@ -18,8 +18,8 @@ function DarkFeatureB(props) {
<div className={`w-16 h-1 rounded-full bg-${props.theme}-500 inline-flex`}></div>
</div>
</div>
<div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
<div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
<div className="p-4 md:w-1/3 flex flex-col text-center items-center">
<div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-5 flex-shrink-0`}>
<svg
fill="none"
@@ -42,7 +42,7 @@ function DarkFeatureB(props) {
taxidermy. Gastropub indxgo juice poutine, ramps microdosing
banh mi pug VHS try-hard.
</p>
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
<a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"
@@ -58,7 +58,7 @@ function DarkFeatureB(props) {
</a>
</div>
</div>
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
<div className="p-4 md:w-1/3 flex flex-col text-center items-center">
<div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-5 flex-shrink-0`}>
<svg
fill="none"
@@ -83,7 +83,7 @@ function DarkFeatureB(props) {
taxidermy. Gastropub indxgo juice poutine, ramps microdosing
banh mi pug VHS try-hard.
</p>
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
<a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"
@@ -99,7 +99,7 @@ function DarkFeatureB(props) {
</a>
</div>
</div>
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
<div className="p-4 md:w-1/3 flex flex-col text-center items-center">
<div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-gray-800 text-${props.theme}-400 mb-5 flex-shrink-0`}>
<svg
fill="none"
@@ -123,7 +123,7 @@ function DarkFeatureB(props) {
taxidermy. Gastropub indxgo juice poutine, ramps microdosing
banh mi pug VHS try-hard.
</p>
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
<a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"

8
src/blocks/feature/dark/c.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkFeatureC(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<section className="text-gray-400 bg-gray-900 body-font">
<div className="container px-5 py-24 mx-auto flex flex-wrap">
<div className="lg:w-1/2 w-full mb-10 lg:mb-0 rounded-lg overflow-hidden">
<img
@@ -35,7 +35,7 @@ function DarkFeatureC(props) {
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
taxidermy. Gastropub indxgo juice poutine.
</p>
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
<a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"
@@ -75,7 +75,7 @@ function DarkFeatureC(props) {
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
taxidermy. Gastropub indxgo juice poutine.
</p>
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
<a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"
@@ -114,7 +114,7 @@ function DarkFeatureC(props) {
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
taxidermy. Gastropub indxgo juice poutine.
</p>
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
<a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"

4
src/blocks/feature/dark/d.js
View File

@@ -29,7 +29,7 @@ function DarkFeatureD(props) {
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
taxidermy. Gastropub indxgo juice poutine.
</p>
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
<a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"
@@ -70,7 +70,7 @@ function DarkFeatureD(props) {
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
taxidermy. Gastropub indxgo juice poutine.
</p>
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
<a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"

16
src/blocks/feature/dark/e.js
View File

@@ -3,10 +3,10 @@ import PropTypes from "prop-types";
function DarkFeatureE(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<section className="text-gray-400 bg-gray-900 body-font">
<div className="container px-5 py-24 mx-auto flex flex-wrap">
<div className="flex flex-col text-center w-full mb-20">
<h2 className={`text-xs text-${props.theme}-500 tracking-widest font-medium title-font mb-1`}>
<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 text-white">
@@ -15,7 +15,7 @@ function DarkFeatureE(props) {
</div>
<div className="flex flex-wrap -m-4">
<div className="p-4 md:w-1/3">
<div className="flex rounded-lg h-full bg-gray-800 p-8 flex-col">
<div className="flex rounded-lg h-full bg-gray-800 bg-opacity-60 p-8 flex-col">
<div className="flex items-center mb-3">
<div className={`w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-${props.theme}-500 text-white flex-shrink-0`}>
<svg
@@ -39,7 +39,7 @@ function DarkFeatureE(props) {
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
taxidermy. Gastropub indxgo juice poutine.
</p>
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
<a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"
@@ -57,7 +57,7 @@ function DarkFeatureE(props) {
</div>
</div>
<div className="p-4 md:w-1/3">
<div className="flex rounded-lg h-full bg-gray-800 p-8 flex-col">
<div className="flex rounded-lg h-full bg-gray-800 bg-opacity-60 p-8 flex-col">
<div className="flex items-center mb-3">
<div className={`w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-${props.theme}-500 text-white flex-shrink-0`}>
<svg
@@ -82,7 +82,7 @@ function DarkFeatureE(props) {
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
taxidermy. Gastropub indxgo juice poutine.
</p>
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
<a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"
@@ -100,7 +100,7 @@ function DarkFeatureE(props) {
</div>
</div>
<div className="p-4 md:w-1/3">
<div className="flex rounded-lg h-full bg-gray-800 p-8 flex-col">
<div className="flex rounded-lg h-full bg-gray-800 bg-opacity-60 p-8 flex-col">
<div className="flex items-center mb-3">
<div className={`w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-${props.theme}-500 text-white flex-shrink-0`}>
<svg
@@ -126,7 +126,7 @@ function DarkFeatureE(props) {
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
taxidermy. Gastropub indxgo juice poutine.
</p>
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
<a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"

8
src/blocks/feature/dark/f.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkFeatureF(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<section className="text-gray-400 bg-gray-900 body-font">
<div className="container px-5 py-24 mx-auto">
<div className="flex items-center lg:w-3/5 mx-auto border-b pb-10 mb-10 border-gray-800 sm:flex-row flex-col">
<div className={`sm:w-32 sm:h-32 h-20 w-20 sm:mr-10 inline-flex items-center justify-center rounded-full text-${props.theme}-400 bg-gray-800 flex-shrink-0`}>
@@ -27,7 +27,7 @@ function DarkFeatureF(props) {
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
taxidermy. Gastropub indxgo juice poutine.
</p>
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
<a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"
@@ -52,7 +52,7 @@ function DarkFeatureF(props) {
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
taxidermy. Gastropub indxgo juice poutine.
</p>
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
<a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"
@@ -106,7 +106,7 @@ function DarkFeatureF(props) {
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
taxidermy. Gastropub indxgo juice poutine.
</p>
<a href className={`mt-3 text-${props.theme}-500 inline-flex items-center`}>
<a href className={`mt-3 text-${props.theme}-400 inline-flex items-center`}>
Learn More
<svg
fill="none"

14
src/blocks/feature/dark/g.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkFeatureG(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<section className="text-gray-400 bg-gray-900 body-font">
<div className="container px-5 py-24 mx-auto">
<div className="text-center mb-20">
<h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-white mb-4">
@@ -24,7 +24,7 @@ function DarkFeatureG(props) {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="3"
className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
className={`text-${props.theme}-400 w-6 h-6 flex-shrink-0 mr-4`}
viewBox="0 0 24 24"
>
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
@@ -43,7 +43,7 @@ function DarkFeatureG(props) {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="3"
className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
className={`text-${props.theme}-400 w-6 h-6 flex-shrink-0 mr-4`}
viewBox="0 0 24 24"
>
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
@@ -62,7 +62,7 @@ function DarkFeatureG(props) {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="3"
className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
className={`text-${props.theme}-400 w-6 h-6 flex-shrink-0 mr-4`}
viewBox="0 0 24 24"
>
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
@@ -81,7 +81,7 @@ function DarkFeatureG(props) {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="3"
className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
className={`text-${props.theme}-400 w-6 h-6 flex-shrink-0 mr-4`}
viewBox="0 0 24 24"
>
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
@@ -100,7 +100,7 @@ function DarkFeatureG(props) {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="3"
className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
className={`text-${props.theme}-400 w-6 h-6 flex-shrink-0 mr-4`}
viewBox="0 0 24 24"
>
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
@@ -119,7 +119,7 @@ function DarkFeatureG(props) {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="3"
className={`text-${props.theme}-500 w-6 h-6 flex-shrink-0 mr-4`}
className={`text-${props.theme}-400 w-6 h-6 flex-shrink-0 mr-4`}
viewBox="0 0 24 24"
>
<path d="M22 11.08V12a10 10 0 11-5.93-9.14" />

50
src/blocks/feature/dark/h.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkFeatureH(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<section className="text-gray-400 bg-gray-900 body-font">
<div className="container px-5 py-24 mx-auto">
<div className="text-center mb-20">
<h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-white mb-4">
@@ -20,8 +20,8 @@ function DarkFeatureH(props) {
<h2 className="font-medium title-font tracking-widest text-white mb-4 text-sm text-center sm:text-left">
SHOOTING STARS
</h2>
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
<a href className="mb-2">
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1 space-y-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -37,7 +37,7 @@ function DarkFeatureH(props) {
</span>
First Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -53,7 +53,7 @@ function DarkFeatureH(props) {
</span>
Second Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -69,7 +69,7 @@ function DarkFeatureH(props) {
</span>
Third Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -85,7 +85,7 @@ function DarkFeatureH(props) {
</span>
Fourth Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -107,8 +107,8 @@ function DarkFeatureH(props) {
<h2 className="font-medium title-font tracking-widest text-white mb-4 text-sm text-center sm:text-left">
THE 400 BLOWS
</h2>
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
<a href className="mb-2">
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1 space-y-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -124,7 +124,7 @@ function DarkFeatureH(props) {
</span>
First Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -140,7 +140,7 @@ function DarkFeatureH(props) {
</span>
Second Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -156,7 +156,7 @@ function DarkFeatureH(props) {
</span>
Third Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -172,7 +172,7 @@ function DarkFeatureH(props) {
</span>
Fourth Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -194,8 +194,8 @@ function DarkFeatureH(props) {
<h2 className="font-medium title-font tracking-widest text-white mb-4 text-sm text-center sm:text-left">
THE CATALYZER
</h2>
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
<a href className="mb-2">
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1 space-y-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -211,7 +211,7 @@ function DarkFeatureH(props) {
</span>
First Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -227,7 +227,7 @@ function DarkFeatureH(props) {
</span>
Second Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -243,7 +243,7 @@ function DarkFeatureH(props) {
</span>
Third Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -259,7 +259,7 @@ function DarkFeatureH(props) {
</span>
Fourth Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -281,8 +281,8 @@ function DarkFeatureH(props) {
<h2 className="font-medium title-font tracking-widest text-white mb-4 text-sm text-center sm:text-left">
NEPTUNE
</h2>
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
<a href className="mb-2">
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1 space-y-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -298,7 +298,7 @@ function DarkFeatureH(props) {
</span>
First Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -314,7 +314,7 @@ function DarkFeatureH(props) {
</span>
Second Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -330,7 +330,7 @@ function DarkFeatureH(props) {
</span>
Third Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -346,7 +346,7 @@ function DarkFeatureH(props) {
</span>
Fourth Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-gray-800 text-${props.theme}-400 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"

10
src/blocks/feature/light/a.js
View File

@@ -3,14 +3,14 @@ import PropTypes from "prop-types";
function LightFeatureA(props) {
return (
<section className="text-gray-700 body-font">
<section className="text-gray-600 body-font">
<div className="container px-5 py-24 mx-auto">
<h1 className="sm:text-3xl text-2xl font-medium title-font text-center text-gray-900 mb-20">
Raw Denim Heirloom Man Braid<br className="hidden sm:block" />
Selfies Wayfarers
</h1>
<div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
<div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
<div className="p-4 md:w-1/3 flex">
<div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4 flex-shrink-0`}>
<svg
fill="none"
@@ -50,7 +50,7 @@ function LightFeatureA(props) {
</a>
</div>
</div>
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
<div className="p-4 md:w-1/3 flex">
<div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4 flex-shrink-0`}>
<svg
fill="none"
@@ -92,7 +92,7 @@ function LightFeatureA(props) {
</a>
</div>
</div>
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex">
<div className="p-4 md:w-1/3 flex">
<div className={`w-12 h-12 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-4 flex-shrink-0`}>
<svg
fill="none"

12
src/blocks/feature/light/b.js
View File

@@ -3,13 +3,13 @@ import PropTypes from "prop-types";
function LightFeatureB(props) {
return (
<section className="text-gray-700 body-font">
<section className="text-gray-600 body-font">
<div className="container px-5 py-24 mx-auto">
<div className="text-center mb-20">
<h1 className="sm:text-3xl text-2xl font-medium title-font text-gray-900 mb-4">
Raw Denim Heirloom Man Braid
</h1>
<p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
<p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto text-gray-500s">
Blue bottle crucifix vinyl post-ironic four dollar toast vegan
taxidermy. Gastropub indxgo juice poutine, ramps microdosing banh mi
pug.
@@ -18,8 +18,8 @@ function LightFeatureB(props) {
<div className={`w-16 h-1 rounded-full bg-${props.theme}-500 inline-flex`}></div>
</div>
</div>
<div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
<div className="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
<div className="p-4 md:w-1/3 flex flex-col text-center items-center">
<div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-5 flex-shrink-0`}>
<svg
fill="none"
@@ -58,7 +58,7 @@ function LightFeatureB(props) {
</a>
</div>
</div>
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
<div className="p-4 md:w-1/3 flex flex-col text-center items-center">
<div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-5 flex-shrink-0`}>
<svg
fill="none"
@@ -99,7 +99,7 @@ function LightFeatureB(props) {
</a>
</div>
</div>
<div className="p-4 md:w-1/3 md:mb-0 mb-6 flex flex-col text-center items-center">
<div className="p-4 md:w-1/3 flex flex-col text-center items-center">
<div className={`w-20 h-20 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 mb-5 flex-shrink-0`}>
<svg
fill="none"

2
src/blocks/feature/light/c.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightFeatureC(props) {
return (
<section className="text-gray-700 body-font">
<section className="text-gray-600 body-font">
<div className="container px-5 py-24 mx-auto flex flex-wrap">
<div className="lg:w-1/2 w-full mb-10 lg:mb-0 rounded-lg overflow-hidden">
<img

6
src/blocks/feature/light/d.js
View File

@@ -3,11 +3,11 @@ import PropTypes from "prop-types";
function LightFeatureD(props) {
return (
<section className="text-gray-700 body-font">
<section className="text-gray-600 body-font">
<div className="container px-5 py-24 mx-auto flex flex-wrap">
<div className="flex flex-wrap -m-4">
<div className="p-4 lg:w-1/2 md:w-full">
<div className="flex border-2 rounded-lg border-gray-200 p-8 sm:flex-row flex-col">
<div className="flex border-2 rounded-lg border-gray-200 border-opacity-50 p-8 sm:flex-row flex-col">
<div className={`w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 flex-shrink-0`}>
<svg
fill="none"
@@ -47,7 +47,7 @@ function LightFeatureD(props) {
</div>
</div>
<div className="p-4 lg:w-1/2 md:w-full">
<div className="flex border-2 rounded-lg border-gray-200 p-8 sm:flex-row flex-col">
<div className="flex border-2 rounded-lg border-gray-200 border-opacity-50 p-8 sm:flex-row flex-col">
<div className={`w-16 h-16 sm:mr-8 sm:mb-0 mb-4 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 flex-shrink-0`}>
<svg
fill="none"

2
src/blocks/feature/light/e.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightFeatureE(props) {
return (
<section className="text-gray-700 body-font">
<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`}>

2
src/blocks/feature/light/f.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightFeatureF(props) {
return (
<section className="text-gray-700 body-font">
<section className="text-gray-600 body-font">
<div className="container px-5 py-24 mx-auto">
<div className="flex items-center lg:w-3/5 mx-auto border-b pb-10 mb-10 border-gray-200 sm:flex-row flex-col">
<div className={`sm:w-32 sm:h-32 h-20 w-20 sm:mr-10 inline-flex items-center justify-center rounded-full bg-${props.theme}-100 text-${props.theme}-500 flex-shrink-0`}>

14
src/blocks/feature/light/g.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightFeatureG(props) {
return (
<section className="text-gray-700 body-font">
<section className="text-gray-600 body-font">
<div className="container px-5 py-24 mx-auto">
<div className="text-center mb-20">
<h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-gray-900 mb-4">
@@ -17,7 +17,7 @@ function LightFeatureG(props) {
</div>
<div className="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
<div className="p-2 sm:w-1/2 w-full">
<div className="bg-gray-200 rounded flex p-4 h-full items-center">
<div className="bg-gray-100 rounded flex p-4 h-full items-center">
<svg
fill="none"
stroke="currentColor"
@@ -36,7 +36,7 @@ function LightFeatureG(props) {
</div>
</div>
<div className="p-2 sm:w-1/2 w-full">
<div className="bg-gray-200 rounded flex p-4 h-full items-center">
<div className="bg-gray-100 rounded flex p-4 h-full items-center">
<svg
fill="none"
stroke="currentColor"
@@ -55,7 +55,7 @@ function LightFeatureG(props) {
</div>
</div>
<div className="p-2 sm:w-1/2 w-full">
<div className="bg-gray-200 rounded flex p-4 h-full items-center">
<div className="bg-gray-100 rounded flex p-4 h-full items-center">
<svg
fill="none"
stroke="currentColor"
@@ -74,7 +74,7 @@ function LightFeatureG(props) {
</div>
</div>
<div className="p-2 sm:w-1/2 w-full">
<div className="bg-gray-200 rounded flex p-4 h-full items-center">
<div className="bg-gray-100 rounded flex p-4 h-full items-center">
<svg
fill="none"
stroke="currentColor"
@@ -93,7 +93,7 @@ function LightFeatureG(props) {
</div>
</div>
<div className="p-2 sm:w-1/2 w-full">
<div className="bg-gray-200 rounded flex p-4 h-full items-center">
<div className="bg-gray-100 rounded flex p-4 h-full items-center">
<svg
fill="none"
stroke="currentColor"
@@ -110,7 +110,7 @@ function LightFeatureG(props) {
</div>
</div>
<div className="p-2 sm:w-1/2 w-full">
<div className="bg-gray-200 rounded flex p-4 h-full items-center">
<div className="bg-gray-100 rounded flex p-4 h-full items-center">
<svg
fill="none"
stroke="currentColor"

50
src/blocks/feature/light/h.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightFeatureH(props) {
return (
<section className="text-gray-700 body-font">
<section className="text-gray-600 body-font">
<div className="container px-5 py-24 mx-auto">
<div className="text-center mb-20">
<h1 className="sm:text-3xl text-2xl font-medium text-center title-font text-gray-900 mb-4">
@@ -20,8 +20,8 @@ function LightFeatureH(props) {
<h2 className="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">
SHOOTING STARS
</h2>
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
<a href className="mb-2">
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1 space-y-2.5">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -37,7 +37,7 @@ function LightFeatureH(props) {
</span>
First Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -53,7 +53,7 @@ function LightFeatureH(props) {
</span>
Second Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -69,7 +69,7 @@ function LightFeatureH(props) {
</span>
Third Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -85,7 +85,7 @@ function LightFeatureH(props) {
</span>
Fourth Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -107,8 +107,8 @@ function LightFeatureH(props) {
<h2 className="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">
THE 400 BLOWS
</h2>
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
<a href className="mb-2">
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1 space-y-2.5">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -124,7 +124,7 @@ function LightFeatureH(props) {
</span>
First Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -140,7 +140,7 @@ function LightFeatureH(props) {
</span>
Second Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -156,7 +156,7 @@ function LightFeatureH(props) {
</span>
Third Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -172,7 +172,7 @@ function LightFeatureH(props) {
</span>
Fourth Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -194,8 +194,8 @@ function LightFeatureH(props) {
<h2 className="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">
THE CATALYZER
</h2>
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
<a href className="mb-2">
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1 space-y-2.5">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -211,7 +211,7 @@ function LightFeatureH(props) {
</span>
First Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -227,7 +227,7 @@ function LightFeatureH(props) {
</span>
Second Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -243,7 +243,7 @@ function LightFeatureH(props) {
</span>
Third Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -259,7 +259,7 @@ function LightFeatureH(props) {
</span>
Fourth Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -281,8 +281,8 @@ function LightFeatureH(props) {
<h2 className="font-medium title-font tracking-widest text-gray-900 mb-4 text-sm text-center sm:text-left">
NEPTUNE
</h2>
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1">
<a href className="mb-2">
<nav className="flex flex-col sm:items-start sm:text-left text-center items-center -mb-1 space-y-2.5">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -298,7 +298,7 @@ function LightFeatureH(props) {
</span>
First Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -314,7 +314,7 @@ function LightFeatureH(props) {
</span>
Second Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -330,7 +330,7 @@ function LightFeatureH(props) {
</span>
Third Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"
@@ -346,7 +346,7 @@ function LightFeatureH(props) {
</span>
Fourth Link
</a>
<a href className="mb-2">
<a href>
<span className={`bg-${props.theme}-100 text-${props.theme}-500 w-4 h-4 mr-2 rounded-full inline-flex items-center justify-center`}>
<svg
fill="none"

50
src/blocks/footer/dark/a.js
View File

@@ -3,8 +3,8 @@ import PropTypes from "prop-types";
function DarkFooterA(props) {
return (
<footer className="text-gray-500 bg-gray-900 body-font">
<div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-no-wrap flex-wrap flex-col">
<footer className="text-gray-400 bg-gray-900 body-font">
<div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
<div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
<a href className="flex title-font font-medium items-center md:justify-start justify-center text-white">
<svg
@@ -21,7 +21,7 @@ function DarkFooterA(props) {
</svg>
<span className="ml-3 text-xl">tailblocks</span>
</a>
<p className="mt-2 text-sm text-gray-700">
<p className="mt-2 text-sm text-gray-500">
Air plant banjo lyft occupy retro adaptogen indego
</p>
</div>
@@ -32,16 +32,16 @@ function DarkFooterA(props) {
</h2>
<nav className="list-none mb-10">
<li>
<a href className="text-gray-600 hover:text-white">First Link</a>
<a href className="text-gray-400 hover:text-white">First Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Second Link</a>
<a href className="text-gray-400 hover:text-white">Second Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Third Link</a>
<a href className="text-gray-400 hover:text-white">Third Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
<a href className="text-gray-400 hover:text-white">Fourth Link</a>
</li>
</nav>
</div>
@@ -51,16 +51,16 @@ function DarkFooterA(props) {
</h2>
<nav className="list-none mb-10">
<li>
<a href className="text-gray-600 hover:text-white">First Link</a>
<a href className="text-gray-400 hover:text-white">First Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Second Link</a>
<a href className="text-gray-400 hover:text-white">Second Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Third Link</a>
<a href className="text-gray-400 hover:text-white">Third Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
<a href className="text-gray-400 hover:text-white">Fourth Link</a>
</li>
</nav>
</div>
@@ -70,16 +70,16 @@ function DarkFooterA(props) {
</h2>
<nav className="list-none mb-10">
<li>
<a href className="text-gray-600 hover:text-white">First Link</a>
<a href className="text-gray-400 hover:text-white">First Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Second Link</a>
<a href className="text-gray-400 hover:text-white">Second Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Third Link</a>
<a href className="text-gray-400 hover:text-white">Third Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
<a href className="text-gray-400 hover:text-white">Fourth Link</a>
</li>
</nav>
</div>
@@ -89,31 +89,31 @@ function DarkFooterA(props) {
</h2>
<nav className="list-none mb-10">
<li>
<a href className="text-gray-600 hover:text-white">First Link</a>
<a href className="text-gray-400 hover:text-white">First Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Second Link</a>
<a href className="text-gray-400 hover:text-white">Second Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Third Link</a>
<a href className="text-gray-400 hover:text-white">Third Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
<a href className="text-gray-400 hover:text-white">Fourth Link</a>
</li>
</nav>
</div>
</div>
</div>
<div className="bg-gray-800">
<div className="bg-gray-800 bg-opacity-75">
<div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
<p className="text-gray-600 text-sm text-center sm:text-left">
<p className="text-gray-400 text-sm text-center sm:text-left">
© 2020 tailblocks —
<a href="https://twitter.com/knyttneve" rel="noopener noreferrer" className="text-gray-500 ml-1" target="_blank">
@knyttneve
</a>
</p>
<span className="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
<a href className="text-gray-600">
<a href className="text-gray-400">
<svg
fill="currentColor"
strokeLinecap="round"
@@ -125,7 +125,7 @@ function DarkFooterA(props) {
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
</svg>
</a>
<a href className="ml-3 text-gray-600">
<a href className="ml-3 text-gray-400">
<svg
fill="currentColor"
strokeLinecap="round"
@@ -137,7 +137,7 @@ function DarkFooterA(props) {
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
</svg>
</a>
<a href className="ml-3 text-gray-600">
<a href className="ml-3 text-gray-400">
<svg
fill="none"
stroke="currentColor"
@@ -151,7 +151,7 @@ function DarkFooterA(props) {
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
</svg>
</a>
<a href className="ml-3 text-gray-600">
<a href className="ml-3 text-gray-400">
<svg
fill="currentColor"
stroke="currentColor"

51
src/blocks/footer/dark/b.js
View File

@@ -1,10 +1,11 @@
import React from "react";
import PropTypes from "prop-types";
function DarkFooterB(props) {
return (
<footer className="text-gray-500 bg-gray-900 body-font">
<div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-no-wrap flex-wrap flex-col">
<footer className="text-gray-400 bg-gray-900 body-font">
<div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
<div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left md:mt-0 mt-10">
<a href className="flex title-font font-medium items-center md:justify-start justify-center text-white">
<svg
@@ -21,7 +22,7 @@ function DarkFooterB(props) {
</svg>
<span className="ml-3 text-xl">tailblocks</span>
</a>
<p className="mt-2 text-sm text-gray-700">
<p className="mt-2 text-sm text-gray-500">
Air plant banjo lyft occupy retro adaptogen indego
</p>
</div>
@@ -32,16 +33,16 @@ function DarkFooterB(props) {
</h2>
<nav className="list-none mb-10">
<li>
<a href className="text-gray-600 hover:text-white">First Link</a>
<a href className="text-gray-400 hover:text-white">First Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Second Link</a>
<a href className="text-gray-400 hover:text-white">Second Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Third Link</a>
<a href className="text-gray-400 hover:text-white">Third Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
<a href className="text-gray-400 hover:text-white">Fourth Link</a>
</li>
</nav>
</div>
@@ -51,16 +52,16 @@ function DarkFooterB(props) {
</h2>
<nav className="list-none mb-10">
<li>
<a href className="text-gray-600 hover:text-white">First Link</a>
<a href className="text-gray-400 hover:text-white">First Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Second Link</a>
<a href className="text-gray-400 hover:text-white">Second Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Third Link</a>
<a href className="text-gray-400 hover:text-white">Third Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
<a href className="text-gray-400 hover:text-white">Fourth Link</a>
</li>
</nav>
</div>
@@ -70,16 +71,16 @@ function DarkFooterB(props) {
</h2>
<nav className="list-none mb-10">
<li>
<a href className="text-gray-600 hover:text-white">First Link</a>
<a href className="text-gray-400 hover:text-white">First Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Second Link</a>
<a href className="text-gray-400 hover:text-white">Second Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Third Link</a>
<a href className="text-gray-400 hover:text-white">Third Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
<a href className="text-gray-400 hover:text-white">Fourth Link</a>
</li>
</nav>
</div>
@@ -89,31 +90,31 @@ function DarkFooterB(props) {
</h2>
<nav className="list-none mb-10">
<li>
<a href className="text-gray-600 hover:text-white">First Link</a>
<a href className="text-gray-400 hover:text-white">First Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Second Link</a>
<a href className="text-gray-400 hover:text-white">Second Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Third Link</a>
<a href className="text-gray-400 hover:text-white">Third Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
<a href className="text-gray-400 hover:text-white">Fourth Link</a>
</li>
</nav>
</div>
</div>
</div>
<div className="bg-gray-800">
<div className="bg-gray-800 bg-opacity-75">
<div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
<p className="text-gray-600 text-sm text-center sm:text-left">
<p className="text-gray-400 text-sm text-center sm:text-left">
© 2020 tailblocks —
<a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" rel="noopener noreferrer" target="_blank">
@knyttneve
</a>
</p>
<span className="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
<a href className="text-gray-600">
<a href className="text-gray-400">
<svg
fill="currentColor"
strokeLinecap="round"
@@ -125,7 +126,7 @@ function DarkFooterB(props) {
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
</svg>
</a>
<a href className="ml-3 text-gray-600">
<a href className="ml-3 text-gray-400">
<svg
fill="currentColor"
strokeLinecap="round"
@@ -137,7 +138,7 @@ function DarkFooterB(props) {
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
</svg>
</a>
<a href className="ml-3 text-gray-600">
<a href className="ml-3 text-gray-400">
<svg
fill="none"
stroke="currentColor"
@@ -151,7 +152,7 @@ function DarkFooterB(props) {
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
</svg>
</a>
<a href className="ml-3 text-gray-600">
<a href className="ml-3 text-gray-400">
<svg
fill="currentColor"
stroke="currentColor"

70
src/blocks/footer/dark/c.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkFooterC(props) {
return (
<footer className="text-gray-500 bg-gray-900 body-font">
<footer className="text-gray-400 bg-gray-900 body-font">
<div className="container px-5 py-24 mx-auto">
<div className="flex flex-wrap md:text-left text-center -mb-10 -mx-4">
<div className="lg:w-1/6 md:w-1/2 w-full px-4">
@@ -12,16 +12,16 @@ function DarkFooterC(props) {
</h2>
<nav className="list-none mb-10">
<li>
<a href className="text-gray-600 hover:text-white">First Link</a>
<a href className="text-gray-400 hover:text-white">First Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Second Link</a>
<a href className="text-gray-400 hover:text-white">Second Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Third Link</a>
<a href className="text-gray-400 hover:text-white">Third Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
<a href className="text-gray-400 hover:text-white">Fourth Link</a>
</li>
</nav>
</div>
@@ -31,16 +31,16 @@ function DarkFooterC(props) {
</h2>
<nav className="list-none mb-10">
<li>
<a href className="text-gray-600 hover:text-white">First Link</a>
<a href className="text-gray-400 hover:text-white">First Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Second Link</a>
<a href className="text-gray-400 hover:text-white">Second Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Third Link</a>
<a href className="text-gray-400 hover:text-white">Third Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
<a href className="text-gray-400 hover:text-white">Fourth Link</a>
</li>
</nav>
</div>
@@ -50,16 +50,16 @@ function DarkFooterC(props) {
</h2>
<nav className="list-none mb-10">
<li>
<a href className="text-gray-600 hover:text-white">First Link</a>
<a href className="text-gray-400 hover:text-white">First Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Second Link</a>
<a href className="text-gray-400 hover:text-white">Second Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Third Link</a>
<a href className="text-gray-400 hover:text-white">Third Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
<a href className="text-gray-400 hover:text-white">Fourth Link</a>
</li>
</nav>
</div>
@@ -69,16 +69,16 @@ function DarkFooterC(props) {
</h2>
<nav className="list-none mb-10">
<li>
<a href className="text-gray-600 hover:text-white">First Link</a>
<a href className="text-gray-400 hover:text-white">First Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Second Link</a>
<a href className="text-gray-400 hover:text-white">Second Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Third Link</a>
<a href className="text-gray-400 hover:text-white">Third Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
<a href className="text-gray-400 hover:text-white">Fourth Link</a>
</li>
</nav>
</div>
@@ -88,16 +88,16 @@ function DarkFooterC(props) {
</h2>
<nav className="list-none mb-10">
<li>
<a href className="text-gray-600 hover:text-white">First Link</a>
<a href className="text-gray-400 hover:text-white">First Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Second Link</a>
<a href className="text-gray-400 hover:text-white">Second Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Third Link</a>
<a href className="text-gray-400 hover:text-white">Third Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
<a href className="text-gray-400 hover:text-white">Fourth Link</a>
</li>
</nav>
</div>
@@ -107,16 +107,16 @@ function DarkFooterC(props) {
</h2>
<nav className="list-none mb-10">
<li>
<a href className="text-gray-600 hover:text-white">First Link</a>
<a href className="text-gray-400 hover:text-white">First Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Second Link</a>
<a href className="text-gray-400 hover:text-white">Second Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Third Link</a>
<a href className="text-gray-400 hover:text-white">Third Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
<a href className="text-gray-400 hover:text-white">Fourth Link</a>
</li>
</nav>
</div>
@@ -124,7 +124,7 @@ function DarkFooterC(props) {
</div>
<div className="border-t border-gray-800">
<div className="container px-5 py-8 flex flex-wrap mx-auto items-center">
<div className="flex md:flex-no-wrap flex-wrap justify-center items-end md:justify-start">
<div className="flex md:flex-nowrap flex-wrap justify-center items-end md:justify-start">
<div className="relative sm:w-64 w-40 sm:mr-4 mr-2">
<label
htmlFor="footer-field"
@@ -136,19 +136,19 @@ function DarkFooterC(props) {
type="text"
id="footer-field"
name="footer-field"
className={`w-full bg-gray-800 rounded border border-gray-700 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`}
className={`w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:ring-2 focus:ring-${props.theme}-900 focus:bg-transparent 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={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
Button
</button>
<p className="text-gray-600 text-sm md:ml-6 md:mt-0 mt-2 text-center sm:text-left">
<p className="text-gray-500 text-sm md:ml-6 md:mt-0 mt-2 text-center sm:text-left">
Bitters chicharrones fanny pack
<br className="lg:block hidden"></br>waistcoat green juice
</p>
</div>
<span className="inline-flex lg:ml-auto lg:mt-0 mt-6 w-full justify-center md:justify-start md:w-auto">
<a href className="text-gray-600">
<a href className="text-gray-400">
<svg
fill="currentColor"
strokeLinecap="round"
@@ -160,7 +160,7 @@ function DarkFooterC(props) {
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
</svg>
</a>
<a href className="ml-3 text-gray-600">
<a href className="ml-3 text-gray-400">
<svg
fill="currentColor"
strokeLinecap="round"
@@ -172,7 +172,7 @@ function DarkFooterC(props) {
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
</svg>
</a>
<a href className="ml-3 text-gray-600">
<a href className="ml-3 text-gray-400">
<svg
fill="none"
stroke="currentColor"
@@ -186,7 +186,7 @@ function DarkFooterC(props) {
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
</svg>
</a>
<a href className="ml-3 text-gray-600">
<a href className="ml-3 text-gray-400">
<svg
fill="currentColor"
stroke="currentColor"
@@ -206,15 +206,15 @@ function DarkFooterC(props) {
</span>
</div>
</div>
<div className="bg-gray-800">
<div className="bg-gray-800 bg-opacity-75">
<div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
<p className="text-gray-600 text-sm text-center sm:text-left">
<p className="text-gray-400 text-sm text-center sm:text-left">
© 2020 tailblocks —
<a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">
@knyttneve
</a>
</p>
<span className="sm:ml-auto sm:mt-0 mt-2 sm:w-auto w-full sm:text-left text-center text-gray-600 text-sm">
<span className="sm:ml-auto sm:mt-0 mt-2 sm:w-auto w-full sm:text-left text-center text-gray-400 text-sm">
Enamel pin tousled raclette tacos irony
</span>
</div>

12
src/blocks/footer/dark/d.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkFooterD(props) {
return (
<footer className="text-gray-500 bg-gray-900 body-font">
<footer className="text-gray-400 bg-gray-900 body-font">
<div className="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
<a href className="flex title-font font-medium items-center md:justify-start justify-center text-white">
<svg
@@ -20,14 +20,14 @@ function DarkFooterD(props) {
</svg>
<span className="ml-3 text-xl">tailblocks</span>
</a>
<p className="text-sm text-gray-600 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-800 sm:py-2 sm:mt-0 mt-4">
<p className="text-sm text-gray-400 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-800 sm:py-2 sm:mt-0 mt-4">
© 2020 tailblocks —
<a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">
@knyttneve
</a>
</p>
<span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
<a href className="text-gray-600">
<a href className="text-gray-400">
<svg
fill="currentColor"
strokeLinecap="round"
@@ -39,7 +39,7 @@ function DarkFooterD(props) {
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
</svg>
</a>
<a href className="ml-3 text-gray-600">
<a href className="ml-3 text-gray-400">
<svg
fill="currentColor"
strokeLinecap="round"
@@ -51,7 +51,7 @@ function DarkFooterD(props) {
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
</svg>
</a>
<a href className="ml-3 text-gray-600">
<a href className="ml-3 text-gray-400">
<svg
fill="none"
stroke="currentColor"
@@ -65,7 +65,7 @@ function DarkFooterD(props) {
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
</svg>
</a>
<a href className="ml-3 text-gray-600">
<a href className="ml-3 text-gray-400">
<svg
fill="currentColor"
stroke="currentColor"

44
src/blocks/footer/dark/e.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkFooterE(props) {
return (
<footer className="text-gray-500 bg-gray-900 body-font">
<footer className="text-gray-400 bg-gray-900 body-font">
<div className="container px-5 py-24 mx-auto">
<div className="flex flex-wrap md:text-left text-center order-first">
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
@@ -12,16 +12,16 @@ function DarkFooterE(props) {
</h2>
<nav className="list-none mb-10">
<li>
<a href className="text-gray-600 hover:text-white">First Link</a>
<a href className="text-gray-400 hover:text-white">First Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Second Link</a>
<a href className="text-gray-400 hover:text-white">Second Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Third Link</a>
<a href className="text-gray-400 hover:text-white">Third Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
<a href className="text-gray-400 hover:text-white">Fourth Link</a>
</li>
</nav>
</div>
@@ -31,16 +31,16 @@ function DarkFooterE(props) {
</h2>
<nav className="list-none mb-10">
<li>
<a href className="text-gray-600 hover:text-white">First Link</a>
<a href className="text-gray-400 hover:text-white">First Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Second Link</a>
<a href className="text-gray-400 hover:text-white">Second Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Third Link</a>
<a href className="text-gray-400 hover:text-white">Third Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
<a href className="text-gray-400 hover:text-white">Fourth Link</a>
</li>
</nav>
</div>
@@ -50,16 +50,16 @@ function DarkFooterE(props) {
</h2>
<nav className="list-none mb-10">
<li>
<a href className="text-gray-600 hover:text-white">First Link</a>
<a href className="text-gray-400 hover:text-white">First Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Second Link</a>
<a href className="text-gray-400 hover:text-white">Second Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Third Link</a>
<a href className="text-gray-400 hover:text-white">Third Link</a>
</li>
<li>
<a href className="text-gray-600 hover:text-white">Fourth Link</a>
<a href className="text-gray-400 hover:text-white">Fourth Link</a>
</li>
</nav>
</div>
@@ -67,7 +67,7 @@ function DarkFooterE(props) {
<h2 className="title-font font-medium text-white tracking-widest text-sm mb-3">
SUBSCRIBE
</h2>
<div className="flex xl:flex-no-wrap md:flex-no-wrap lg:flex-wrap flex-wrap justify-center items-end md:justify-start">
<div className="flex xl:flex-nowrap md:flex-nowrap lg:flex-wrap flex-wrap justify-center items-end md:justify-start">
<div className="relative w-40 sm:w-auto xl:mr-4 lg:mr-0 sm:mr-4 mr-2">
<label
htmlFor="footer-field"
@@ -79,21 +79,21 @@ function DarkFooterE(props) {
type="text"
id="footer-field"
name="footer-field"
className={`w-full bg-gray-800 rounded border border-gray-700 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`}
className={`w-full bg-gray-800 rounded border bg-opacity-40 border-gray-700 focus:bg-transparent focus:ring-2 focus:ring-${props.theme}-900 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={`lg:mt-2 xl:mt-0 flex-shrink-0 inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
Button
</button>
</div>
<p className="text-gray-600 text-sm mt-2 md:text-left text-center">
<p className="text-gray-500 text-sm mt-2 md:text-left text-center">
Bitters chicharrones fanny pack
<br className="lg:block hidden"></br>waistcoat green juice
</p>
</div>
</div>
</div>
<div className="bg-gray-800">
<div className="bg-gray-800 bg-opacity-75">
<div className="container px-5 py-6 mx-auto flex items-center sm:flex-row flex-col">
<a href className="flex title-font font-medium items-center md:justify-start justify-center text-white">
<svg
@@ -110,14 +110,14 @@ function DarkFooterE(props) {
</svg>
<span className="ml-3 text-xl">tailblocks</span>
</a>
<p className="text-sm text-gray-600 sm:ml-6 sm:mt-0 mt-4">
<p className="text-sm text-gray-400 sm:ml-6 sm:mt-0 mt-4">
© 2020 tailblocks —
<a href="https://twitter.com/knyttneve" className="text-gray-500 ml-1" target="_blank" rel="noopener noreferrer">
@knyttneve
</a>
</p>
<span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
<a href className="text-gray-600">
<a href className="text-gray-400">
<svg
fill="currentColor"
strokeLinecap="round"
@@ -129,7 +129,7 @@ function DarkFooterE(props) {
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
</svg>
</a>
<a href className="ml-3 text-gray-600">
<a href className="ml-3 text-gray-400">
<svg
fill="currentColor"
strokeLinecap="round"
@@ -141,7 +141,7 @@ function DarkFooterE(props) {
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
</svg>
</a>
<a href className="ml-3 text-gray-600">
<a href className="ml-3 text-gray-400">
<svg
fill="none"
stroke="currentColor"
@@ -155,7 +155,7 @@ function DarkFooterE(props) {
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01" />
</svg>
</a>
<a href className="ml-3 text-gray-600">
<a href className="ml-3 text-gray-400">
<svg
fill="currentColor"
stroke="currentColor"

6
src/blocks/footer/light/a.js
View File

@@ -3,8 +3,8 @@ import PropTypes from "prop-types";
function LightFooterA(props) {
return (
<footer className="text-gray-700 body-font">
<div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-no-wrap flex-wrap flex-col">
<footer className="text-gray-600 body-font">
<div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
<div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
<a href className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
<svg
@@ -104,7 +104,7 @@ function LightFooterA(props) {
</div>
</div>
</div>
<div className="bg-gray-200">
<div className="bg-gray-100">
<div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
<p className="text-gray-500 text-sm text-center sm:text-left">
© 2020 tailblocks —

6
src/blocks/footer/light/b.js
View File

@@ -3,8 +3,8 @@ import PropTypes from "prop-types";
function LightFooterB(props) {
return (
<footer className="text-gray-700 body-font">
<div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-no-wrap flex-wrap flex-col">
<footer className="text-gray-600 body-font">
<div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
<div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left md:mt-0 mt-10">
<a href className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
<svg
@@ -104,7 +104,7 @@ function LightFooterB(props) {
</div>
</div>
</div>
<div className="bg-gray-200">
<div className="bg-gray-100">
<div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
<p className="text-gray-500 text-sm text-center sm:text-left">
© 2020 tailblocks —

8
src/blocks/footer/light/c.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightFooterC(props) {
return (
<footer className="text-gray-700 body-font">
<footer className="text-gray-600 body-font">
<div className="container px-5 py-24 mx-auto">
<div className="flex flex-wrap md:text-left text-center -mb-10 -mx-4">
<div className="lg:w-1/6 md:w-1/2 w-full px-4">
@@ -124,7 +124,7 @@ function LightFooterC(props) {
</div>
<div className="border-t border-gray-200">
<div className="container px-5 py-8 flex flex-wrap mx-auto items-center">
<div className="flex md:flex-no-wrap flex-wrap justify-center items-end md:justify-start">
<div className="flex md:flex-nowrap flex-wrap justify-center items-end md:justify-start">
<div className="relative sm:w-64 w-40 sm:mr-4 mr-2">
<label
htmlFor="footer-field"
@@ -136,7 +136,7 @@ function LightFooterC(props) {
type="text"
id="footer-field"
name="footer-field"
className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
className={`w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:ring-2 focus:bg-transparent focus:ring-${props.theme}-200 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
@@ -206,7 +206,7 @@ function LightFooterC(props) {
</span>
</div>
</div>
<div className="bg-gray-200">
<div className="bg-gray-100">
<div className="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
<p className="text-gray-500 text-sm text-center sm:text-left">
© 2020 tailblocks —

2
src/blocks/footer/light/d.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightFooterD(props) {
return (
<footer className="text-gray-700 body-font">
<footer className="text-gray-600 body-font">
<div className="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
<a href className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
<svg

8
src/blocks/footer/light/e.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightFooterE(props) {
return (
<footer className="text-gray-700 body-font">
<footer className="text-gray-600 body-font">
<div className="container px-5 py-24 mx-auto">
<div className="flex flex-wrap md:text-left text-center order-first">
<div className="lg:w-1/4 md:w-1/2 w-full px-4">
@@ -67,7 +67,7 @@ function LightFooterE(props) {
<h2 className="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
SUBSCRIBE
</h2>
<div className="flex xl:flex-no-wrap md:flex-no-wrap lg:flex-wrap flex-wrap justify-center items-end md:justify-start">
<div className="flex xl:flex-nowrap md:flex-nowrap lg:flex-wrap flex-wrap justify-center items-end md:justify-start">
<div className="relative w-40 sm:w-auto xl:mr-4 lg:mr-0 sm:mr-4 mr-2">
<label
htmlFor="footer-field"
@@ -79,7 +79,7 @@ function LightFooterE(props) {
type="text"
id="footer-field"
name="footer-field"
className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
className={`w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:bg-transparent focus:ring-2 focus:ring-${props.theme}-200 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
<button className={`lg:mt-2 xl:mt-0 flex-shrink-0 inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded`}>
@@ -93,7 +93,7 @@ function LightFooterE(props) {
</div>
</div>
</div>
<div className="bg-gray-200">
<div className="bg-gray-100">
<div className="container px-5 py-6 mx-auto flex items-center sm:flex-row flex-col">
<a href className="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
<svg

2
src/blocks/gallery/dark/a.js
View File

@@ -2,7 +2,7 @@ import React from "react";
function DarkGalleryA() {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<section className="text-gray-400 bg-gray-900 body-font">
<div className="container px-5 py-24 mx-auto flex flex-wrap">
<div className="flex w-full mb-20 flex-wrap">
<h1 className="sm:text-3xl text-2xl font-medium title-font text-white lg:w-1/3 lg:mb-0 mb-4">

14
src/blocks/gallery/dark/c.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkGalleryC(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<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-20">
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
@@ -24,7 +24,7 @@ function DarkGalleryC(props) {
src="https://dummyimage.com/600x360"
/>
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-400 mb-1`}>
THE SUBTITLE
</h2>
<h1 className="title-font text-lg font-medium text-white mb-3">
@@ -45,7 +45,7 @@ function DarkGalleryC(props) {
src="https://dummyimage.com/601x361"
/>
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-400 mb-1`}>
THE SUBTITLE
</h2>
<h1 className="title-font text-lg font-medium text-white mb-3">
@@ -66,7 +66,7 @@ function DarkGalleryC(props) {
src="https://dummyimage.com/603x363"
/>
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-400 mb-1`}>
THE SUBTITLE
</h2>
<h1 className="title-font text-lg font-medium text-white mb-3">
@@ -87,7 +87,7 @@ function DarkGalleryC(props) {
src="https://dummyimage.com/602x362"
/>
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-400 mb-1`}>
THE SUBTITLE
</h2>
<h1 className="title-font text-lg font-medium text-white mb-3">
@@ -108,7 +108,7 @@ function DarkGalleryC(props) {
src="https://dummyimage.com/605x365"
/>
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-400 mb-1`}>
THE SUBTITLE
</h2>
<h1 className="title-font text-lg font-medium text-white mb-3">
@@ -129,7 +129,7 @@ function DarkGalleryC(props) {
src="https://dummyimage.com/606x366"
/>
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-500 mb-1`}>
<h2 className={`tracking-widest text-sm title-font font-medium text-${props.theme}-400 mb-1`}>
THE SUBTITLE
</h2>
<h1 className="title-font text-lg font-medium text-white mb-3">

2
src/blocks/gallery/light/a.js
View File

@@ -2,7 +2,7 @@ import React from "react";
function LightGalleryA() {
return (
<section className="text-gray-700 body-font">
<section className="text-gray-600 body-font">
<div className="container px-5 py-24 mx-auto flex flex-wrap">
<div className="flex w-full mb-20 flex-wrap">
<h1 className="sm:text-3xl text-2xl font-medium title-font text-gray-900 lg:w-1/3 lg:mb-0 mb-4">

2
src/blocks/gallery/light/b.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightGalleryB(props) {
return (
<section className="text-gray-700 body-font">
<section className="text-gray-600 body-font">
<div className="container px-5 py-24 mx-auto flex flex-wrap">
<div className="lg:w-2/3 mx-auto">
<div className="flex flex-wrap w-full bg-gray-100 py-32 px-10 relative mb-4">

2
src/blocks/gallery/light/c.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightGalleryC(props) {
return (
<section className="text-gray-700 body-font">
<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">
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">

2
src/blocks/header/dark/a.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkHeaderA(props) {
return (
<header className="text-gray-500 bg-gray-900 body-font">
<header className="text-gray-400 bg-gray-900 body-font">
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a href className="flex title-font font-medium items-center text-white mb-4 md:mb-0">
<svg

2
src/blocks/header/dark/b.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkHeaderB(props) {
return (
<header className="text-gray-500 bg-gray-900 body-font">
<header className="text-gray-400 bg-gray-900 body-font">
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a href className="flex title-font font-medium items-center text-white mb-4 md:mb-0">
<svg

2
src/blocks/header/dark/c.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkHeaderC(props) {
return (
<header className="text-gray-500 bg-gray-900 body-font">
<header className="text-gray-400 bg-gray-900 body-font">
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<nav className="flex lg:w-2/5 flex-wrap items-center text-base md:ml-auto">
<a href className="mr-5 hover:text-white">First Link</a>

2
src/blocks/header/dark/d.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkHeaderD(props) {
return (
<header className="text-gray-500 bg-gray-900 body-font">
<header className="text-gray-400 bg-gray-900 body-font">
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a href className="flex title-font font-medium items-center text-white mb-4 md:mb-0">
<svg

4
src/blocks/header/light/a.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightHeaderA(props) {
return (
<header className="text-gray-700 body-font">
<header className="text-gray-600 body-font">
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a href className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
<svg
@@ -26,7 +26,7 @@ function LightHeaderA(props) {
<a href className="mr-5 hover:text-gray-900">Third Link</a>
<a href className="mr-5 hover:text-gray-900">Fourth Link</a>
</nav>
<button className="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">
<button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
Button
<svg
fill="none"

4
src/blocks/header/light/b.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightHeaderB(props) {
return (
<header className="text-gray-700 body-font">
<header className="text-gray-600 body-font">
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a href className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
<svg
@@ -26,7 +26,7 @@ function LightHeaderB(props) {
<a href className="mr-5 hover:text-gray-900">Third Link</a>
<a href className="mr-5 hover:text-gray-900">Fourth Link</a>
</nav>
<button className="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">
<button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
Button
<svg
fill="none"

4
src/blocks/header/light/c.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightHeaderC(props) {
return (
<header className="text-gray-700 body-font">
<header className="text-gray-600 body-font">
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<nav className="flex lg:w-2/5 flex-wrap items-center text-base md:ml-auto">
<a href className="mr-5 hover:text-gray-900">First Link</a>
@@ -27,7 +27,7 @@ function LightHeaderC(props) {
<span className="ml-3 text-xl">tailblocks</span>
</a>
<div className="lg:w-2/5 inline-flex lg:justify-end ml-5 lg:ml-0">
<button className="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">
<button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
Button
<svg
fill="none"

4
src/blocks/header/light/d.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightHeaderD(props) {
return (
<header className="text-gray-700 body-font">
<header className="text-gray-600 body-font">
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a href className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
<svg
@@ -26,7 +26,7 @@ function LightHeaderD(props) {
<a href className="mr-5 hover:text-gray-900">Third Link</a>
<a href className="mr-5 hover:text-gray-900">Fourth Link</a>
</nav>
<button className="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">
<button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
Button
<svg
fill="none"

2
src/blocks/hero/dark/a.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkHeroA(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<section className="text-gray-400 bg-gray-900 body-font">
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
<div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">

2
src/blocks/hero/dark/b.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkHeroB(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<section className="text-gray-400 bg-gray-900 body-font">
<div className="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
<img className="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
<div className="text-center lg:w-2/3 w-full">

2
src/blocks/hero/dark/c.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkHeroC(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<section className="text-gray-400 bg-gray-900 body-font">
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
<div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 md:mb-0 mb-10">
<img className="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />

10
src/blocks/hero/dark/d.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkHeroD(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<section className="text-gray-400 bg-gray-900 body-font">
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
<div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
@@ -25,14 +25,14 @@ function DarkHeroD(props) {
type="text"
id="hero-field"
name="hero-field"
className={`w-full bg-gray-800 rounded border border-gray-700 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`}
className={`w-full bg-gray-800 rounded bg-opacity-40 border border-gray-700 focus:ring-2 focus:ring-${props.theme}-900 focus:bg-transparent 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={`inline-flex 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>
</div>
<p className="text-sm mt-2 text-gray-600 mb-8 w-full">
<p className="text-sm mt-2 text-gray-500 mb-8 w-full">
Neutra shabby chic ramps, viral fixie.
</p>
<div className="flex lg:flex-row md:flex-col text-gray-300">
@@ -46,7 +46,7 @@ function DarkHeroD(props) {
<path d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z" />
</svg>
<span className="ml-4 flex items-start flex-col leading-none">
<span className="text-xs text-gray-500 mb-1">GET IT ON</span>
<span className="text-xs text-gray-400 mb-1">GET IT ON</span>
<span className="title-font font-medium">Google Play</span>
</span>
</button>
@@ -61,7 +61,7 @@ function DarkHeroD(props) {
<path d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z" />
</svg>
<span className="ml-4 flex items-start flex-col leading-none">
<span className="text-xs text-gray-500 mb-1">
<span className="text-xs text-gray-400 mb-1">
Download on the
</span>
<span className="title-font font-medium">App Store</span>

10
src/blocks/hero/dark/e.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkHeroE(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<section className="text-gray-400 bg-gray-900 body-font">
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
<div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
<img className="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
@@ -28,14 +28,14 @@ function DarkHeroE(props) {
type="text"
id="hero-field"
name="hero-field"
className={`w-full bg-gray-800 rounded border border-gray-700 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`}
className={`w-full bg-gray-800 rounded border bg-opacity-40 border-gray-700 focus:ring-2 focus:ring-${props.theme}-900 focus:bg-transparent 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={`inline-flex 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>
</div>
<p className="text-sm mt-2 text-gray-600 mb-8 w-full">
<p className="text-sm mt-2 text-gray-500 mb-8 w-full">
Neutra shabby chic ramps, viral fixie.
</p>
<div className="flex lg:flex-row md:flex-col text-gray-300">
@@ -49,7 +49,7 @@ function DarkHeroE(props) {
<path d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z" />
</svg>
<span className="ml-4 flex items-start flex-col leading-none">
<span className="text-xs text-gray-500 mb-1">GET IT ON</span>
<span className="text-xs text-gray-400 mb-1">GET IT ON</span>
<span className="title-font font-medium">Google Play</span>
</span>
</button>
@@ -64,7 +64,7 @@ function DarkHeroE(props) {
<path d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z" />
</svg>
<span className="ml-4 flex items-start flex-col leading-none">
<span className="text-xs text-gray-500 mb-1">
<span className="text-xs text-gray-400 mb-1">
Download on the
</span>
<span className="title-font font-medium">App Store</span>

8
src/blocks/hero/dark/f.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function DarkHeroF(props) {
return (
<section className="text-gray-500 bg-gray-900 body-font">
<section className="text-gray-400 bg-gray-900 body-font">
<div className="container mx-auto flex flex-col px-5 py-24 justify-center items-center">
<img className="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
<div className="w-full md:w-2/3 flex flex-col mb-16 items-center text-center">
@@ -27,7 +27,7 @@ function DarkHeroF(props) {
type="text"
id="hero-field"
name="hero-field"
className={`w-full bg-gray-800 rounded border border-gray-700 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`}
className={`w-full bg-gray-800 rounded border bg-opacity-40 border-gray-700 focus:ring-2 focus:ring-${props.theme}-900 focus:bg-transparent 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={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
@@ -48,7 +48,7 @@ function DarkHeroF(props) {
<path d="M99.617 8.057a50.191 50.191 0 00-38.815-6.713l230.932 230.933 74.846-74.846L99.617 8.057zM32.139 20.116c-6.441 8.563-10.148 19.077-10.148 30.199v411.358c0 11.123 3.708 21.636 10.148 30.199l235.877-235.877L32.139 20.116zM464.261 212.087l-67.266-37.637-81.544 81.544 81.548 81.548 67.273-37.64c16.117-9.03 25.738-25.442 25.738-43.908s-9.621-34.877-25.749-43.907zM291.733 279.711L60.815 510.629c3.786.891 7.639 1.371 11.492 1.371a50.275 50.275 0 0027.31-8.07l266.965-149.372-74.849-74.847z" />
</svg>
<span className="ml-4 flex items-start flex-col leading-none">
<span className="text-xs text-gray-600 mb-1">GET IT ON</span>
<span className="text-xs text-gray-400 mb-1">GET IT ON</span>
<span className="title-font font-medium">Google Play</span>
</span>
</button>
@@ -63,7 +63,7 @@ function DarkHeroF(props) {
<path d="M212.1 0c-15.76.64-34.67 10.35-45.97 23.58-9.6 11.13-19 29.68-16.52 48.38a2.5 2.5 0 002.29 2.17c1.06.08 2.15.12 3.23.12 15.41 0 32.04-8.52 43.4-22.25 11.94-14.5 17.99-33.1 16.16-49.77A2.52 2.52 0 00212.1 0z" />
</svg>
<span className="ml-4 flex items-start flex-col leading-none">
<span className="text-xs text-gray-600 mb-1">
<span className="text-xs text-gray-400 mb-1">
Download on the
</span>
<span className="title-font font-medium">App Store</span>

4
src/blocks/hero/light/a.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightHeroA(props) {
return (
<section className="text-gray-700 body-font">
<section className="text-gray-600 body-font">
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
<div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
@@ -20,7 +20,7 @@ function LightHeroA(props) {
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
Button
</button>
<button className="ml-4 inline-flex text-gray-700 bg-gray-200 border-0 py-2 px-6 focus:outline-none hover:bg-gray-300 rounded text-lg">
<button className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">
Button
</button>
</div>

4
src/blocks/hero/light/b.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightHeroB(props) {
return (
<section className="text-gray-700 body-font">
<section className="text-gray-600 body-font">
<div className="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
<img className="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
<div className="text-center lg:w-2/3 w-full">
@@ -21,7 +21,7 @@ function LightHeroB(props) {
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
Button
</button>
<button className="ml-4 inline-flex text-gray-700 bg-gray-200 border-0 py-2 px-6 focus:outline-none hover:bg-gray-300 rounded text-lg">
<button className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">
Button
</button>
</div>

4
src/blocks/hero/light/c.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightHeroC(props) {
return (
<section className="text-gray-700 body-font">
<section className="text-gray-600 body-font">
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
<div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
<img className="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
@@ -23,7 +23,7 @@ function LightHeroC(props) {
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
Button
</button>
<button className="ml-4 inline-flex text-gray-700 bg-gray-200 border-0 py-2 px-6 focus:outline-none hover:bg-gray-300 rounded text-lg">
<button className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">
Button
</button>
</div>

8
src/blocks/hero/light/d.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightHeroD(props) {
return (
<section className="text-gray-700 body-font">
<section className="text-gray-600 body-font">
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
<div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
@@ -25,7 +25,7 @@ function LightHeroD(props) {
type="text"
id="hero-field"
name="hero-field"
className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
className={`w-full bg-gray-100 rounded border bg-opacity-50 border-gray-300 focus:ring-2 focus:ring-${props.theme}-200 focus:bg-transparent focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
@@ -36,7 +36,7 @@ function LightHeroD(props) {
Neutra shabby chic ramps, viral fixie.
</p>
<div className="flex lg:flex-row md:flex-col">
<button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-300 focus:outline-none">
<button className="bg-gray-100 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-200 focus:outline-none">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
@@ -50,7 +50,7 @@ function LightHeroD(props) {
<span className="title-font font-medium">Google Play</span>
</span>
</button>
<button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center lg:ml-4 md:ml-0 ml-4 md:mt-4 mt-0 lg:mt-0 hover:bg-gray-300 focus:outline-none">
<button className="bg-gray-100 inline-flex py-3 px-5 rounded-lg items-center lg:ml-4 md:ml-0 ml-4 md:mt-4 mt-0 lg:mt-0 hover:bg-gray-200 focus:outline-none">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"

8
src/blocks/hero/light/e.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightHeroE(props) {
return (
<section className="text-gray-700 body-font">
<section className="text-gray-600 body-font">
<div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
<div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
<img className="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
@@ -28,7 +28,7 @@ function LightHeroE(props) {
type="text"
id="hero-field"
name="hero-field"
className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
className={`w-full bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:ring-2 focus:ring-${props.theme}-200 focus:bg-transparent focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
@@ -39,7 +39,7 @@ function LightHeroE(props) {
Neutra shabby chic ramps, viral fixie.
</p>
<div className="flex lg:flex-row md:flex-col">
<button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-300 focus:outline-none">
<button className="bg-gray-100 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-200 focus:outline-none">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
@@ -53,7 +53,7 @@ function LightHeroE(props) {
<span className="title-font font-medium">Google Play</span>
</span>
</button>
<button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center lg:ml-4 md:ml-0 ml-4 md:mt-4 mt-0 lg:mt-0 hover:bg-gray-300 focus:outline-none">
<button className="bg-gray-100 inline-flex py-3 px-5 rounded-lg items-center lg:ml-4 md:ml-0 ml-4 md:mt-4 mt-0 lg:mt-0 hover:bg-gray-200 focus:outline-none">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"

8
src/blocks/hero/light/f.js
View File

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
function LightHeroF(props) {
return (
<section className="text-gray-700 body-font">
<section className="text-gray-600 body-font">
<div className="container mx-auto flex flex-col px-5 py-24 justify-center items-center">
<img className="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
<div className="w-full md:w-2/3 flex flex-col mb-16 items-center text-center">
@@ -27,7 +27,7 @@ function LightHeroF(props) {
type="text"
id="hero-field"
name="hero-field"
className={`w-full bg-gray-100 rounded border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
className={`w-full bg-gray-100 bg-opacity-50 rounded focus:ring-2 focus:ring-${props.theme}-200 focus:bg-transparent border border-gray-300 focus:border-${props.theme}-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out`}
/>
</div>
<button className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}>
@@ -38,7 +38,7 @@ function LightHeroF(props) {
Neutra shabby chic ramps, viral fixie.
</p>
<div className="flex">
<button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-300 focus:outline-none">
<button className="bg-gray-100 inline-flex py-3 px-5 rounded-lg items-center hover:bg-gray-200 focus:outline-none">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
@@ -52,7 +52,7 @@ function LightHeroF(props) {
<span className="title-font font-medium">Google Play</span>
</span>
</button>
<button className="bg-gray-200 inline-flex py-3 px-5 rounded-lg items-center ml-4 hover:bg-gray-300 focus:outline-none">
<button className="bg-gray-100 inline-flex py-3 px-5 rounded-lg items-center ml-4 hover:bg-gray-200 focus:outline-none">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"

5
src/blocks/index.js
View File

@@ -121,11 +121,9 @@ import DarkHeroF from './hero/dark/f';
import LightPricingA from './pricing/light/a';
import LightPricingB from './pricing/light/b';
import LightPricingC from './pricing/light/c';
import DarkPricingA from './pricing/dark/a';
import DarkPricingB from './pricing/dark/b';
import DarkPricingC from './pricing/dark/c';
import LightStatisticA from './statistic/light/a';
import LightStatisticB from './statistic/light/b';
@@ -232,8 +230,7 @@ export default function getBlock({theme = 'indigo', darkMode = false}) {
},
Pricing: {
PricingA: darkMode ? <DarkPricingA theme={theme} /> : <LightPricingA theme={theme} />,
PricingB: darkMode ? <DarkPricingB theme={theme} /> : <LightPricingB theme={theme} />,
PricingC: darkMode ? <DarkPricingC theme={theme} /> : <LightPricingC theme={theme} />
PricingB: darkMode ? <DarkPricingB theme={theme} /> : <LightPricingB theme={theme} />
},
Statistic: {
StatisticA: darkMode ? <DarkStatisticA theme={theme} /> : <LightStatisticA theme={theme} />,

Some files were not shown because too many files have changed in this diff Show More