Forem: Rohit Yadav

Unleash the Power of Your Links (UrlHub)

Rohit Yadav — Sat, 21 Dec 2024 12:38:41 +0000

Are you tired of managing clunky, hard-to-remember URLs? Or perhaps you're curious about how your shared links perform across different platforms and regions? Say hello to the ultimate solution: a powerful URL shortener website that goes beyond the basics to bring you a suite of insightful features.

Why Shorten URLs?

Long URLs can be messy and unappealing, especially when sharing them on social media, in emails, or during presentations. URL shorteners make your links:

Compact and Clean: Easier to share and remember.
Trackable: Gain insights into who is engaging with your links.
Professional: Build trust with branded, shortened URLs.

But why settle for just shortening when you can do so much more?

Dive Into Comprehensive Link Analytics

This next-generation URL shortener isn't just about making your links shorter—it's about making them smarter. Here's what sets it apart:

Total Clicks: Keep track of how many times your link has been clicked. Measure your link’s overall impact.
Clicks by Country: Identify where your audience is located. Perfect for targeting specific regions with your content.
Browser Insights: Discover which browsers are most popular among your audience.
Operating System Data: Find out whether users are clicking through on mobile, desktop, or other platforms.

These detailed analytics can help you optimize your content strategy, improve your targeting, and make data-driven decisions.

Seamless User Experience

Designed with users in mind, this website boasts a sleek, modern interface that’s easy to navigate. Built using the latest technologies like Next.js, the platform ensures a fast, responsive experience, whether you’re shortening URLs or diving deep into analytics.

Who Can Benefit?

Marketers: Track campaign performance and refine targeting strategies.
Content Creators: Understand audience preferences and behavior.
Business Owners: Enhance customer engagement with concise, branded URLs.
Anyone Sharing Links: Simplify link management and boost click-through rates.

Get Started Today!
Transform the way you share and track links. Experience the perfect blend of simplicity and power with this innovative URL shortener. Whether you’re a marketer, creator, or casual user, this tool will elevate your link-sharing game.

🌟 Supercharge Your React App: The Ultimate Guide to Stunning Loading Effects!

Rohit Yadav — Sat, 16 Mar 2024 15:03:12 +0000

Hey there, React beginners! Have you ever visited a website where you see a little spinning animation indicating that something is loading? That's what we call a spinner! It's a great way to let users know that your app is working on fetching data or performing some task in the background. Today, I'll walk you through how to add a spinner to your React application using a library called react-spinners.

What is react-spinners?

React-spinners is a library that provides pre-built spinner components for React applications. These components are customizable and easy to use, making it simple for developers to add loading indicators to their projects without having to create them from scratch.

Prerequisites

Before we begin, make sure you have Node.js and npm (Node Package Manager) installed on your system. You should also have a basic understanding of React and JSX.

Getting Started

Before we dive in, make sure you have a React project set up. If you haven't already created one, you can use Create React App to quickly generate a new project:

npx create-react-app my-spinner-app
cd my-spinner-app
npm start

Once your project is set up, you can install react-spinners by running:

npm install react-spinners

Choosing a Spinner

The react-spinners library offers various spinner styles to choose from. You can explore the available options on the official documentation. For this tutorial, let's select the "PulseLoader" spinner.

Adding a Spinner Component

Now that we have react-spinners installed, let's create a simple spinner component and add it to our application.

First, create a new file called Spinner.js in your src directory.

// Spinner.js
import React from 'react'
import PulseLoader from 'react-spinners/PulseLoader';

const Spinner = ({ color, size }) => {

    const spinner = (
        <PulseLoader color={color ? color : 'white'} size={size ? size : 8} aria-label="Loading Spinner" />
    );

    return (
        <div>{spinner}</div>
    )
}

export default Spinner

In this code:

We import React from the React library, as we're creating a React component.
We import PulseLoader from 'react-spinners/PulseLoader', which is a component used for displaying a pulsating loading spinner animation.
We define a functional component called Spinner that takes in two props: color and size.
Inside the Spinner component, we initialize a constant named spinner, which holds the PulseLoader component. We set the color prop to the value passed via props or default to 'white', and the size prop to the value passed via props or default to 8.
We return a <div> containing the spinner component.
The aria-label attribute is set on the PulseLoader component for accessibility purposes, providing a label for the loading spinner.
Finally, we export the Spinner component as the default export from this module.

Using the Spinner Component

Now that we have our spinner component, let's use it in our main App component.

// App.js
import React, { useState, useEffect } from 'react';
import Spinner from './Spinner';

const App = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Simulate a delay (e.g., fetching data from an API)
    const timer = setTimeout(() => {
      setLoading(false);
    }, 3000); // Change the time according to your needs

    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="App">
      {loading ? <Spinner /> : <h1>Content Loaded!</h1>}
    </div>
  );
};

export default App;

In this code:

We import React, useState, useEffect, and our Spinner component.
We create a state variable loading to keep track of whether our content is loading or not.
We use the useEffect hook to simulate a loading delay. In a real-world scenario, this is where you might fetch data from an API.
While loading is true, we display the Spinner component. Once the loading is complete (loading becomes false), we display the content.

Conclusion

And that's it! You've successfully added a spinner to your React application using react-spinners. Feel free to customize the spinner's appearance and behavior according to your project's requirements. Happy coding! 🚀

Uploading Images with Node.js and React.js

Rohit Yadav — Thu, 14 Mar 2024 16:08:01 +0000

In today's digital era, images play a crucial role in enhancing user experience on websites and applications. As a developer, knowing how to efficiently handle image uploads is essential. In this guide, we'll walk you through the process of uploading images to Cloudinary, a cloud-based image management solution, in easy-to-understand terms.

What is Cloudinary?

Cloudinary is a cloud-based image and video management platform that provides developers with a comprehensive set of tools for storing, managing, and delivering media assets. It offers features like image and video upload, transformation, optimization, and delivery through a simple API.

Why Use Cloudinary for Image Uploads?

Ease of Use: Cloudinary offers a simple API and intuitive interface, making it easy for developers to integrate and use.
Scalability: It can handle large volumes of image uploads and traffic seamlessly, ensuring reliability and performance.
Transformation: Cloudinary allows you to manipulate images on-the-fly, such as resizing, cropping, and applying effects, without storing multiple versions of the image.
Optimization: Automatically optimize images for faster loading times and better user experience.
CDN Integration: Cloudinary integrates seamlessly with Content Delivery Networks (CDNs) for fast and efficient content delivery worldwide.

