",
7 | "dependencies": {
8 | "@tailwindcss/typography": "^0.2.0",
9 | "@types/node": "^14.0.27",
10 | "@types/prismjs": "^1.16.1",
11 | "@types/react": "^16.9.46",
12 | "@types/react-dom": "^16.9.8",
13 | "@types/react-frame-component": "^4.1.1",
14 | "@types/react-tabs": "^2.3.2",
15 | "@typescript-eslint/eslint-plugin": "^3.9.0",
16 | "@typescript-eslint/parser": "^3.9.0",
17 | "framer-motion": "^2.4.2",
18 | "gatsby": "^2.24.37",
19 | "gatsby-image": "^2.4.14",
20 | "gatsby-plugin-breadcrumb": "^10.0.0",
21 | "gatsby-plugin-manifest": "^2.4.22",
22 | "gatsby-plugin-postcss": "^2.3.11",
23 | "gatsby-plugin-purgecss": "^5.0.0",
24 | "gatsby-plugin-react-helmet": "^3.3.10",
25 | "gatsby-plugin-react-svg": "^3.0.0",
26 | "gatsby-plugin-sharp": "^2.6.25",
27 | "gatsby-plugin-typescript": "^2.4.18",
28 | "gatsby-source-filesystem": "^2.3.24",
29 | "gatsby-transformer-json": "^2.4.11",
30 | "gatsby-transformer-sharp": "^2.5.12",
31 | "prism-react-renderer": "^1.1.1",
32 | "prismjs": "^1.21.0",
33 | "prop-types": "^15.7.2",
34 | "re-resizable": "^6.5.4",
35 | "react": "^16.12.0",
36 | "react-dom": "^16.12.0",
37 | "react-frame-component": "^4.1.3",
38 | "react-helmet": "^6.1.0",
39 | "react-intersection-observer": "^8.26.2",
40 | "react-live": "^2.2.2",
41 | "react-tabs": "^3.1.1",
42 | "typescript": "^3.9.7",
43 | "use-clipboard-copy": "^0.1.2",
44 | "uuid": "^8.3.0"
45 | },
46 | "devDependencies": {
47 | "prettier": "2.0.5",
48 | "tailwindcss": "^1.6.2"
49 | },
50 | "keywords": [
51 | "gatsby"
52 | ],
53 | "license": "0BSD",
54 | "scripts": {
55 | "build": "gatsby build",
56 | "develop": "gatsby develop",
57 | "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
58 | "start": "npm run develop",
59 | "serve": "gatsby serve",
60 | "clean": "gatsby clean",
61 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
62 | },
63 | "repository": {
64 | "type": "git",
65 | "url": "https://github.com/gatsbyjs/gatsby-starter-default"
66 | },
67 | "bugs": {
68 | "url": "https://github.com/gatsbyjs/gatsby/issues"
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = () => ({
2 | plugins: [require("tailwindcss")],
3 | })
4 |
--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/m-abdelwahab/tailwind-snippets/8530d10283af4d5529cc3dac3b814d6412bf9a27/screenshot.png
--------------------------------------------------------------------------------
/src/components/Card.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { Link } from "gatsby"
3 | import { motion } from "framer-motion"
4 | import Img from "gatsby-image"
5 |
6 | interface CardProps {
7 | link: string
8 | title: string
9 | image: any
10 | alt: string
11 | numOfComponents?: number
12 | }
13 | const Card = ({ link, title, image, numOfComponents, alt }: CardProps) => {
14 | return (
15 |
16 |
27 |
{title}
28 | {numOfComponents && (
29 | {numOfComponents} variations
30 | )}
31 |
32 |
33 |
34 | )
35 | }
36 |
37 | export default Card
38 |
--------------------------------------------------------------------------------
/src/components/CopyButton.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { useClipboard } from "use-clipboard-copy"
3 |
4 | interface CopyButtonProps {
5 | text: string
6 | }
7 | const CopyButton = ({ text }: CopyButtonProps) => {
8 | const clipboard = useClipboard({
9 | copiedTimeout: 600, // timeout duration in ms
10 | })
11 | return (
12 | clipboard.copy(text)}
14 | className="mb-1 bg-blue-500 text-white rounded py-2 px-6 ml-5"
15 | >
16 | {clipboard.copied ? (
17 | copied!
18 | ) : (
19 |
27 |
30 | )}
31 |
32 | )
33 | }
34 |
35 | export default CopyButton
36 |
--------------------------------------------------------------------------------
/src/components/Featured.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react"
2 | import Card from "./Card"
3 | import { motion, useAnimation } from "framer-motion"
4 | import { useInView } from "react-intersection-observer"
5 | import { Link } from "gatsby"
6 | import { v4 as uuidv4 } from "uuid"
7 |
8 | interface FeaturedProps {
9 | title: string
10 | data: any
11 | link: string
12 | }
13 | const Featured = ({ title, data, link }: FeaturedProps) => {
14 | const animation = useAnimation()
15 |
16 | const [ref, inView] = useInView({
17 | triggerOnce: true,
18 | rootMargin: "50px 0px",
19 | })
20 | // Awesome answer https://stackoverflow.com/questions/59953580/framer-check-if-element-is-into-viewport
21 | useEffect(() => {
22 | if (inView) {
23 | animation.start("visible")
24 | } else {
25 | animation.start("hidden")
26 | }
27 | }, [animation, inView])
28 |
29 | const container = {
30 | hidden: { opacity: 1, scale: 0 },
31 | visible: {
32 | opacity: 1,
33 | scale: 1,
34 | transition: {
35 | when: "beforeChildren",
36 | staggerChildren: 0.2,
37 | },
38 | },
39 | }
40 |
41 | const item = {
42 | hidden: { y: 20, opacity: 0 },
43 | visible: {
44 | y: 0,
45 | opacity: 1,
46 | },
47 | }
48 |
49 | return (
50 |
51 |
52 |
53 |
54 | {title}
55 |
56 |
63 |
64 |
71 | {data.map(card => {
72 | return (
73 |
78 |
86 | )
87 | })}
88 |
89 |
91 | )
92 | }
93 |
94 | export default Featured
95 |
--------------------------------------------------------------------------------
/src/components/Hero.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { TwoColGridComponent, code } from "../pages/layouts/two-column-grid"
3 | import { WithComponentPreview } from "../components"
4 | import { motion } from "framer-motion"
5 | const variants = {
6 | hidden: { opacity: 0 },
7 | visible: { opacity: 1 },
8 | }
9 | const Hero = () => {
10 | return (
11 |
12 |
13 |
23 | Stop writing the same CSS over and over again
24 |
25 |
35 | Common Layout and component snippets you can use to speed up your
36 | workflow
37 |
38 | {/* add product hunt badge */}
39 |
40 |
41 |
51 |
55 |
56 | Preview components
57 |
62 |
69 |
70 |
74 |
75 |
76 |
89 |
90 |
91 |
92 |
93 |
98 |
Get the code
99 |
107 |
120 |
123 |
124 | )
125 | }
126 |
127 | export default Hero
128 |
--------------------------------------------------------------------------------
/src/components/WithComponentPreview.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { LiveProvider, LiveEditor } from "react-live"
3 | import theme from "prism-react-renderer/themes/nightOwl"
4 | import { Resizable } from "re-resizable"
5 | import { Tab, Tabs, TabList, TabPanel } from "react-tabs"
6 | import Frame from "react-frame-component"
7 | import { CopyButton } from "./index"
8 |
9 | interface WithComponentPreviewProps {
10 | Code: string
11 | Component: React.ReactNode
12 | }
13 |
14 | const WithComponentPreview = ({
15 | Code,
16 | Component,
17 | }: WithComponentPreviewProps) => {
18 | return (
19 |
20 |
21 |
22 |
23 |
24 | Preview
25 | Code
26 |
27 |
29 |
30 |
56 |
68 |
69 |
70 |
76 |
77 |
78 |
10 |
24 |
37 |
38 | );
39 | };
40 |
41 | export default GitHubRibbon;
42 |
43 |
--------------------------------------------------------------------------------
/src/components/layout/Layout.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { Footer, Navbar, GitHubRibbon, TailwindUIBanner } from "./index"
3 | import { motion } from "framer-motion"
4 |
5 | const duration = 0.6
6 |
7 | const variants = {
8 | initial: {
9 | opacity: 0,
10 | },
11 | enter: {
12 | opacity: 1,
13 | transition: {
14 | duration: duration,
15 | when: "beforeChildren",
16 | },
17 | },
18 | exit: {
19 | opacity: 0,
20 | transition: { duration: duration },
21 | },
22 | }
23 | interface LayoutProps {
24 | children: React.ReactNode
25 | location: any
26 | }
27 | const Layout = ({ children, location }: LayoutProps) => {
28 | return (
29 |
30 |
39 | {children}
40 |
41 |
44 | )
45 | }
46 |
47 | export default Layout
48 |
--------------------------------------------------------------------------------
/src/components/layout/Navbar.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link } from "gatsby"
3 |
4 | const Navbar = () => {
5 | return (
6 |
7 |
8 |
9 |
10 | Build UI faster
18 |
19 |
22 |
41 |
42 | );
43 | };
44 |
45 | export default Navbar;
46 |
--------------------------------------------------------------------------------
/src/components/layout/TailwindUIBanner.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import Logo from "../../images/tailwind-ui-logo.svg";
3 |
4 | const TailwindUIBanner = () => {
5 | const initialState = () =>
6 | Boolean(typeof window !== 'undefined'? window.localStorage.getItem("hideBanner") : null);
7 | const [isHidden, setIsHidden] = useState(initialState);
8 | useEffect(() => {
9 | localStorage.setItem("hideBanner", JSON.stringify(isHidden));
10 | }, [isHidden]);
11 |
12 | const handleClick = () => setIsHidden(true);
13 |
14 | return !isHidden ? (
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | Tailwind UI is now in early
23 | access!
24 |
25 |
26 |
27 | Now in early access!
28 |
29 |
30 | Beautiful UI components by the creators of Tailwind CSS.
31 |
32 |
33 | Beautiful UI components, crafted by the creators of Tailwind
34 | CSS.
35 |
36 |
37 |
38 |
39 |
49 |
50 |
handleClick()}
52 | type="button"
53 | className="-mr-1 flex p-2 rounded-md hover:bg-gray-800 focus:outline-none focus:bg-gray-800"
54 | >
55 |
61 |
68 |
69 |
70 |
71 |
72 |
2 |
5 |
7 |
8 |
9 |
12 |
18 |
20 |
28 |
29 |
30 |
38 |
39 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/src/images/layouts/two-column-grid.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/m-abdelwahab/tailwind-snippets/8530d10283af4d5529cc3dac3b814d6412bf9a27/src/images/layouts/two-column-grid.png
--------------------------------------------------------------------------------
/src/images/sections-heroes.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
7 |
8 |
9 |
12 |
18 |
20 |
28 |
29 |
30 |
38 |
39 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/src/images/tailwind-ui-logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
6 |
--------------------------------------------------------------------------------
/src/images/tailwindcss.svg:
--------------------------------------------------------------------------------
1 | NOT FOUND
8 | You just hit a route that doesn't exist... the sadness.
9 |
10 | )
11 |
12 | export default NotFoundPage
13 |
--------------------------------------------------------------------------------
/src/pages/about.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import SEO from "../components/seo"
3 |
4 | const About = () => {
5 | return (
6 | <>
7 |
10 | About This project
11 |
12 | The reason I created this project was because I really like using a
13 | utility-first CSS framework. It allowed me to be super productive and
14 | to be enjoy writing CSS.
15 |
16 |
17 | As a developer, I really love re-usability. I don't want to waste my
18 | time building the same design over and over again. I prefer to learn
19 | new things and allocate my time and energy to more complex tasks
20 |
21 |
22 | I'm pretty sure this project will be beneficial to all Front-end
23 | Developers who love using Tailwind. If this project saved you some
24 | time, consider donating
25 |
26 |
27 |
33 |
34 | 📖 Buy me a Book
35 |
36 |
37 |
38 |
39 | )
40 | }
41 |
42 | export default About
43 |
--------------------------------------------------------------------------------
/src/pages/components/avatar.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { WithComponentPreview } from "../../components"
3 |
4 | const Avatar = () => {
5 | return (
6 |
13 |
18 |
11 | {/*
14 | )
15 | }
16 |
17 | const ButtonComponent = () => {
18 | return (
19 |
20 |
21 | Button
22 |
23 |
24 | )
25 | }
26 | const code = `
27 | Button
28 | `
29 |
30 | export default Button
31 |
--------------------------------------------------------------------------------
/src/pages/components/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | const Components = () => {
4 | return (
5 |
6 |
Hello from the components page!
7 |
8 | )
9 | }
10 |
11 | export default Components
12 |
--------------------------------------------------------------------------------
/src/pages/components/navbar.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | const Navbar = () => {
4 | return (
5 |
6 |
Coming Soon!
7 |
8 | )
9 | }
10 |
11 | export default Navbar
12 |
--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { Hero, Featured } from "../components"
3 | import { graphql, useStaticQuery } from "gatsby"
4 |
5 | const IndexPage = () => {
6 | const featuredData = useStaticQuery(graphql`
7 | query {
8 | featuredJson {
9 | layouts {
10 | title
11 | link
12 | numOfComponents
13 | image {
14 | alt
15 | src {
16 | childImageSharp {
17 | fluid {
18 | ...GatsbyImageSharpFluid
19 | }
20 | }
21 | }
22 | }
23 | }
24 | components {
25 | title
26 | link
27 | numOfComponents
28 | image {
29 | alt
30 | src {
31 | childImageSharp {
32 | fluid {
33 | ...GatsbyImageSharpFluid
34 | }
35 | }
36 | }
37 | }
38 | }
39 | }
40 | }
41 | `)
42 | const { components, layouts } = featuredData.featuredJson
43 | console.log(components)
44 | return (
45 | <>
46 |
6 |
Coming Soon!
7 |
8 | )
9 | }
10 |
11 | export default Features
12 |
--------------------------------------------------------------------------------
/src/pages/layouts/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | const Layouts = () => {
4 | return (
5 | <>
6 |
7 |
Hello from the layouts page!
8 |
9 |
10 | )
11 | }
12 |
13 | export default Layouts
14 |
--------------------------------------------------------------------------------
/src/pages/layouts/two-column-grid.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { WithComponentPreview } from "../../components"
3 |
4 | const TwoColGrid = () => (
5 | 
18 |