├── .eslintrc.json ├── next.config.js ├── public ├── side.jpg ├── favicon.ico ├── vercel.svg └── thumb.svg ├── showcase ├── s1.png ├── s2.png ├── s3.png └── s4.png ├── postcss.config.js ├── pages ├── _app.js ├── api │ └── hello.js └── index.js ├── styles ├── Home.module.css └── globals.css ├── tailwind.config.js ├── .gitignore ├── package.json ├── components ├── Login.jsx └── Card_temp_2.jsx └── README.md /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | reactStrictMode: true, 3 | } 4 | -------------------------------------------------------------------------------- /public/side.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pavitra554/Tailwind-css-card-component/HEAD/public/side.jpg -------------------------------------------------------------------------------- /showcase/s1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pavitra554/Tailwind-css-card-component/HEAD/showcase/s1.png -------------------------------------------------------------------------------- /showcase/s2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pavitra554/Tailwind-css-card-component/HEAD/showcase/s2.png -------------------------------------------------------------------------------- /showcase/s3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pavitra554/Tailwind-css-card-component/HEAD/showcase/s3.png -------------------------------------------------------------------------------- /showcase/s4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pavitra554/Tailwind-css-card-component/HEAD/showcase/s4.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pavitra554/Tailwind-css-card-component/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /styles/Home.module.css: -------------------------------------------------------------------------------- 1 | @import url('http://fonts.cdnfonts.com/css/valorant'); 2 | .valo{ 3 | font-family: 'VALORANT', sans-serif; 4 | font-size: 3rem; 5 | text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.452); 6 | margin: 20px; 7 | } -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | darkMode: 'class', 3 | content: [ 4 | "./pages/**/*.{js,ts,jsx,tsx}", 5 | "./components/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: { 9 | 10 | }, 11 | fontFamily:{ 12 | vali:['VALORANT'] 13 | } 14 | }, 15 | plugins: [], 16 | } 17 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | 6 | 7 | html, 8 | body { 9 | padding: 0; 10 | margin: 0; 11 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 12 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 13 | } 14 | 15 | a { 16 | color: inherit; 17 | text-decoration: none; 18 | } 19 | 20 | * { 21 | box-sizing: border-box; 22 | } 23 | 24 | -------------------------------------------------------------------------------- /.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 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "learning_tailwind", 3 | "private": true, 4 | "scripts": { 5 | "dev": "next dev", 6 | "build": "next build", 7 | "start": "next start", 8 | "lint": "next lint" 9 | }, 10 | "dependencies": { 11 | "@heroicons/react": "^1.0.5", 12 | "next": "12.0.8", 13 | "react": "17.0.2", 14 | "react-dom": "17.0.2", 15 | "react-icons": "^4.3.1" 16 | }, 17 | "devDependencies": { 18 | "autoprefixer": "^10.4.2", 19 | "eslint": "8.7.0", 20 | "eslint-config-next": "12.0.8", 21 | "postcss": "^8.4.5", 22 | "tailwindcss": "^3.0.15" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from 'next/head' 2 | import Image from 'next/image' 3 | import { useState } from 'react'; 4 | import Card_temp_2 from '../components/Card_temp_2'; 5 | import Login from '../components/Login'; 6 | 7 | export default function Home() { 8 | 9 | const [toggle,setToggle] = useState(false); 10 | return ( 11 | <> 12 | 13 | Card 14 | 15 | 16 | 17 |

18 | 19 | {/*comment out the uper one and uncomment the below one*/} 20 | 21 | {/* */} 22 | 23 |

24 | 25 | 26 | ) 27 | } 28 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/Login.jsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import sideimg from '../public/side.jpg'; 3 | import styles from '../styles/Home.module.css'; 4 | 5 | 6 | export default function Login() { 7 | return ( 8 |

9 |

10 |

11 |

12 | 13 |

14 |

valorant

15 | 16 |

17 | 22 |

23 | 24 |

25 | Create an Account 26 |

27 |

28 |

29 | ) 30 | } 31 | 32 | -------------------------------------------------------------------------------- /components/Card_temp_2.jsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import thumb from "../public/thumb.svg"; 3 | import { FaReact } from "react-icons/fa"; 4 | import { SiTypescript } from "react-icons/si"; 5 | import { AiOutlineClockCircle } from "react-icons/ai"; 6 | import { VscChecklist } from "react-icons/vsc"; 7 | import { FaPlay } from "react-icons/fa"; 8 | import { MoonIcon } from "@heroicons/react/solid"; 9 | import { SunIcon } from "@heroicons/react/solid"; 10 | 11 | export default function Card_temp_1({ toggle, settoggle }) { 12 | return ( 13 |

14 |

15 |

16 |

FREE

17 |

18 |

19 |

26 |

27 |

28 | 29 |

30 |

Advanced

31 |

32 | React Native with TypeScript tutorial. 33 |

34 | 35 |

36 |

37 | 38 |

React Native

39 |

40 |

41 | 42 |

TypeScript

43 |

44 |

45 | 46 |

32 Hour

47 |

48 |

49 | 50 |

5 Part

51 |

52 |

53 | 54 |

55 | 61 | 71 |

72 |

73 |

74 | ); 75 | } 76 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 |

Next.Js

5 | 6 |

7 | 8 | 9 |

10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |

52 |

53 |

54 |

55 | 56 | # Some important information about Next.Js 57 | ## Getting Started 58 | 59 | First, run the development server: 60 | 61 | ```bash 62 | npm run dev 63 | # or 64 | yarn dev 65 | ``` 66 | 67 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 68 | 69 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 70 | 71 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 72 | 73 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 74 | 75 | ## Learn More 76 | 77 | To learn more about Next.js, take a look at the following resources: 78 | 79 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 80 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 81 | 82 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 83 | 84 | ## Some important information about Tailwind Css with Next.js 85 | Step-1 First create a next app
86 | ```npx create-next-app my-project```
87 | Step-2 Go to the project directory
88 | ```cd my-project```
89 | Step-3 run the following command on terminal
90 | ```npm install -D tailwindcss postcss autoprefixer```
91 | Step-4 then run this command
92 | ```npx tailwindcss init -p```
93 | Step-5 add this in tailwind.config.js
94 | ```javascript 95 | module.exports = { 96 | content: [ 97 | "./pages/**/*.{js,ts,jsx,tsx}", 98 | "./components/**/*.{js,ts,jsx,tsx}", 99 | ], 100 | theme: { 101 | extend: {}, 102 | }, 103 | plugins: [], 104 | } 105 | ``` 106 | Step-6 add the following code in global.css file 107 | ```css 108 | @tailwind base; 109 | @tailwind components; 110 | @tailwind utilities; 111 | ``` 112 | 113 | 114 | ## Deploy on Vercel 115 | 116 | Link: https://tailwind-css-card-component.vercel.app/ 117 | 118 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 119 | # Thanks for visiting🤗 120 | -------------------------------------------------------------------------------- /public/thumb.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------

valorant

FREE

32 | React Native with TypeScript tutorial. 33 |

React Native

TypeScript

32 Hour

5 Part

58 | Start Learning Now 59 |

Next.Js