Getting Started with Cloudinary

1. Sign Up for Cloudinary Account

Visit the Cloudinary website and sign up for a free account. Once registered, you'll receive API credentials (cloud name, API key, and API secret) that you'll need to authenticate your requests.

2. Install Cloudinary SDK

Cloudinary provides SDKs for various programming languages and platforms. Install the Cloudinary SDK for your preferred programming language (e.g., JavaScript, Python, PHP) using package managers like npm, pip, or composer.

3. Upload an Image

To upload an image to Cloudinary, you'll typically follow these steps:

Choose File: Select the image file you want to upload.
Send to Cloudinary: Use the Cloudinary SDK to send the image file to Cloudinary servers. You'll include your API credentials and specify any additional parameters like folder, tags, or transformations.
Receive Image URL: Once the upload is successful, Cloudinary will return a URL that you can use to access the uploaded image.

4. Display Uploaded Image

You can now display the uploaded image on your website or application using the URL provided by Cloudinary. This URL can be directly embedded in <img> tags or dynamically generated based on user requests.

Example: Uploading an Image Using Node.js and ReactJs

In this tutorial, we'll guide you through the process of uploading images to Cloudinary, a cloud-based image management platform, using Node.js for the backend and React.js for the frontend. By the end of this tutorial, you'll be able to create a simple application that allows users to upload images along with their name and email, storing the image URL in a MongoDB database.

Prerequisites

Before we begin, make sure you have the following:

Node.js and npm installed on your machine
Basic understanding of Node.js, React.js, and MongoDB

Setting up the Backend with Node.js

1. Initialize your project

Create a new directory for your project and initialize a Node.js project using the following commands:

mkdir image-upload-app
cd image-upload-app
npm init -y

2. Install dependencies

Install the required npm packages: express, mongoose, multer, cloudinary, and dotenv.

npm install express mongoose multer cloudinary dotenv

3. Configure Cloudinary and MongoDB

Create a .env file in the root of your project and add the following configuration:

CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
MONGO_URI=your_mongodb_connection_uri

4. Set up the server

Create a server.js file and set up your Express server, database connection, and route for image upload.

// server.js
const express = require('express');
const connectDB = require('./config/db');
const cors = require('cors');
const userRoute = require('./routes/userRoute');

const app = express();

// Connect to MongoDB
connectDB();

// Middleware
app.use(cors());
app.use(express.json());

// Routes
app.use('/api/v1/user', userRoute);

// Start the server
const PORT = process.env.PORT || 8000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

5. Define the User model

Create a models/User.js file to define the Mongoose model for the user.

// models/User.js
const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true
  },
  email: {
    type: String,
    required: true,
    unique: true
  },
  profileImageUrl: {
    type: String
  }
});

module.exports = mongoose.model('User', userSchema);

6. Implement image upload route

Create a routes/userRoute.js file to handle image upload.

// routes/userRoute.js
const express = require('express');
const router = express.Router();
const multer = require('multer');
const cloudinary = require('cloudinary').v2;
const { CloudinaryStorage } = require('multer-storage-cloudinary');
const User = require('../models/User');

// Configure Cloudinary
cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET
});

// Configure multer storage for Cloudinary
const storage = new CloudinaryStorage({
  cloudinary: cloudinary,
  params: {
    folder: 'profile_images',
    allowed_formats: ['jpg', 'jpeg', 'png']
  }
});
const upload = multer({ storage: storage });

// Image upload route
router.post('/upload', upload.single('image'), async (req, res) => {
  try {
    const { name, email } = req.body;
    const profileImageUrl = req.file.path;

    // Create a new user instance
    const user = new User({
      name,
      email,
      profileImageUrl
    });

    // Save the user to the database
    await user.save();

    res.status(201).json({ message: 'User created successfully' });
  } catch (error) {
    console.error('Error creating user:', error);
    res.status(500).json({ message: 'Internal server error' });
  }
});

module.exports = router;

Setting up the Frontend with React.js

1. Create a React app

Create a new React app using Create React App:

npx create-react-app client
cd client

2. Install Axios

Install Axios for making HTTP requests:

npm install axios

3. Create the image upload component

Replace the content of src/App.js with the following code:

// src/App.js
import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [image, setImage] = useState(null);

  const handleImageChange = (e) => {
    setImage(e.target.files[0]);
  };

  const handleNameChange = (e) => {
    setName(e.target.value);
  };

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const formData = new FormData();
    formData.append('name', name);
    formData.append('email', email);
    formData.append('image', image);

    try {
      await axios.post('http://localhost:8000/api/v1/user/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      console.log('User created successfully');
    } catch (error) {
      console.error('Error creating user:', error);
    }
  };

  return (
    <div className="App">
      <h1>Image Upload Form</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Name:</label>
          <input type="text" value={name} onChange={handleNameChange} required />
        </div>
        <div>
          <label>Email:</label>
          <input type="email" value={email} onChange={handleEmailChange} required />
        </div>
        <div>
          <label>Profile Picture:</label>
          <input type="file" accept="image/*" onChange={handleImageChange} required />
        </div>
        <button type="submit">Upload</button>
      </form>
    </div>
  );
}

export default App;

4. Run the app

Start the development server for both the backend and frontend:

# In the root directory of your project
npm start

# In the client directory
npm start

⚠️ Important Notice: This code is intended for demonstration purposes only. Please refrain from using the exact code in your production environment without making necessary modifications.

Conclusion

Congratulations! You have successfully set up an application to upload images to Cloudinary using Node.js and React.js. With this knowledge, you can extend the functionality of your application and explore additional features offered by Cloudinary for image management and optimization.

Happy coding! 🚀

Fetch Geo Data from any IP Address in React

Rohit Yadav — Wed, 13 Mar 2024 10:25:57 +0000

In this tutorial, we'll explore how to retrieve geographical data from an IP address using the ipinfo API in a React application. We'll make use of the Axios library for making HTTP requests.

Prerequisites

Before we get started, ensure you have Node.js and npm installed on your machine.

Step 1: Set up a React Application

If you haven't already set up a React application, you can create one using Create React App. Open your terminal and run the following command:

npx create-react-app ipinfo-react-app

This command will create a new React application named ipinfo-react-app.

Step 2: Install Axios

Axios is a promise-based HTTP client for the browser and Node.js. We'll use it to make requests to the ipinfo API. Install Axios by running the following command in your terminal:

