├── .eslintrc.js
├── .gitignore
├── README.md
├── banner.png
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
    ├── App.jsx
    ├── components
    │   ├── About.jsx
    │   ├── Footer.jsx
    │   ├── HeroSection.jsx
    │   ├── SectionTitle.jsx
    │   ├── ServiceItem.jsx
    │   ├── Services.jsx
    │   ├── WorkItem.jsx
    │   └── Works.jsx
    ├── data
    │   ├── services.jsx
    │   └── works.js
    ├── favicon.svg
    ├── images
    │   └── hero.jpg
    ├── main.jsx
    └── styles
    │   └── tailwind.css
├── tailwind.config.js
└── vite.config.js


/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	env: {
 3 | 		browser: true,
 4 | 		es2021: true,
 5 | 	},
 6 | 	extends: ['airbnb', 'prettier'],
 7 | 	parserOptions: {
 8 | 		ecmaFeatures: {
 9 | 			jsx: true,
10 | 		},
11 | 		ecmaVersion: 'latest',
12 | 		sourceType: 'module',
13 | 	},
14 | 	plugins: ['react', 'prettier', 'react-hooks'],
15 | 	rules: {
16 | 		// prettier
17 | 		'prettier/prettier': [
18 | 			'error',
19 | 			{
20 | 				trailingComma: 'es5',
21 | 				useTabs: true,
22 | 				jsxSingleQuote: false,
23 | 				tabWidth: 2,
24 | 				arrowParens: 'avoid',
25 | 				singleQuote: true,
26 | 				printWidth: 80,
27 | 				endOfLine: 'auto',
28 | 			},
29 | 		],
30 | 		// react
31 | 		'react/prop-types': 0,
32 | 		'no-unused-vars': 1,
33 | 		'jsx-a11y/anchor-is-valid': [
34 | 			'error',
35 | 			{
36 | 				aspects: ['invalidHref'],
37 | 			},
38 | 		],
39 | 		'prefer-const': [
40 | 			'error',
41 | 			{
42 | 				destructuring: 'all',
43 | 			},
44 | 		],
45 | 		// react-hooks
46 | 		'react-hooks/rules-of-hooks': 'error',
47 | 		'react-hooks/exhaustive-deps': 'warn',
48 | 	},
49 | };
50 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![React Tailwind Portfolio](./banner.png)
 2 | 
 3 | ## React Tailwind Portfolio
 4 | 
 5 | A simple responsive portfolio website with `dark mode` feature.
 6 | 
 7 | **Live Preview:https://react-tailwind-portfolio.surge.sh/**
 8 | 
 9 | **Watch on Youtube: [https://youtu.be/QTY2fLpQn44][yt-video]**
10 | 
11 | ---
12 | 
13 | ### Made with ❤️ by [Shaif Arfan][arfan-ig]
14 | 
15 | Like my works and want to support me?
16 | 
17 | <a href="https://www.buymeacoffee.com/shaifarfan08" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="height: 45px !important;width: 162.75px !important;" ></a>
18 | 
19 | ---
20 | 
21 | Technologies used:
22 | 
23 | - [React](https://reactjs.org/)
24 | - [Tailwind CSS](https://tailwindcss.com/)
25 | - [Vite.JS](https://vitejs.org/)
26 | 
27 | ## Other projects
28 | 
29 | 📚 [All Web Cifar Projects][wc-projects]
30 | 
31 | ## FAQ
32 | 
33 | ### Q: How can i get started?
34 | 
35 | You can get started by following the YouTube tutorial of this project. Here is the full tutorial video link: [YouTube Video][yt-video].
36 | 
37 | ### Q: I can use this project for my website?
38 | 
39 | Yes you can. It absolutely free to use. If you want to support the project, you can [buy me a coffee][buymeacoffee].
40 | 
41 | ## Feedback
42 | 
43 | If you have any feedback, please reach out to us at [@web_cifar][wc-tw]
44 | 
45 | ## Support
46 | 
47 | For support, join our [Community Group][wc-fb-group].
48 | 
49 | ## License
50 | 
51 | [MIT][mit]
52 | 
53 | Happy Coding! ✨🚀
54 | 
55 | [wc-tw]: http://twitter.com/webcifar
56 | [wc-yt]: http://www.youtube.com/webcifarOfficial
57 | [arfan-ig]: https://www.instagram.com/shaifarfan08/
58 | [wc-projects]: https://github.com/ShaifArfan/wc-project-tutorials
59 | [wc-fb-group]: https://www.facebook.com/groups/webcifar
60 | [mit]: https://choosealicense.com/licenses/mit/
61 | [yt-video]: https://youtu.be/QTY2fLpQn44
62 | [buymeacoffee]: https://www.buymeacoffee.com/shaifarfan08
63 | 


--------------------------------------------------------------------------------
/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/react-tailwind-portfolio/54308d1bf83bff8cf56d7cc305974a1bc2b6f71a/banner.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="scroll-smooth">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8 |   <title>React Tailwind Portfolio</title>
 9 |   <link rel="preconnect" href="https://fonts.googleapis.com">
10 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11 |   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12 | </head>
13 | 
14 | <body>
15 |   <div id='root'></div>
16 |   <script type="module" src="/src/main.jsx"></script>
17 | </body>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "react-tailwind-portfolio",
 3 | 	"private": true,
 4 | 	"version": "0.0.0",
 5 | 	"scripts": {
 6 | 		"dev": "vite",
 7 | 		"build": "vite build",
 8 | 		"preview": "vite preview"
 9 | 	},
10 | 	"dependencies": {
11 | 		"react": "^17.0.2",
12 | 		"react-dom": "^17.0.2",
13 | 		"react-icons": "^4.3.1"
14 | 	},
15 | 	"devDependencies": {
16 | 		"@vitejs/plugin-react": "^1.0.7",
17 | 		"autoprefixer": "^10.4.2",
18 | 		"eslint": "^8.11.0",
19 | 		"eslint-config-airbnb": "^19.0.4",
20 | 		"eslint-config-prettier": "^8.5.0",
21 | 		"eslint-plugin-import": "^2.25.4",
22 | 		"eslint-plugin-jsx-a11y": "^6.5.1",
23 | 		"eslint-plugin-prettier": "^4.0.0",
24 | 		"eslint-plugin-react": "^7.29.4",
25 | 		"eslint-plugin-react-hooks": "^4.3.0",
26 | 		"postcss": "^8.4.8",
27 | 		"prettier": "^2.6.0",
28 | 		"tailwindcss": "^3.0.23",
29 | 		"vite": "^2.8.0"
30 | 	}
31 | }
32 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import About from './components/About';
 3 | import Footer from './components/Footer';
 4 | import HeroSection from './components/HeroSection';
 5 | import Services from './components/Services';
 6 | import Works from './components/Works';
 7 | 
 8 | function App() {
 9 | 	const [theme, setTheme] = useState(null);
10 | 
11 | 	useEffect(() => {
12 | 		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
13 | 			setTheme('dark');
14 | 		} else {
15 | 			setTheme('light');
16 | 		}
17 | 	}, []);
18 | 
19 | 	const handleThemeSwitch = () => {
20 | 		setTheme(theme === 'dark' ? 'light' : 'dark');
21 | 	};
22 | 
23 | 	useEffect(() => {
24 | 		if (theme === 'dark') {
25 | 			document.documentElement.classList.add('dark');
26 | 		} else {
27 | 			document.documentElement.classList.remove('dark');
28 | 		}
29 | 	}, [theme]);
30 | 
31 | 	return (
32 | 		<>
33 | 			<button
34 | 				type="button"
35 | 				onClick={handleThemeSwitch}
36 | 				className="fixed z-10 right-2 top-2 bg-indigo-500 text-lg p-1 rounded-md"
37 | 			>
38 | 				{theme === 'dark' ? '🌙' : '🌞'}
39 | 			</button>
40 | 			<div className="bg-white dark:bg-slate-900 min-h-screen font-inter ">
41 | 				<div className="max-w-5xl w-11/12 mx-auto">
42 | 					<HeroSection />
43 | 					<Services />
44 | 					<Works />
45 | 					<About />
46 | 					<Footer />
47 | 				</div>
48 | 			</div>
49 | 		</>
50 | 	);
51 | }
52 | 
53 | export default App;
54 | 


--------------------------------------------------------------------------------
/src/components/About.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import myImg from '../images/hero.jpg';
 3 | import SectionTitle from './SectionTitle';
 4 | 
 5 | function About() {
 6 | 	return (
 7 | 		<div className="flex flex-col md:flex-row items-center justify-center gap-10 md:gap-20 py-12">
 8 | 			<div className="w-full md:w-6/12">
 9 | 				<SectionTitle>About Me</SectionTitle>
10 | 				<p className="text-md text-gray-600 dark:text-gray-300">
11 | 					Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores
12 | 					veniam dolor consectetur pariatur explicabo, iure nulla. Dolor
13 | 					debitis, natus cum ad, fugiat excepturi minima culpa atque modi
14 | 					accusantium vel voluptatem?
15 | 				</p>
16 | 				<a
17 | 					href="mailto:webcifar.com"
18 | 					className="block mt-3 text-md md:text-lg text-gray-700 dark:text-gray-300 underline decoration-1 hover:text-indigo-500 dark:hover:text-indigo-500"
19 | 				>
20 | 					webcifar@gmail.com
21 | 				</a>
22 | 			</div>
23 | 
24 | 			<img
25 | 				src={myImg}
26 | 				alt="Arfan"
27 | 				className="w-full md:w-6/12 rounded-lg object-cover"
28 | 			/>
29 | 		</div>
30 | 	);
31 | }
32 | 
33 | export default About;
34 | 


--------------------------------------------------------------------------------
/src/components/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function Footer() {
 4 | 	return (
 5 | 		<div className="py-5 bg-slate-800 text-center text-gray-300 rounded-t-lg">
 6 | 			<a href="#hero" className="block text-xl md:text-2xl font-semibold">
 7 | 				Shiaf Arfan
 8 | 			</a>
 9 | 			<a
10 | 				href="mailto:webcifar@gmail.com"
11 | 				className="text-sm md:text-md hover:text-indigo-500"
12 | 			>
13 | 				webcifar@emial.com
14 | 			</a>
15 | 			<p className="text-xs mt-2 text-gray-500">
16 | 				© TechHub-Blog Creative {new Date().getFullYear()}. All rights reserved
17 | 			</p>
18 | 		</div>
19 | 	);
20 | }
21 | 
22 | export default Footer;
23 | 


--------------------------------------------------------------------------------
/src/components/HeroSection.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function HeroSection() {
 4 | 	return (
 5 | 		<div id="hero" className="flex items-center justify-center flex-col py-20">
 6 | 			<div className="text-center">
 7 | 				<h1 className="text-2xl md:text-4xl mb-1 md:mb-3 text-indigo-600 dark:text-indigo-500 font-semibold">
 8 | 					Hi, This is Arfan
 9 | 				</h1>
10 | 				<p className="text-md md:text-xl max-w-md mb-3 text-gray-600 dark:text-gray-300">
11 | 					Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi rerum
12 | 					quia harum eaque, quae laboriosam quisquam distinctio{' '}
13 | 				</p>
14 | 				<a
15 | 					href="#works"
16 | 					className="inline-block px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:text-md "
17 | 				>
18 | 					See Works
19 | 				</a>
20 | 			</div>
21 | 		</div>
22 | 	);
23 | }
24 | 
25 | export default HeroSection;
26 | 


--------------------------------------------------------------------------------
/src/components/SectionTitle.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function SectionTitle({ children, id }) {
 4 | 	return (
 5 | 		<h1
 6 | 			id={id && id}
 7 | 			className="text-3xl font-bold mb-5 text-indigo-600 dark:text-indigo-500 "
 8 | 		>
 9 | 			{children}
10 | 		</h1>
11 | 	);
12 | }
13 | 
14 | export default SectionTitle;
15 | 


--------------------------------------------------------------------------------
/src/components/ServiceItem.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function ServiceItem({ title, icon, description }) {
 4 | 	return (
 5 | 		<div className="bg-slate-300 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 hover:-translate-y-2 transform transition rounded-md p-5">
 6 | 			<div className="text-gray-800 dark:text-gray-300 w-6 h-6 mb-3">
 7 | 				{icon}
 8 | 			</div>
 9 | 			<h1 className="font-semibold text-lg text-gray-600 dark:text-gray-200 mb-1">
10 | 				{title}
11 | 			</h1>
12 | 			<p className="text-md text-gray-600 dark:text-gray-300">{description}</p>
13 | 		</div>
14 | 	);
15 | }
16 | 
17 | export default ServiceItem;
18 | 


--------------------------------------------------------------------------------
/src/components/Services.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import services from '../data/services';
 3 | import SectionTitle from './SectionTitle';
 4 | import ServiceItem from './ServiceItem';
 5 | 
 6 | function Services() {
 7 | 	return (
 8 | 		<div className="py-12">
 9 | 			<SectionTitle>Our Services</SectionTitle>
10 | 			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
11 | 				{services.map(service => (
12 | 					<ServiceItem
13 | 						key={service.title}
14 | 						title={service.title}
15 | 						icon={service.icon}
16 | 						description={service.description}
17 | 					/>
18 | 				))}
19 | 			</div>
20 | 		</div>
21 | 	);
22 | }
23 | 
24 | export default Services;
25 | 


--------------------------------------------------------------------------------
/src/components/WorkItem.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | function WorkItem({ imgUrl, title, tech, workUrl }) {
 4 | 	return (
 5 | 		<a
 6 | 			href={workUrl}
 7 | 			target="_blank"
 8 | 			rel="noreferrer"
 9 | 			className="bg-slate-300 dark:bg-slate-800 rounded-lg overflow-hidden"
10 | 		>
11 | 			<img
12 | 				src={imgUrl}
13 | 				alt="work"
14 | 				className="w-full h-36 md:h-48 object-cover"
15 | 			/>
16 | 			<div className="w-full p-5 text-gray-600 dark:text-gray-300 ">
17 | 				<h3 className="text-lg md:text-xl mb-2 md:mb-3 font-semibold">
18 | 					{title}
19 | 				</h3>
20 | 				<p className="flex flex-wrap gap-2 flex-row items-center justify-start text-xs md:text-sm ">
21 | 					{tech.map(item => (
22 | 						<span
23 | 							key={item}
24 | 							className="inline-block px-2 py-1 bg-slate-200 dark:bg-slate-900 rounded-md"
25 | 						>
26 | 							{item}
27 | 						</span>
28 | 					))}
29 | 				</p>
30 | 			</div>
31 | 		</a>
32 | 	);
33 | }
34 | 
35 | export default WorkItem;
36 | 


--------------------------------------------------------------------------------
/src/components/Works.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import works from '../data/works';
 3 | import SectionTitle from './SectionTitle';
 4 | import WorkItem from './WorkItem';
 5 | 
 6 | function Works() {
 7 | 	return (
 8 | 		<div className="py-12">
 9 | 			<SectionTitle id="works">Recent Works</SectionTitle>
10 | 			<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
11 | 				{works.map(work => (
12 | 					<WorkItem
13 | 						key={work.title}
14 | 						imgUrl={work.imgUrl}
15 | 						title={work.title}
16 | 						tech={work.tech}
17 | 						workUrl={work.workUrl}
18 | 					/>
19 | 				))}
20 | 			</div>
21 | 		</div>
22 | 	);
23 | }
24 | 
25 | export default Works;
26 | 


--------------------------------------------------------------------------------
/src/data/services.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { MdWeb } from 'react-icons/md';
 3 | import { FaHandHoldingHeart } from 'react-icons/fa';
 4 | import { VscCode } from 'react-icons/vsc';
 5 | 
 6 | export default [
 7 | 	{
 8 | 		title: 'Web Design',
 9 | 		icon: <MdWeb className="w-full h-full" />,
10 | 		description:
11 | 			'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi rerum quia harum eaque, quae laboriosam quisquam distinctio.',
12 | 	},
13 | 	{
14 | 		title: 'Ui Design',
15 | 		icon: <FaHandHoldingHeart className="w-full h-full" />,
16 | 		description:
17 | 			'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi rerum quia harum eaque, quae laboriosam quisquam distinctio.',
18 | 	},
19 | 	{
20 | 		title: 'Web Development',
21 | 		icon: <VscCode className="w-full h-full" />,
22 | 		description:
23 | 			'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi rerum quia harum eaque, quae laboriosam quisquam distinctio.',
24 | 	},
25 | ];
26 | 


--------------------------------------------------------------------------------
/src/data/works.js:
--------------------------------------------------------------------------------
 1 | export default [
 2 | 	{
 3 | 		title: 'TechHub-Blog',
 4 | 		imgUrl:
 5 | 			'https://raw.githubusercontent.com/ShaifArfan/techHub-blog/main/banner.png',
 6 | 		tech: ['React JS', 'Gatsby JS', 'Sanity.io'],
 7 | 		workUrl: 'https://github.com/ShaifArfan/techHub-blog',
 8 | 	},
 9 | 	{
10 | 		title: "Shaif'f Cuisine",
11 | 		imgUrl:
12 | 			'https://raw.githubusercontent.com/ShaifArfan/shaif-s-cuisine/main/readmeImg/banner.png',
13 | 		tech: ['HTML', 'CSS', 'Netlify'],
14 | 		workUrl: 'https://github.com/ShaifArfan/shaif-s-cuisine',
15 | 	},
16 | 	{
17 | 		title: "Ayan's Portfolio Website",
18 | 		imgUrl:
19 | 			'https://raw.githubusercontent.com/ShaifArfan/AYANs-portfolio/main/ReadMeImages/ReadMeBanner.png',
20 | 		tech: ['React JS', 'CSS'],
21 | 		workUrl: 'https://github.com/ShaifArfan/AYANs-portfolio',
22 | 	},
23 | 	{
24 | 		title: 'Artistic',
25 | 		imgUrl:
26 | 			'https://raw.githubusercontent.com/ShaifArfan/artistic/main/readmeImg/banner.png',
27 | 		tech: ['React JS', 'CSS'],
28 | 		workUrl: 'https://github.com/ShaifArfan/artistic',
29 | 	},
30 | ];
31 | 


--------------------------------------------------------------------------------
/src/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
 3 | <path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
 4 | <defs>
 5 | <linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
 6 | <stop stop-color="#41D1FF"/>
 7 | <stop offset="1" stop-color="#BD34FE"/>
 8 | </linearGradient>
 9 | <linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
10 | <stop stop-color="#FFEA83"/>
11 | <stop offset="0.0833333" stop-color="#FFDD35"/>
12 | <stop offset="1" stop-color="#FFA800"/>
13 | </linearGradient>
14 | </defs>
15 | </svg>
16 | 


--------------------------------------------------------------------------------
/src/images/hero.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaifArfan/react-tailwind-portfolio/54308d1bf83bff8cf56d7cc305974a1bc2b6f71a/src/images/hero.jpg


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './styles/tailwind.css';
 4 | import App from './App';
 5 | 
 6 | ReactDOM.render(
 7 | 	<React.StrictMode>
 8 | 		<App />
 9 | 	</React.StrictMode>,
10 | 	document.getElementById('root')
11 | );
12 | 


--------------------------------------------------------------------------------
/src/styles/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	content: ['./index.html', './src/**/*.{jsx, js}'],
 3 | 	darkMode: 'class',
 4 | 	theme: {
 5 | 		extend: {
 6 | 			fontFamily: {
 7 | 				inter: ['inter', 'serif'],
 8 | 			},
 9 | 		},
10 | 	},
11 | 	plugins: [],
12 | };
13 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()]
7 | })
8 | 


--------------------------------------------------------------------------------