client-side tarafında oluşturamazsın, nodejs yazarsan oluşturabilirsin sadece javascript ile.

şöyle bir şey yapabilirsin.

ilk olarak src/ klasörünün içinde mainContext.js adıyla dosya oluşturup içine şunu yaz

import React, {useState, createContext, useContext} from 'react'

const MainContext = createContext()

const MainContextProvider = ({ children }) => {

	const [methods, setMethods] = useState({})

	const data = {
		methods,
		...methods,
		setMethods
	}

	return (
		<MainContext.Provider value={data}>
			{children}
		</MainContext.Provider>
	)
}

export {
	MainContextProvider,
	MainContext,
	useContext
}

Daha sonra App.js de şu şekilde kullan

// src/App.js
import {MainContextProvider} from 'mainContext'

import Header from 'components/Header'
import Footer from 'components/Footer'

function App() {

	return (
        <MainContextProvider>
            <Header />
            <Footer />
        </MainContextProvider>
    )
    
}

export default App

Şimdi diyelim ki Header componentinde bir state oluşturacaksın ve footer'da bunu update etmek istiyorsun.

O zaman Header componentin şöyle olmalı

// components/Header.js

import {useEffect, useState} from 'react'
import {MainContext, useContext} from '../mainContext'

function Header() {
	const [logo, setLogo] = useState('erbilen.net')
	
	// header componentinden contexte değer ekle
	const {methods, setMethods} = useContext(MainContext)
	useEffect(() => {
		setMethods({
			...methods,
			logo,
			setLogo
		})
	}, [])
	
	return (
		<div>
			<h1>{logo}</h1>
		</div>
	)
}

export default Header

Footer componentinde şöyle olacak

// components/Footer.js

import {MainContext, useContext} from '../mainContext'

function Footer() {
	
	// footer componentinden headerda oluşturduğumuz `logo` stateini güncelliyoruz
	const {setLogo} = useContext(MainContext)
	const changeLogo = () => {
		setLogo('prototurk.com')
	}

	return (
		<div>
			<button onClick={changeLogo}>Logoyu değiştir</button>
		</div>
	)
}

export default Footer

en basit haliyle böyle componentlere prop geçmeden native context yapısını kullanabilirsin react'in.

kodlar: https://stackblitz.com/edit/react-scu6sr
demo: https://react-scu6sr.stackblitz.io

kesinlikle tailwindi tercih ederim :) customize edip istediğin her projeye uyarlayabiliyorsun.
ek olarak class isimleri uzunsa zaten biliyorsun @apply direktifi ile kısaltıp kullanabilirsin, javascript projesinde ise kısatlamdan component base kullanabilirsin çok daha rahat ve hızlı iş çıkıyor.

layout kurmak için her zaman flex ya da grid kullanmalısın, absolute sadece modal, popup gibi alanlar için onun dışında ihtiyacın yok, inline-block ise neredeyse hiçbir zaman ihtiyacın olmayacak

tam olarak olayın ne olduğunu anlayamamışsın muhtemelen, açıklayalım;

node.js bir back-end dili (php gibi, javascript yazıyorsun), jquery ise bir javascript kütüphanesi.
gerçek zamanlı işlemler istiyorsan socket.io'ya bakabilirsin php ile kullanımları var, sayfa yenilemeden işlem yapmak istiyorsan jquery'deki ajax metodları işini fazlasıyla çözer, php ve nodejs'i bir arada kullanmak içinse bir sebebin yok

bunu elle yapmıyorlar, webpack gibi araçlarla build aldıklarında otomatik sıkıştırıyor daha performanslı olsun diye, geliştirme ortamındaki css dosyaları çok daha düzenli olur, production seviyesine geldiğinde bu şekilde görünürler.

hangisi daha avantajlı derken karşılaştırma yapabileceğin 2 farklı şey yok ortada, bootstrap grid yapısı için flex modülünü kullanıyor cssteki.

oysa senin cssde kullanabileceğin hem flex hem de grid modülü var ayrı ayrı. ve grid modülü inanılmaz esnek, kendine uygun bir yapıyı css grid ile oluşturmak elbette daha mantıklı.

ama benim tavsiyem bir de tailwind'e bak grid yapısı için, sevebilirsin :)