How to create the dot background

Creating a trending and responsive background for modern websites in React/Next.js 13. Here's a step-by-step guide on how to create it:

Note: Technologies used

Next.js
TailwindCSS

Step 1: Create a Next.js application

npx create-next-app@latest

Step 2: Clear the globals.css file

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* clear all the lines except these three */

Step 3: Code on your root layout.tsx file

// app/layout.tsx
import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} bg-gray-50 relative`}>
        <div className="bg-[#fbe2e3] absolute top-[-6rem] -z-10 right-[11rem] h-[31.25rem] w-[31.25rem] rounded-full blur-[10rem] sm:w-[68.75rem]"></div>
        <div className="bg-[#dbd7fb] absolute top-[-1rem] -z-10 left-[-35rem] h-[31.25rem] w-[50rem] rounded-full blur-[10rem] sm:w-[68.75rem] md:left-[-33rem] lg:left-[-28rem] xl:left-[-15rem] 2xl:left-[-5rem]"></div>
        {children}
      </body>
    </html>
  );
}

How to create a modern website background?

https://youtu.be/f8BD5gO1Kvc

How to Create the New Trending Background for Modern Websites