npm install axios

Step 3: Obtain an API Access Token

You need an access token from ipinfo to access their API. Go to ipinfo.io and sign up for an account. After signing up, you'll get an access token. Keep it handy as we'll need it in the next step.

Step 4: Fetch Geo Data using Axios

Navigate to the src directory of your React application and create a new file named GeoData.js. In this file, we'll write the code to fetch geo data from ipinfo.

// GeoData.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const GeoData = () => {
  const [geoData, setGeoData] = useState(null);
  const ipinfoToken = 'YOUR_IPINFO_ACCESS_TOKEN';

  useEffect(() => {
    const fetchGeoData = async () => {
      try {
        const response = await axios.get(`https://ipinfo.io?token=${ipinfoToken}`);
        setGeoData(response.data);
      } catch (error) {
        console.error('Error fetching geo data:', error);
      }
    };

    fetchGeoData();
  }, []);

  return (
    <div>
      <h2>Geo Data</h2>
      {geoData && (
        <ul>
          <li>IP: {geoData.ip}</li>
          <li>City: {geoData.city}</li>
          <li>Region: {geoData.region}</li>
          <li>Country: {geoData.country}</li>
          <li>Location: {geoData.loc}</li>
          <li>Organization: {geoData.org}</li>
        </ul>
      )}
    </div>
  );
};

export default GeoData;

Replace 'YOUR_IPINFO_ACCESS_TOKEN' with your actual ipinfo access token obtained in Step 3. Also, you can store your ACESS_TOKEN in env file which is the best way to do so.

Step 5: Render GeoData Component

Open App.js in the src directory and import the GeoData component we just created. Replace the existing code in App.js with the following:

// App.js
import React from 'react';
import './App.css';
import GeoData from './GeoData';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>IPInfo Geo Data</h1>
      </header>
      <GeoData />
    </div>
  );
}

export default App;

Step 6: Start the Application

Now, you can start your React application by running the following command in your terminal:

npm start

Preview

This command will start the development server, and you should be able to see your application running at http://localhost:3000. You'll see the fetched geo data displayed on the screen.

That's it! You have successfully fetched geo data from an IP address using ipinfo in a React application using Axios. Feel free to customize the UI or extend the functionality as needed.

Elevate Your Web Design: How to Enhance Your HTML with GitHub Utils CSS via CDN

Rohit Yadav — Tue, 12 Mar 2024 10:44:22 +0000

Are you looking to add a personal touch to your website's design? Good news! You can take control of your styles by uploading your own utils.css file to your GitHub repository. This guide will walk you through the process, from uploading your custom CSS to finding the file's URL, allowing you to effortlessly integrate it into your web projects.

Step 1: Upload Your Custom utils.css to GitHub

Create a GitHub Repository:
If you don't have a GitHub repository yet, create one to store your custom CSS. You can do this on the GitHub website by clicking on the "+" sign in the top right corner and selecting "New repository." Keep the repository Public to access this file from anywhere.
Upload utils.css:
Once your repository is set up, navigate to it and click on the "Add file" button. Choose "Upload files" and select your utils.css file. Commit the changes to complete the upload.

Example of utils.css

.text-center: {
    text-align: center;
}

.bg-red {
    background: red;
}

.border-none {
    border: none;
}

.outline-none {
    outline: none;
}

.danger {
    color: white;
    background: rgba(255, 0, 0, 0.6);
}

.danger:hover {
    box-shadow: 5px 5px 10px rgba(255, 111, 111, 0.5), -5px -5px 10px rgba(255, 111, 111, 0.5);
}

.success {
    color: rgb(0, 0, 0);
    background: rgba(0, 255, 47, 0.6);
}

.success:hover {
    box-shadow: 5px 5px 10px rgba(125, 255, 111, 0.5), -5px -5px 10px rgba(125, 255, 111, 0.5);
}

