├── .env ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── src ├── images │ ├── egg.jpg │ └── egg-2.jpg ├── setupTests.js ├── App.test.js ├── index.css ├── pages │ ├── index.js │ ├── menu.js │ └── about.js ├── components │ ├── Footer.js │ ├── Dropdown.js │ ├── Content.js │ ├── Hero.js │ └── Navbar.js ├── reportWebVitals.js ├── index.js └── App.js ├── craco.config.js ├── tailwind.config.js ├── .gitignore ├── package.json ├── README.md └── .eslintcache /.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/tailwindcss-react-v1/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/tailwindcss-react-v1/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/tailwindcss-react-v1/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/images/egg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/tailwindcss-react-v1/HEAD/src/images/egg.jpg -------------------------------------------------------------------------------- /src/images/egg-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/tailwindcss-react-v1/HEAD/src/images/egg-2.jpg -------------------------------------------------------------------------------- /craco.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | style: { 3 | postcss: { 4 | plugins: [require('tailwindcss'), require('autoprefixer')] 5 | } 6 | } 7 | }; 8 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], 3 | darkMode: false, // or 'media' or 'class' 4 | theme: { 5 | extend: {} 6 | }, 7 | variants: { 8 | extend: {} 9 | }, 10 | plugins: [] 11 | }; 12 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .menu-card { 6 | @apply flex flex-col justify-center items-center bg-white h-screen font-mono py-40; 7 | } 8 | 9 | .center-content { 10 | @apply flex flex-col justify-center items-center; 11 | } 12 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Content from '../components/Content'; 3 | import Hero from '../components/Hero'; 4 | 5 | const Home = () => { 6 | return ( 7 | <> 8 | 9 | 10 | 11 | ); 12 | }; 13 | 14 | export default Home; 15 | -------------------------------------------------------------------------------- /src/pages/menu.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Menu = () => { 4 | return ( 5 |
6 |

Menu Page

7 |
8 | ); 9 | }; 10 | 11 | export default Menu; 12 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Footer = () => { 4 | return ( 5 |
6 |

Copyright © 2021 EGG All rights reserved.

7 |
8 | ); 9 | }; 10 | 11 | export default Footer; 12 | -------------------------------------------------------------------------------- /src/pages/about.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const About = () => { 4 | return ( 5 |
6 |

About Page

7 |
8 | ); 9 | }; 10 | 11 | export default About; 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import { BrowserRouter } from 'react-router-dom'; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | 12 | 13 | , 14 | document.getElementById('root') 15 | ); 16 | 17 | // If you want to start measuring performance in your app, pass a function 18 | // to log results (for example: reportWebVitals(console.log)) 19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 20 | reportWebVitals(); 21 | -------------------------------------------------------------------------------- /src/components/Dropdown.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | const Dropdown = ({ isOpen, toggle }) => { 5 | return ( 6 |
14 | 15 | Home 16 | 17 | 18 | Menu 19 | 20 | 21 | About 22 | 23 | 24 | Contact 25 | 26 |
27 | ); 28 | }; 29 | 30 | export default Dropdown; 31 | -------------------------------------------------------------------------------- /src/components/Content.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ImageOne from '../images/egg.jpg'; 3 | import ImageTwo from '../images/egg-2.jpg'; 4 | 5 | const Content = () => { 6 | return ( 7 | <> 8 |
9 | egg 10 |
11 |

Egg Muffins

12 |

Cripsy, delicious, and nutritious

13 | $16 14 |
15 |
16 |
17 | egg 18 |
19 |

Egg Salad

20 |

Cripsy, delicious, and nutritious

21 | $18 22 |
23 |
24 | 25 | ); 26 | }; 27 | 28 | export default Content; 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwindcss-react-v1", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@craco/craco": "^6.0.0", 7 | "@tailwindcss/postcss7-compat": "^2.0.2", 8 | "@testing-library/jest-dom": "^5.11.4", 9 | "@testing-library/react": "^11.1.0", 10 | "@testing-library/user-event": "^12.1.10", 11 | "autoprefixer": "^9", 12 | "postcss": "^7", 13 | "react": "^17.0.1", 14 | "react-dom": "^17.0.1", 15 | "react-scripts": "4.0.1", 16 | "tailwindcss": "npm:@tailwindcss/postcss7-compat", 17 | "web-vitals": "^0.2.4" 18 | }, 19 | "scripts": { 20 | "start": "craco start", 21 | "build": "craco build", 22 | "test": "craco test", 23 | "eject": "react-scripts eject" 24 | }, 25 | "eslintConfig": { 26 | "extends": [ 27 | "react-app", 28 | "react-app/jest" 29 | ] 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/components/Hero.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | const Hero = () => { 5 | return ( 6 |
7 |

8 | EGGCELLENT 9 |

10 | 14 | Order Now{' '} 15 | 22 | 28 | 29 | 30 |
31 | ); 32 | }; 33 | 34 | export default Hero; 35 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import Navbar from './components/Navbar'; 3 | import { Switch, Route } from 'react-router-dom'; 4 | import Home from './pages'; 5 | import About from './pages/about'; 6 | import Menu from './pages/menu'; 7 | import Footer from './components/Footer'; 8 | import Dropdown from './components/Dropdown'; 9 | 10 | function App() { 11 | const [isOpen, setIsOpen] = useState(false); 12 | 13 | const toggle = () => { 14 | setIsOpen(!isOpen); 15 | }; 16 | 17 | useEffect(() => { 18 | const hideMenu = () => { 19 | if (window.innerWidth > 768 && isOpen) { 20 | setIsOpen(false); 21 | console.log('i resized'); 22 | } 23 | }; 24 | 25 | window.addEventListener('resize', hideMenu); 26 | 27 | return () => { 28 | window.removeEventListener('resize', hideMenu); 29 | }; 30 | }); 31 | 32 | return ( 33 | <> 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |