I am starting out using Tailwind with React and I am stuck on this. I tried various methods but still I am stuck. Here is the code and view snippet.
import { Navbar, Welcome, Footer, Services, Transactions } from "./components";
const App = () => {
return (
<div className="min-h-screen">
<div className="h-14 bg-gradient-to-r from-purple-500 to-red-500 border-double rounded-b-3xl border-b-8 w-5/6">
<Welcome />
</div>
<div className="h-14 bg-gradient-to-b from-blue-500 to-green-500 rounded-lg w-1/2 flex justify-center ">
<Services />
</div>
<Transactions />
<Footer />
</div>
);
}
export default App;
Have you try adding mx-auto class to your gradient divs? If that doesn't work you could also try text-center in your main div.
Related
I'm trying to import a video to my JSX but the video doesn't seem to play, it acts like an image.
Here's what I've tried:
import React from "react";
import MyVideoComponent from "./MyVideoComponent";
const Video = () => {
return (
<div className="w-full max-w-[800px] sm:h-[704px] h-[680px] bg-white flex flex-col sm:justify-between justify-center items-center mx-auto p-4">
<div>
<div className="h-[10%] flex items-center relative">
<div className="h-[100%] w-[8%] bg-gray-200"></div>
<div className="flex items-center">
<h5 className="text-sm py-2 text-[#575e72] font-mono left-9 absolute">
VIDEO TITLE
</h5>
</div>
</div>
<div className="my-5 py-4 px-1 w-[80%]">
<h1 className="text-4xl font-bold text-[#061237]">
Inform users with video sections
</h1>
</div>
<div>
<MyVideoComponent />
</div>
</div>
</div>
);
};
export default Video;
MyVideoComponent:
import React from "react";
import MyVideo from "../assets/video.mp4";
class MyVideoComponent extends React.Component {
render() {
return (
<video width="100%" height="100%" preload="auto">
<source src={MyVideo} type="video/mp4" />
Your browser does not support HTML5 video.
</video>
);
}
}
export default MyVideoComponent;
I've also tried using the code below instead of importing MyVideoComponent component
<video width="auto" height="auto" autoplay>
<source src={require('../assets/video.mp4')} />
</video>
This is common problem when you deal with html5 tag in react. You need toJust set a name for the autoplay attribute or use autoPlay. In addition, set the muted tag for the video. Chrome for instance block autoplay videos that have sound.
The code structure should look like this
I am trying to get my logos to look even distance from each other but cannot figure out why it won't work. I've tried a few things but there is still something off about it. Can't tell if I need to change individual logo measurements or I can change something here. (I didn't write original code which is why I am having trouble.)
Here is a picture of what I am talking about
import Marquee from 'react-fast-marquee'
import Icon from './icons'
const PartnerRunningLine = () => (
<div className="absolute bottom-0 left-[-2px] right-[-2px] transform translate-y-[48px] overflow-x-clip overflow-y-visible">
<div className="text-white bg-background-partners transform rotate-[-2deg] scale-[1.001]">
<Marquee pauseOnHover gradient={false} speed={40}>
<div className="grid grid-cols-5 gap-20 pr-16 py-[25px]">
<Icon iconName="oasisSB" />
<Icon iconName="coinsquare" />
<Icon iconName="tetra" />
<Icon iconName="researchCapital" />
<Icon iconName="pfaff" />
</div>
</Marquee>
</div>
</div>
)
export default PartnerRunningLine
Try to use flex instead of grid
flex flex-row justify-between
Icons will stay in one line and have a same space between
I am experiencing some issues with next/link when I use it in my app.
I have a reusable component that renders a button. This component is used twice on the page with different urls each time.
When the page is in desktop view, the button works perfectly. I can navigate from one page to another. When I reduce the size of the screen to either tablet or mobile one redirects correctly and the other one does not respond as expected.
To work around the issue I have enclosed the area inside a link so the user can click outside the button area and still be directed to the page but it is not really the experience I want to offer to the user.
I never had this before. Can someone tell me how to fix this or why is it behaving this way, please? thanks.
const Banner = ({
purpose,
imageUrl,
title1,
title2,
desc1,
linkName,
buttonText,
}) => {
return (
<div className="row flex-lg-row-reverse align-items-center g-5 justify-content-center">
<div className=" col-10 col-sm-8 col-lg-6">
<Image
className="d-block img-fluid mx-lg-auto"
src={imageUrl}
width={700}
height={500}
alt="banner"
loader={myLoader}
/>
</div>
<Link href={linkName} passHref>
<div className="col-lg-4 p-3 text-center text-lg-start border-0">
<h1 className="display-6 fw-bold lh-1 mb-3">{purpose}</h1>
<p className="lead">
{title1}
<br /> {title2}
</p>
<p className="lead">{desc1}</p>
<button className="btn link btn-primary btn-xl w-100">
<Link href={linkName} passHref>
<a> {buttonText}</a>
</Link>
</button>
</div>
</Link>
</div>
);
};
export default function Home({ data }) {
const {
results: {
client: { secondhandListing },
},
} = data;
//console.log('index page results',secondhandListing);
return (
<>
<div
data-spy="scroll"
data-bs-target="main-nav"
data-offset="0"
className="scrollspy-example"
tabIndex="0"
>
<Services />
<div className="section d-flex justify-content-center my-5">
<h1 className="my-5" id="#scrollspyHeading2">
Properties
</h1>
</div>
<div className="container-fluid d-flex justify-content-xxl-between align-items-center flex-wrap flex-lg-nowrap">
<div className="section d-flex">
<Banner
purpose="Rent a Home"
title1="Rental Homes for"
title2="Everyone"
desc1="Explore Apartments, Villas, Homes"
desc2="and more"
buttonText="Explore Renting"
linkName="/search?operationType=rent"
imageUrl="https://bayut-production.s3.eu-central-1.amazonaws.com/image/145426814/33973352624c48628e41f2ec460faba4"
/>
</div>
<div className="section d-flex">
<Banner
purpose="Buy a Home"
title1="Find, Buy & Own"
title2="Your Dream Home"
desc1="Explore Apartments, Villas, Homes"
desc2="and more"
buttonText="Explore Buying"
linkName="/search?operationType=sale"
imageUrl="https://bayut-production.s3.eu-central-1.amazonaws.com/image/145426814/33973352624c48628e41f2ec460faba4"
/>
</div>
</div>
<Team />
<Contact />
</div>
</>
);
}
Run the new-link codemod to automatically upgrade previous versions of Next.js to the new <Link> usage:
npx #next/codemod new-link .
This will change <Link><a id="link">Home<a></Link> to <Link id="link">Home</Link>.
Alternatively, you can add the legacyBehavior prop <Link legacyBehavior><a id="link">Home<a></Link>.
<button> and <a> do not allow interactive content to be their content.
That said, you're passing invalid children to your <Link> component and to the <button> element:
<Link href={linkName} passHref>
<div className="col-lg-4 p-3 text-center text-lg-start border-0">
<h1 className="display-6 fw-bold lh-1 mb-3">{purpose}</h1>
<p className="lead">{title1}<br /> {title2}</p>
<p className="lead">{desc1}</p>
{/* Invalid child */}
<button className="btn link btn-primary btn-xl w-100">
{/* Invalid child */}
<Link href={linkName} passHref>
<a> {buttonText}</a>
</Link>
</button>
</div>
</Link>
That may be the reason of why your component is behaving oddly.
PS. Formatting your code helps by making it more readable. :). You can do that by setting ESLint and Prettier up.
You maybe need to add the legacyBehavior as props in the next/link component.
import Link from 'next/link'
function Legacy() {
return (
<Link href="/about" legacyBehavior>
<a>About Us</a>
</Link>
)
}
export default Legacy
docs: https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-tag
I'm new to Next.js. I have the HomePage within the pages folder, and I'm trying to center the <h1></h1> in the middle of the picture but instead, it pushes it down. Here is my code...
import image from '../public/images/background.jpg'
import Image from "next/image";
import Layout from "../components/Layout";
export default function HomePage() {
return (
<Layout>
<main>
<Image
src={image}
alt="Programming"
className="absolute object-cover w-full h-full"
/>
<section className="relative flex justify-center min-h-screen pt-12 lg:pt-64 px-8">
<h1 className="text-6xl text-green-100 font-bold cursive leading-none lg:leading-snug home-name">Hi. I'm
Shloimi</h1>
</section>
</main>
</Layout>
)
}
Can someone help me, please. And I'm using Tailwind.css
Try this,
<main className="relative">
<Image
src={image}
alt="Programming"
className="w-full h-full bg-cover"
/>
<h1 className="absolute w-full text-6xl font-bold leading-none text-center text-green-100 top-1/2 transform translate-y-1/2 cursive lg:leading-snug home-name ">
asdf
</h1>
</main>
I deleted pt-12 lg:pt-64 to make your goal and inserted items-center, but if you want to use pt, then you can customise with that values.
Happy coding :)
I'm trying to have a full page video background in the homepage of my Nextjs application but am just getting blank white space where the content should be.
I'm fairly new to Nextjs and am probably making a silly mistake here, if anyone could point this out I'd really appreciate the help.
My mp4 video is stored within public/assets as so here:
This is my index.js file:
import Head from 'next/head';
import Image from 'next/image';
import React, { useRef, useEffect, useState } from 'react';
import ScrollAnimation from '../components/ScrollAnimation';
import Footer from '../components/Footer';
import Header from '../components/Header';
export default function Home() {
return (
<div>
<Head>
<title>Greystone</title>
<link rel='icon' href='/favicon.ico' />
<link
rel='preload'
href='/fonts/FairplayDisplay/FairplayDisplay-Bold.ttf'
as='font'
crossOrigin=''
/>
<link
rel='preload'
href='/fonts/FairplayDisplay/FairplayDisplay-Regular.ttf'
as='font'
crossOrigin=''
/>
</Head>
<main className='overflow-y-hidden h-screen'>
<Header />
<div
id='main'
className='transition duration-1000 relative ease-in-out'
onWheel={scrollTo}>
{/* Page 1 */}
<div className='h-screen w-full flex items-center'>
<video autoplay loop muted className='w-full h-screen z-10'>
<source
src='../public/assets/bubble-video.mp4'
type='video/mp4'
/>
</video>
<div className='flex flex-col absolute right-20'>
<ScrollAnimation />
</div>
<div className='w-2/5 text-left flex flex-col text-white left-20 absolute'>
<h2 className='text-5xl'>We’re Greystone.</h2>
<h2 className='text-5xl'>
We think recruitment is broken. Be part of something better.
</h2>
<p className='text-left mt-5 text-lg'>
Greystone brings the top 10% of talent together in an exclusive
club, then pairs those dream hires with the right clients. It’s
role-finding, reimagined.
</p>
<div className='mt-5 border-b-2 border-white w-36'>
<h3 className='text-left text-lg'>FIND OUT MORE</h3>
</div>
</div>
</div>
</div>
<Footer />
</main>
</div>
);
}
Many thanks in advance if anyone can help!
It seems I didn't need to have 'public' in the src url call for anyone who may experience a similar issue in future. The video tag now looks like so:
<video autoPlay loop muted className='w-full h-screen z-10'>
<source src='/assets/bubble-video.mp4' type='video/mp4' />
</video>
adding mute attribute to the video tag solved a similar issue for me
<video
preload="auto"
playsInline
autoPlay
muted
loop
>
<source src="/video.mp4" type="video/mp4" />
</video>