.flex {
    display: flex;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.items-center {
    align-items: center;
    justify-content: center;
}

/* Add more css as per your requirement */

Step 2: Find the URL for Your Custom CSS

Access Your CSS File:
Go to your GitHub repository and navigate to the folder containing your utils.css file. Click on the file to view its contents.
Copy the URL:
Click on the "Raw" button on the top-right of the file viewer. Copy the URL from your browser's address bar.

Step 3: Integrate Your Custom utils.css into Your HTML

Open Your HTML File:
Using a text editor, open the HTML file where you want to apply your custom styles.
Add the CDN Link:
Within the <head> section of your HTML, insert a <link> tag with the copied URL from your utils.css file.
Convert your GitHub repository to cdn link:
If your GitHub link is https://github.com/example/cdn/css/utils.css then convert this into https://cdn.jsdelivr.net/gh/example/cdn/css/utils.css to use utils.css as cdn

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Your Web Page Title</title>

        <!-- Add your custom utils.css via CDN link -->
            <link href="https://cdn.jsdelivr.net/gh/example/cdn/css/utils.css" rel="stylesheet" crossorigin="anonymous">
    </head>
    <body>
        <!-- Your HTML content goes here -->
        <button class="border-none outline-none danger">Alert</button>
    </body>
</html>

Preview

Step 4: Save and Experience the Transformation!

Save your HTML file, open it in a web browser, and witness the magic as your custom utils.css brings your web design to life!

Congratulations! You've successfully uploaded and integrated your own utils.css file through GitHub, giving you complete control over the aesthetics of your web projects. Feel free to update your CSS file on GitHub as needed, and watch your designs evolve with ease.

Adding Page Titles to React App

Rohit Yadav — Mon, 11 Mar 2024 18:00:36 +0000

If you're building a React application with multiple pages, you might want to give each page a unique title for a better user experience and search engine optimization. Fortunately, with the help of react-router-dom, achieving this is straightforward. In this guide, we'll walk through the steps to add a page title to every route in your React application.

Step 1: Install react-router-dom

Make sure you have react-router-dom installed in your project. If not, you can install it using:

npm install react-router-dom

Step 2: Implement react-router-dom

In your index.js or App.js (or wherever your main routing setup is), import BrowserRouter and Route from react-router-dom.

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

Step 3: Create a PageTitle component

Next, create a simple PageTitle component that will set the document title based on the route.

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const PageTitle = ({ title }) => {
  const location = useLocation();

  useEffect(() => {
    document.title = title;
  }, [location, title]);

  return null;
};

export default PageTitle;

This component takes a title prop and sets the document title accordingly. If no title is provided, it defaults to a generic title.

Step 4: Integrate PageTitle with Routes

Now, use the PageTitle component within your Route components. For each route, pass a title prop with the desired page title.

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import PageTitle from './PageTitle'; // Adjust the path as per your file structure

const Home = () => (
  <>
    <PageTitle title="Home" />
    <div>
      <h1>Welcome to the Home Page</h1>
      {/* Your home page content */}
    </div>
  </>
);

const About = () => (
  <>
    <PageTitle title="About Us" />
    <div>
      <h1>About Us</h1>
      {/* Your about page content */}
    </div>
  </>
);

const App = () => (
  <Router>
    <Route path="/" exact component={Home} />
    <Route path="/about" component={About} />
    {/* Add more routes as needed */}
  </Router>
);

export default App;

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import PageTitle from './PageTitle'; // Adjust the path as per your file structure

const Home = () => (
  <>
    <div>
      <h1>Welcome to the Home Page</h1>
      {/* Your home page content */}
    </div>
  </>
);

const Error = () => (
  <>
    <div>
      <h1>404 | Error</h1>
      {/* Your about page content */}
    </div>
  </>
);

<BrowserRouter/>
   <Routes>
      <Route
        exact
        path="/"
        element={
          <>
            <PageTitle title="My Home Page" />
            <Home />
          </>
        }
      />
     <Route
        exact
        path="/*"
        element={
          <>
            <PageTitle title="404 | Page not found" />
            <Error />
          </>
        }
      />
   <Routes>
<BrowserRouter/>

By incorporating the PageTitle component into each route, you ensure that the document title is updated whenever the user navigates to a different page.

That's it! You've successfully added page titles to your React application using react-router-dom. This simple approach enhances the user experience and helps search engines better understand the content of each page. Happy coding!

Adding Custom Validation in Mongoose Schema💡

Rohit Yadav — Sun, 10 Mar 2024 12:22:07 +0000

Mongoose, the MongoDB Object Modeling tool for Node.js, provides a powerful and flexible way to define data schemas for your MongoDB collections. While Mongoose comes with built-in validators, there are times when you need to implement custom validation logic to ensure that your data meets specific requirements. In this blog post, we'll explore how to add custom validation to a Mongoose schema and understand the benefits it brings to your application.

Why Custom Validation?

Custom validation allows you to define and enforce rules beyond the standard validators provided by Mongoose. It empowers you to tailor validation logic according to your application's unique requirements, ensuring data integrity and preventing invalid or inconsistent data from being stored in the database.

Getting Started

Let's dive into a step-by-step guide on how to add custom validation to a Mongoose schema.

Step 1: Define a Mongoose Schema

First, let's create a simple Mongoose schema. In this example, we'll create a schema for a user with a custom validation rule for the age field.

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  username: {
    type: String,
    required: true,
  },
  age: {
    type: Number,
    validate: {
      validator: function (value) {
        // Custom validation logic goes here
        return value >= 18; // For example, require users to be 18 or older
      },
      message: 'User must be 18 or older',
    },
  },
});

const User = mongoose.model('User', userSchema);

Step 2: Implement Custom Validation Logic

In the age field's validate property, you can define a custom validation function. This function should return true if the data is valid and false otherwise. In our example, the validation ensures that the user is 18 years or older.

Step 3: Use the Schema in Your Application

Now that you've defined your schema with custom validation, you can use it in your application to create and save documents.

const newUser = new User({
  username: 'JohnDoe',
  age: 20,
});

newUser.save()
  .then(() => {
    console.log('User saved successfully');
  })
  .catch((err) => {
    console.error(`Error saving user: ${err.message}`);
  });

If the age provided is less than 18, the save operation will fail, and an error message will be logged.

Benefits of Custom Validation

Tailored Rules: You can enforce business-specific rules that go beyond standard validation, ensuring data consistency based on your application's requirements.
Improved Data Quality: Custom validation helps maintain a higher standard of data quality by preventing the insertion of invalid or inconsistent data.
Code Reusability: Once you define custom validation logic, you can reuse it across multiple schemas, promoting a consistent approach to data validation in your application.

In conclusion, adding custom validation to your Mongoose schemas allows you to enhance the integrity and quality of your data. By tailoring validation rules to your application's needs, you ensure that your MongoDB collections contain reliable and meaningful information.

Simplest way to add Slider in React

Rohit Yadav — Sat, 09 Mar 2024 18:14:38 +0000

If you're a beginner in the world of React and want to spice up your web application with a sleek image slider, you're in the right place. In this guide, we'll walk through the process of adding a slider to your React project using the Swiper package, and we'll style it effortlessly with Tailwind CSS. To make things even smoother, we'll be working with Vite, a fast and opinionated build tool.

What is Swiper?

Swiper is a powerful and easy-to-use touch slider library for web and mobile applications. It provides a range of customization options and supports touch gestures, making it an ideal choice for creating responsive and interactive sliders.

Prerequisites

Before we dive in, make sure you have Node.js installed on your machine. You can download it here.

Setting up Vite

Let's start by creating a new React project using Vite. Open your terminal and run the following commands:

npx create-vite my-slider-app --template react
cd my-slider-app

Now, let's install the required dependencies:

npm install swiper
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configuring Tailwind CSS

Vite makes it simple to configure Tailwind CSS. Create a tailwind.config.js file in the project root with the following content:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Next, In the src folder and in index.css add the following code for tailwind css

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Your custom styles go here */

Setting up Swiper

Let's create a simple React component to showcase the Swiper slider. Create a component directory and make a new file Slider.jsx and add following content:

// src/components/Slider.jsx
import React from 'react';
import { Autoplay, A11y} from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/controller';

const Slider = () => {

    const images = ['https://images.pexels.com/photos/16770561/pexels-photo-16770561/free-photo-of-scenic-view-of-green-hills-and-mountains.jpeg', 'https://images.pexels.com/photos/20041507/pexels-photo-20041507/free-photo-of-close-up-of-sleeping-cat.jpeg', 'https://images.pexels.com/photos/12187128/pexels-photo-12187128.jpeg', 'https://images.pexels.com/photos/11785594/pexels-photo-11785594.jpeg']

    return (
        <section className='bg-white mt-10 mx-4 sm:mx-8 md:mx-20 lg:mx-36 z-10'>
            <div className='text-center font-extrabold text-2xl my-8'>Your own Slider</div>
            <Swiper
                modules={[Autoplay, A11y]}
                spaceBetween={30} // Adjust the spacing as needed
                slidesPerView={1} // Show only one slide by default
                autoplay
            >
                {images.map((img, index) => (
                    <SwiperSlide key={index}>
                        <a href='/#'>
                            <img
                                src={img}
                                alt={`slide-${index + 1}`}
                                className='w-fit h-[500px] mx-auto select-none'
                            />
                        </a>
                    </SwiperSlide>
                ))}
            </Swiper>
        </section>
    );
};

export default Slider;

Now, integrate the Slider component into your App.jsx:

import React from 'react'
import Slider from './components/Slider'

const App = () => {
  return (
    <>
      <div>
        <Slider />
      </div>
    </>
  )
}

export default App

Here, we are using the Swiper component and SwiperSlide component from the Swiper package to create a basic slider. Feel free to replace the image URLs with your own content.

Running your Slider App

Now that everything is set up, run your development server:

npm run dev

Visit http://localhost:5173 in your browser, and voila! You should see a beautiful slider in action.

Preview

This image shows the final product we made in this blog

Congratulations! You've successfully added a slider to your React project using the Swiper package and styled it with Tailwind CSS. This combination of powerful tools allows you to create dynamic and visually appealing sliders effortlessly.

Feel free to check out the Swiper documentation for more ways to customize your slider and add cool features. You can change how the slider works, add more pictures, and let your imagination run wild to make your website more interesting for users. If you want to see some examples of different sliders in action, take a look at the demos on the Swiper website. They'll give you a great idea of what you can do with your slider!

Now that you've mastered the art of integrating a slider in React with Tailwind CSS using Vite, you're well on your way to building more dynamic and responsive web applications. Happy coding!

Make Resume in 60 Seconds

Rohit Yadav — Fri, 08 Mar 2024 15:49:10 +0000

In today's fast-paced world, efficiency is key, even when it comes to creating a resume. Whether you're a recent graduate entering the job market or a seasoned professional looking for new opportunities, having a polished resume is essential. In this blog post, we'll explore how you can leverage the power of ChatGPT and LaTex to craft a professional resume in just 60 seconds.

Step 1: Get Ready with your Details

Before diving into the resume creation process, gather all the necessary details you want to include in your resume. This includes your personal information, education background, work experience, skills, and any other relevant information.

Step 2: Open ChatGPT and write this prompt

LaTex is a powerful typesetting system commonly used for creating documents, especially in academia and professional settings. Open your preferred LaTex editor to begin the resume-building process.

Prompt :

Build a resume for me in Latex using an appropriate template. My name is [Your Name]. I am from [Your Address].
Phone: [Your Phone Number]
Email: [Your Email Address]
LinkedIn: [Your LinkedIn]
GitHub: [Your GitHub]

Summary
[Your Summary]

Skills
[Your Skills]

Education
[Your Education]

Projects
[Your Projects]

Experience
[Your Experience]

Certifications
[Certifications]

Languages
[Languages]

Interests
[Interests]

Feel free to replace "[Your Name]," "[Your Address]," and other placeholders with your actual information. This prompt will guide ChatGPT in generating a LaTeX template for your resume, covering all the necessary sections.

ChatGPT Response:

\documentclass[a4paper,10pt]{article}
\usepackage[left=1in,right=1in,top=1in,bottom=1in]{geometry}
\usepackage{enumitem}
\usepackage{titlesec}

\pagestyle{empty}
\setlength\parindent{0pt}

\titleformat{\section}{\bfseries\uppercase}{}{0em}{}[\titlerule]

\begin{document}

\begin{center}
    \textbf{\LARGE John Doe} \\
    123 Main Street, Cityville, State 12345 \\
    Phone: (555) 555-5555 | Email: john.doe@email.com \\
    LinkedIn: linkedin.com/in/johndoe | GitHub: github.com/johndoe
\end{center}

\section*{Summary}
Enthusiastic and detail-oriented Full Stack Web Developer with a passion for creating dynamic and responsive web applications. Proficient in both front-end and back-end technologies, dedicated to continuous learning and staying updated on industry trends.

\section*{Skills}
\begin{itemize}[left=0pt, itemsep=1pt]
    \item Front-end: HTML5, CSS3, JavaScript, React.js, Bootstrap
    \item Back-end: Node.js, Express.js, MongoDB
    \item Database: MongoDB, MySQL
    \item Version Control: Git, GitHub
    \item Tools: Visual Studio Code, Postman
    \item Deployment: Heroku, Netlify
\end{itemize}

\section*{Education}
\textbf{Bachelor of Science in Computer Science} \\
University of Techland, Cityville, State \\
Graduated: May 2022

\section*{Projects}
\textbf{1. E-commerce Platform} \\
Developed a responsive e-commerce website using React.js for the front-end and Node.js with Express.js for the back-end. Integrated MongoDB for database functionality.

\textbf{2. Task Management App} \\
Built a task management application with React.js and Redux for state management. Implemented user authentication and data storage using Firebase.

\section*{Experience}
\textbf{Junior Web Developer} | XYZ Tech Solutions, Cityville, State | June 2022 - Present
\begin{itemize}[left=0pt, itemsep=1pt]
    \item Collaborated with senior developers to implement new features and resolve bugs in existing web applications.
    \item Assisted in the development of a client portal, improving user experience and efficiency.
\end{itemize}

\textbf{Intern} | ABC Software Co., Citytown, State | May 2021 - August 2021
\begin{itemize}[left=0pt, itemsep=1pt]
    \item Worked on front-end development tasks, creating and enhancing user interfaces using HTML, CSS, and JavaScript.
    \item Gained hands-on experience with Git for version control and collaborated in a team environment.
\end{itemize}

\section*{Certifications}
\textbf{Full Stack Web Development Certification} \\
Online Coding Academy | Completed: November 2022

\section*{Languages}
\textbf{English} (Fluent)

\section*{Interests}
\begin{itemize}[left=0pt, itemsep=1pt]
    \item Continuous learning and exploring new technologies
    \item Open source contributions and community engagement
    \item Hiking and photography
\end{itemize}

\end{document}

Step 3: Utilize a LaTeX Editor for Seamless Resume Creation

Now that you've got your personalized LaTeX code from ChatGPT, it's time to bring it to life with the help of a LaTeX editor. For this example, I'll be using Overleaf, a user-friendly online LaTeX editor that simplifies the document creation process.

i) Choose Your LaTeX Editor:
Select a LaTeX editor of your choice. For our demonstration, we'll use Overleaf for its accessibility and collaborative features.

ii) Access Overleaf:
Visit Overleaf and log in to your account. If you don't have one, you can quickly sign up for free.

iii) Create a New Project:
Once logged in, create a new project in Overleaf. This will serve as the canvas for your resume.

iv) Paste Your LaTeX Code:
Copy the LaTeX code generated by ChatGPT and paste it into the editor. This code includes sections for your personal information, summary, skills, education, projects, experience, certifications, languages, and interests.

v) Recompile the Code:
After pasting the code, click the "Recompile" button in the editor. This step ensures that your resume is formatted correctly and any changes you've made are reflected in real-time.

vi) Download Your Resume:
Once the code is compiled successfully, download your resume as a PDF. Most LaTeX editors, including Overleaf, provide an option to export your document in different formats.

vii) Review and Refine:
Open the downloaded PDF and review your resume. Ensure all the information is accurate, and the formatting meets your expectations. Feel free to make any additional edits using the LaTeX editor if needed.

Using a LaTeX editor like Overleaf not only simplifies the document creation process but also allows for collaborative work and easy access from different devices. Enjoy the seamless experience of turning your ChatGPT-generated LaTeX code into a polished and professional resume!

Preview :

This image shows the final product we made in this blog

Conclusion:

By combining the quick content generation capabilities of ChatGPT with the precision and professionalism of LaTex, you can create a compelling resume in just 60 seconds. This streamlined approach allows you to focus on showcasing your skills and experiences, giving you a head start in the competitive job market. Don't forget to save your LaTex file and export it to a PDF for easy sharing with potential employers. Happy job hunting!

Calculator UI in HTML and CSS

Rohit Yadav — Thu, 07 Mar 2024 16:41:53 +0000

Web design is like a playground of creativity, and there's a new trend making waves – it's called Newmorphism. It's a cool mix of two design buddies – Neumorphism and Skeuomorphism. In this easy-to-follow guide, we'll create a basic calculator using HTML and CSS, diving into the soft shadows, gradients, and rounded corners that make Newmorphism stand out.

Understanding Newmorphism

So, what's Newmorphism all about? It's a design style that combines Neumorphism's soft shadows (making things look touchable) with Skeuomorphism's realistic design elements. The result? An awesome, user-friendly interface that's easy on the eyes.

Let's Build a Newmorphism Calculator

HTML Setup

We'll kick things off by setting up the basic structure for our calculator. Copy and paste the following code into your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="utils.css">
    <title>Calculator</title>
</head>
<body>
    <div class="container flex items-center">
        <div class="content flex-col items-center">
            <div class="items flex-col items-center">
                <input type="text">
                <!-- Buttons for numbers and operations -->
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS Styles

Now, let's add some style magic to our calculator. We've split the styles into two files – utils.css for utility classes and style.css for the main design. Copy and paste the following codes into their respective files.

utils.css:

.bg-red {
    background: red;
}

.danger {
    color: white;
    background: rgba(255, 0, 0, 0.6);
}

.danger:hover {
    box-shadow: 5px 5px 10px rgba(255, 111, 111, 0.5), -5px -5px 10px rgba(255, 111, 111, 0.5);
}

.success {
    color: rgb(0, 0, 0);
    background: rgba(0, 255, 47, 0.6);
}

.success:hover {
    box-shadow: 5px 5px 10px rgba(125, 255, 111, 0.5), -5px -5px 10px rgba(125, 255, 111, 0.5);
}

.flex {
    display: flex;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.items-center {
    align-items: center;
    justify-content: center;
}

style.css:

@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

body {
    background-color: #e0e5ed;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.container {
    height: 100vh;
}


.content {
    width: 330px;
    height: 450px;
    border-radius: 10px;
    background-color: #e0e5ed;
    box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
}

.btn {
    width: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    font-size: 1.3rem;
    border-radius: 10px;
    margin: 5px;
    background-color: #e0e5ed;
    box-shadow: 5px 5px 10px rgb(163, 177, 198, 0.6), -5px -5px 10px rgba(255, 255, 255, 0.5);
    font-weight: 600;
    cursor: pointer;
}

.btn:hover {
    box-shadow: inset 5px 5px 10px rgb(163, 177, 198, 0.6), inset -5px -5px 10px rgba(255, 255, 255, 0.5);
}

.items input {
    padding: 10px;
    margin: 10px;
    font-size: 1.5rem;
    width: 240px;
    border: none;
    border-radius: 5px;
}

Preview

This image shows the final product we made in this blog

Conclusion

In this guide, we explored the world of Newmorphism – a trendy design style. By creating a simple calculator with HTML and CSS, we embraced the soft shadows, gradients, and rounded corners that define Newmorphism. As a beginner, experimenting with these design trends can make your projects look modern and delightful. Keep exploring, and most importantly, have fun with your designs!

Honeypot for Spam Prevention React & Tailwind CSS

Rohit Yadav — Wed, 06 Mar 2024 09:30:11 +0000

Spam bots can be a nuisance, especially when dealing with forms on your website. One effective method to prevent spam submissions is by implementing a honeypot, a hidden field that should remain empty for legitimate users but may be filled out by spam bots. In this tutorial, we'll walk through the steps of adding a honeypot to a simple React form styled with Tailwind CSS.

Prerequisites

Make sure you have Node.js and npm installed on your machine. If not, you can download them from nodejs.org.

Step 1: Create a React App

npx create-react-app react-tailwind-honeypot
cd react-tailwind-honeypot

Step 2: Install Tailwind CSS

npm install tailwindcss

Initialize Tailwind CSS by creating a configuration file:

npx tailwindcss init -p

Step 3: Set Up Tailwind CSS with React

Create a tailwind.css file in the src directory:

/* src/tailwind.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Import this CSS file in your src/index.js:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './tailwind.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Step 4: Create a Simple Form

Replace the contents of src/App.js with a basic form:

// src/App.js
import React from 'react';

const App = () => {
  const handleSubmit = (e) => {
    e.preventDefault();
    // Add form submission logic here
  };

  return (
    <div className="min-h-screen flex items-center justify-center">
      <form className="bg-white p-8 rounded shadow-md w-96" onSubmit={handleSubmit}>
        <div className="mb-4">
          <label htmlFor="name" className="block text-gray-700 font-bold mb-2">
            Name
          </label>
          <input
            type="text"
            id="name"
            name="name"
            className="w-full border rounded p-2"
            required
          />
        </div>
        {/* Add more form fields as needed */}
        <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded">
          Submit
        </button>
      </form>
    </div>
  );
};

export default App;

Step 5: Add Honeypot Field

Add a hidden honeypot field to the form. This field will be ignored by users but might be filled by spam bots:

// src/App.js
// ... (previous code)

const App = () => {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);

    // Check honeypot field for spam
    if (formData.get('honeypot') === '') {
      // Process the form submission
      console.log('Form submitted successfully!');
    } else {
      // Detected spam bot submission
      console.log('Spam bot detected!');
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center">
      <form className="bg-white p-8 rounded shadow-md w-96" onSubmit={handleSubmit}>
        {/* Honeypot field */}
        <div className="hidden">
          <label htmlFor="honeypot">Don't fill this out if you're human:</label>
          <input type="text" id="honeypot" name="honeypot" />
        </div>

        <div className="mb-4">
          <label htmlFor="name" className="block text-gray-700 font-bold mb-2">
            Name
          </label>
          <input
            type="text"
            id="name"
            name="name"
            className="w-full border rounded p-2"
            required
          />
        </div>
        {/* Add more form fields as needed */}
        <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded">
          Submit
        </button>
      </form>
    </div>
  );
};

// ... (export statement)

Step 6: Run the App

Start your React app and test the form:

npm start

Visit http://localhost:3000 in your browser and try submitting the form. The honeypot field should remain empty for legitimate users but may be filled by spam bots.

That's it! You've successfully added a honeypot to your React form for spam prevention. Feel free to customize the form and honeypot field as needed for your specific use case.

Facebook Login Page UI Clone in HTML and Tailwind CSS

Rohit Yadav — Tue, 05 Mar 2024 12:02:48 +0000

Introduction:

Certainly! Here's an updated description for your Facebook login page UI clone using HTML and Tailwind CSS:

In the realm of web development, honing your skills often involves crafting replicas of well-known websites. Among the internet giants, Facebook stands out for its ubiquity and user engagement. In this tutorial, we'll guide you through the steps of crafting a replica of the Facebook login page using HTML for the structure and Tailwind CSS for a sleek and responsive design. Uncover the intricacies of mimicking Facebook's user interface, and enhance your proficiency in web development through this hands-on project.

Prerequisites:

Before we start, make sure you have the following installed:

Code editor (e.g., Visual Studio Code, Sublime Text)
Browser (e.g., Chrome, Firefox)
Node.js and npm (for installing Tailwind CSS)

Let's get started:

Step 1: Install Nodejs

Before we proceed with the Facebook Clone project using HTML and Tailwind CSS, let's ensure that you have Node.js installed on your system. Node.js is required for installing and managing packages, including Tailwind CSS. Follow these steps to install Node.js:

i) Download Node.js:
Visit the official Node.js website: Node.js Downloads

ii) Choose the Appropriate Version:
Select the version that corresponds to your operating system. The website usually recommends the LTS (Long Term Support) version for most users.

iii) Install Node.js:
Follow the installation instructions provided on the website for your specific operating system. The process is typically straightforward, involving accepting the license agreement and choosing the installation directory.

iv) Verify Installation:
Open a terminal or command prompt and run the following commands to verify that Node.js and npm (Node Package Manager) are installed successfully:

node -v

npm -v

If installed correctly, these commands should display the installed Node.js and npm versions.

Now that you have Node.js installed, you can proceed with the Facebook Clone project using HTML and Tailwind CSS as outlined in the initial steps of the blog post. If you encounter any issues during installation, refer to the official Node.js documentation or seek help from the Node.js community.

Once Node.js is installed, continue with the remaining steps in the blog post to set up the project and create the Facebook Clone.

Step 2: Set Up Your Project

To ensure a smooth setup for your project, follow these steps carefully:

i) Create Project Structure:
Open your terminal and navigate to the desired location for your project. Create a new folder for your project and open it in your code editor. Inside this project folder, create another folder named src. This is where your source code will reside.

mkdir my-facebook-clone
cd my-facebook-clone
mkdir src

ii) Create Files:
Inside the src folder, create two files: index.html for HTML content and input.css for your Tailwind CSS input.

cd src
touch index.html input.css

iii) Initialize npm and Install Tailwind CSS:
Back in the root folder, initialize npm and install Tailwind CSS as development dependencies.

npm init -y
npm install -D tailwindcss
npx tailwindcss init

iv) Configure tailwind.config.js:
Open the tailwind.config.js file created in your project root and replace its content with the following:

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
 theme: {
    extend: {},
  },
  plugins: [],
}

v) Setup input.css in src folder:
Open the input.css file inside the src folder and paste the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

vi) Watch for Changes:
Run the following command in your terminal to watch for changes in your CSS file and automatically generate the output:

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

vii) Link CSS in index.html:
In your index.html file, link the generated output.css:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="src/output.css">
   <title>Facebook - log in or sign up</title>
</head>
<body>

   <!-- Your content goes here -->

</body>
</html>

With these steps completed, your project is set up and ready for building the Facebook Clone using HTML and Tailwind CSS.

Step 3: Add Favicon and Title

In this step, we will incorporate the favicon and title for our web page. Specifically, we will use the Facebook favicon and set the title as "Facebook – log in or sign up"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./output.css">
    <link rel="icon" type="image/icon" href="https://www.facebook.com/favicon.ico" />
    <title>Facebook - log in or sign up</title>
</head>
<body>

    <!-- Your content goes here -->

</body>
</html>

Step 4: Create the HTML Structure and Add Styling to the Container

In this step, we'll build the foundational HTML structure to provide a framework for our design. Once the structure is in place, we'll seamlessly integrate CSS to enhance the visual appeal and achieve our desired look for the container. Follow along as we lay the groundwork for a polished and visually appealing web page.

<div class="content">
    <div class="left">
        <img class="w-72" src="https://static.xx.fbcdn.net/rsrc.php/y1/r/4lCu2zih0ca.svg" alt="">
        <p class="desc">Facebook helps you connect and share with the people in
            your life.</p>
    </div>
    <div class="right">
        <input class="email" type="email" placeholder="Email address or phone number">
        <input class="password" type="password" placeholder="Password">
        <button class="btn-blue">Log
            In</button>
        <a href="#" class="forget">Forgotten password?</a>
        <hr>
        <button class="btn-green">Create
            New Account</button>
        <span class="desc"><span class="bold-desc">Create a Page</span> for a
            celebrity, brand or business.</span>
    </div>
</div>

Step 5: Add Styling to the left container

Let's refine the styling of the left container to ensure a polished and visually appealing design in your index.html file:

<div class="left -mt-28">
            <img class="w-72" src="https://static.xx.fbcdn.net/rsrc.php/y1/r/4lCu2zih0ca.svg" alt="">
            <p class="w-3/5 ml-6 -mt-2 font-normal text-3xl">Facebook helps you connect and share with the people in
                your life.</p>
</div>

Step 6: Add Styling to the right container

<div class="right flex-col my-32 max-w-[26rem] bg-white p-4 -ml-64 rounded-lg shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
            <input class="text-lg mb-3 p-4 w-96 h-12 outline-blue-400 border-2 border-gray-200 rounded-md" type="email"
                placeholder="Email address or phone number">
            <input class="text-lg mb-3 p-4 w-96 h-12 outline-blue-400 border-2 border-gray-200 rounded-md"
                type="password" placeholder="Password">
            <button class="mb-4 w-96 bg-blue-500 hover:bg-blue-700 text-white text-xl font-bold h-12 rounded-md">Log
                In</button>
            <a href="#" class="mx-32 mb-4 text-sm tracking-tight text-blue-600 font-medium">Forgotten password?</a>
            <hr class="my-4">
            <button
                class="mt-4 mx-16 w-64 tracking-tight bg-green-500 hover:bg-green-700 text-white text-xl font-bold h-12 rounded-md">Create
                New Account</button>
            <span class="absolute -mx-96 my-32"><span class="font-bold cursor-pointer">Create a Page</span> for a
                celebrity, brand or business.</span>
</div>

Step 7: Full HTML Code version

This includes the structure and styles for all the mentioned containers in your Facebook Clone project. Feel free to adjust or modify it based on your specific requirements.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="input.css">
    <link rel="icon" type="image/icon" href="https://www.facebook.com/favicon.ico" />
    <title>Facebook - log in or sign up</title>
</head>

<body class="bg-[#f0f2f5]">
    <div class=" content flex -ml-12 justify-center items-center relative">
        <div class="left -mt-28">
            <img class="w-72" src="https://static.xx.fbcdn.net/rsrc.php/y1/r/4lCu2zih0ca.svg" alt="">
            <p class="w-3/5 ml-6 -mt-2 font-normal text-3xl">Facebook helps you connect and share with the people in
                your life.</p>
        </div>
        <div class="right flex-col my-32 max-w-[26rem] bg-white p-4 -ml-64 rounded-lg shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
            <input class="text-lg mb-3 p-4 w-96 h-12 outline-blue-400 border-2 border-gray-200 rounded-md" type="email"
                placeholder="Email address or phone number">
            <input class="text-lg mb-3 p-4 w-96 h-12 outline-blue-400 border-2 border-gray-200 rounded-md"
                type="password" placeholder="Password">
            <button class="mb-4 w-96 bg-blue-500 hover:bg-blue-700 text-white text-xl font-bold h-12 rounded-md">Log
                In</button>
            <a href="#" class="mx-32 mb-4 text-sm tracking-tight text-blue-600 font-medium">Forgotten password?</a>
            <hr class="my-4">
            <button
                class="mt-4 mx-16 w-64 tracking-tight bg-green-500 hover:bg-green-700 text-white text-xl font-bold h-12 rounded-md">Create
                New Account</button>
            <span class="absolute -mx-96 my-32"><span class="font-bold cursor-pointer">Create a Page</span> for a
                celebrity, brand or business.</span>
        </div>
    </div>
</body>

</html>

Step 8: Enhance SEO with Semantic Tags (Optional)

In this step, consider boosting your website's search engine optimization by incorporating semantic tags. While optional, these tags can improve the overall visibility and accessibility of your content on search engines.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="input.css">
    <link rel="icon" type="image/icon" href="https://www.facebook.com/favicon.ico" />
    <title>Facebook - log in or sign up</title>
</head>

<body class="bg-[#f0f2f5]">

    <main>
        <section class="content flex -ml-12 justify-center items-center relative">
            <article class="left -mt-28">
                <img class="w-72" src="https://static.xx.fbcdn.net/rsrc.php/y1/r/4lCu2zih0ca.svg" alt="Facebook Logo">
                <p class="w-3/5 ml-6 -mt-2 font-normal text-3xl">Facebook helps you connect and share with the people in
                    your life.</p>
            </article>

            <aside
                class="right flex-col my-32 max-w-[26rem] bg-white p-4 -ml-64 rounded-lg shadow-[0_3px_10px_rgb(0,0,0,0.2)]">
                <form>
                    <label for="email" class="hidden">Email address or phone number</label>
                    <input id="email"
                        class="text-lg mb-3 p-4 w-96 h-12 outline-blue-400 border-2 border-gray-200 rounded-md"
                        type="email" placeholder="Email address or phone number">

                    <label for="password" class="hidden">Password</label>
                    <input id="password"
                        class="text-lg mb-3 p-4 w-96 h-12 outline-blue-400 border-2 border-gray-200 rounded-md"
                        type="password" placeholder="Password">

                    <button type="submit"
                        class="mb-4 w-96 bg-blue-500 hover:bg-blue-700 text-white text-xl font-bold h-12 rounded-md">Log
                        In</button>
                </form>

                <a href="#" class="mx-32 mb-4 text-sm tracking-tight text-blue-600 font-medium">Forgotten password?</a>
                <hr class="my-4">

                <button type="button"
                    class="mt-4 mx-16 w-64 tracking-tight bg-green-500 hover:bg-green-700 text-white text-xl font-bold h-12 rounded-md">Create
                    New Account</button>

                <span class="absolute -mx-96 my-32"><span class="font-bold cursor-pointer">Create a Page</span> for a
                    celebrity, brand or business.</span>
            </aside>
        </section>
    </main>

</body>

</html>

Preview:

This image shows the final product we made in this blog

Conclusion:

Building a Facebook UI clone using HTML and Tailwind CSS is a great way to practice front-end development skills. This tutorial provides a basic structure, but you can expand and enhance it to make your clone more realistic. Keep experimenting, and happy coding!