import { Inter } from "#next/font/google";
const inter = Inter({ subsets: ["latin"] });
export default function Nav() {
return (
<nav className="bg-gray-800, bg-slate-900">
<div className="container mx-auto px-6 py-4 flex flex-wrap">
<div className="px-4 py-2 rounded-lg text-white hover:bg-gray-700">
{" "}
Home
</div>
<div className="px-4 py-2 rounded-lg text-white hover:bg-gray-700">
Jobs
</div>
</div>
</nav>
);
}
I have this and it is not showing as horizontally but vertically. How can I change this to horizontal?
Something like that could be done using flexbox, or grid; both of which are built into TailwindCSS. In your case it would look something like this:
<nav className=" flex flex-row ...">
<!-- your nav content -->
</nav>
You can read more on flexbox and how to use Tailwind CSS for your layouts here.
Related
When I open my nav bar(for mobile version) on my first page it works fine and overlaps the contents (picture): https://cdn.discordapp.com/attachments/916242216211595264/1001057465795874906/unknown.png
And when I open my navbar on the second page(forms page) the forms overlap the navbar.(picture): https://cdn.discordapp.com/attachments/916242216211595264/1001057531591929876/unknown.png
How could I fix that?
My code for my navbar is:
import React, {useState} from 'react';
import {GiHamburgerMenu} from 'react-icons/gi';
import {AiOutlineClose} from 'react-icons/ai';
import {NavLink} from 'react-router-dom';
const NavBar = () => {
const [isOpen, setIsOpen] = useState(true);
const toggle = () => {
setIsOpen(!isOpen);
}
return (
<div className='flex sticky justify-between items-center h-20 max-w-full mx-auto px-4 text-white top-0'>
<img src={process.env.PUBLIC_URL+"/logo192.png"} alt="none" className='w-9'/>
<ul className='hidden md:flex'>
<NavLink to="/" activeClassName="active" ><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[45px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600 '>Home</li></NavLink>
<NavLink to="/details" activeClassName="active" ><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[45px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600 '>About</li></NavLink>
<NavLink to="https://www.google.com" activeClassName="active" ><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[35px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600 '>Host</li></NavLink>
<NavLink to="/info" activeClassName="active"><li className='p-4 mx-5 cursor-pointer after:content-[" "] after:absolute after:w-[55px] after:scale-x-0 after:h-[2px] after:flex after:bg-indigo-600 after:origin-bottom-left after:transition-[0.5s] after:ease-out hover:after:scale-x-100 hover:scale-110 hover:after:origin-bottom-right hover:text-indigo-600'>Tutorial</li></NavLink>
</ul>
<div onClick={toggle} className='block md:hidden'>
{!isOpen ? <AiOutlineClose size={20}/> : <GiHamburgerMenu size={20}/>}
</div>
<div className={!isOpen ? 'fixed left-0 top-1 w-[60%] h-full border-r border-r-gray-800 bg-gray-900 ease-in-out duration-500' : 'fixed left-[-100%] ease-in-out duration-500'}>
<img src={process.env.PUBLIC_URL+"/logo192.png"} alt="none" className='w-9 left-0'/>
<ul className='uppercase p-4'>
<li className='p-4 border-b border-gray-700 hover:border-white hover:transition-[0.5s] hover:ease-in-out'>Home</li>
<li className='p-4 border-b border-gray-700 hover:border-white hover:transition-[0.5s] hover:ease-in-out'>About</li>
<li className='p-4 border-b border-gray-700 hover:border-white hover:transition-[0.5s] hover:ease-in-out'>Host</li>
<li className='p-4 hover:border-b hover:border-white hover:transition-[0.5s] hover:ease-in-out'>Tutorial</li>
</ul>
</div>
</div>
)
}
export default NavBar;
First page:
import React from 'react'
import Typed from 'react-typed';
import { Link } from 'react-router-dom';
export const Welcome = () => {
return (
<div className="text-white">
<div
id="index"
className="index max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center"
>
<div className="flex justify-center items-center">
<h1 className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6">
Web
</h1>
<Typed
className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6 text-indigo-600"
strings={["site", "Adam"]}
typeSpeed={70}
backSpeed={100}
loop
/>
</div>
<p className="md:text-3xl sm:text-2xl text-xl font-bold py-4 ">
A website that is focused on <a className="underline text-indigo-600">design</a> and
<a className="underline text-indigo-600"> simplicity</a>
</p>
<Link to="/details"><button className="bg-white text-black w-[200px] transition-[0.5s] rounded-lg font-bold my-6 mx-auto py-3 ring-2 ring-white hover:ring-indigo-600 hover:bg-indigo-600 hover:shadow-xl hover:shadow-indigo-700 hover:text-white hover:scale-110">
Create
</button></Link>
</div>
</div>
)
}
Forms Page:
Code from: https://tailwindui.com/components/application-ui/forms/sign-in-forms (First Form). So how could i make my navbar overlap my forms page?
Increase the z-index of the nav bar so that it is higher than that of the form.
You'll have to work with relative absolute and z-index tailwind classes to overlap the navbar on the contents of the page.
Logic:
Have parent relative having z-index value less than the child absolute div which will be used for navbar.
Output in large device:
Output in smaller device:
Code:
<div class="md:bg-yellow-400 h-screen relative z-0 flex bg-gray-500">
<div class="invisible md:visible bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 md:invisible"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
</div>
Further more you can use this tailwind play link
Extra. Toggle mobile navbar using hamburger menu
Output on large devices
Output in small device with hamburger menu
When clicked on hamburger menu
Code:
<body>
<div class="bg-yellow-400 h-screen relative z-0 flex">
<div class="hidden md:block bg-blue-400 w-1/3">
<div class="flex h-full items-center justify-center text-4xl">
Desktop Navbar
</div>
</div>
<div class="text-4xl pl-24 md:p-0 main_content">
The main content of the file and it has it's content all over the page
and i want to build a navbar on top of this
</div>
<div
class="mobile_navbar absolute inset-y-0 left-0 z-10 bg-green-400 w-1/3 hidden md:hidden"
>
<div class="flex h-full items-center justify-center text-4xl">
Mobile Navbar
</div>
</div>
<div
class="md:hidden space-y-2 absolute hamburger_menu inset-y-0 left-0 p-4"
>
<span class="block w-8 h-1 bg-white"></span>
<span class="block w-8 h-1 bg-white"></span>
<span class="block w-8 h-1 bg-white"></span>
</div>
</div>
<script type="text/javascript">
document
.querySelector(".hamburger_menu")
.addEventListener("click", () => {
console.log("Hello");
document.querySelector(".mobile_navbar").classList.toggle("hidden");
});
document.querySelector(".main_content").addEventListener("click", () => {
console.log("Touch me");
console.log(
document
.querySelector(".mobile_navbar")
.classList.contains("hidden") == false &&
document.querySelector(".mobile_navbar").classList.toggle("hidden")
);
});
</script>
</body>
So I have created a website(deployed on Vercel) for practice and built it responsive by having breakpoints for different screen sizes. But now, when I see the same website's dashboard page on my mobile, I see some extra unwanted space in its right-top corner and in its index page's desktop view; the footer is, for some reason floating above the bottom of the screen. I have pictures below of desktop view of the footer and dashboard page as shown in Edge and as shown in Chrome Android.
I have built it using React and Tailwind CSS. My website's link is
Dashboard link - https://build2-eight.vercel.app/dashboard
Index Page - https://build2-eight.vercel.app/
And in my development server, neither of the issues were encountered.
The code is:-
/* Index.css custom tailwind classes */
#layer components{
.cardMainPage{
box-shadow:0px 0px 15px rgb(0,0,0,0.32);
#apply flex flex-col items-center justify-start text-2xl gap-5 p-2 py-3 rounded-md bg-white;
}
.Icons{
#apply bg-[#aff0cc] rounded-full h-16 md:h-8 w-16 md:w-8 flex flex-row justify-center items-center cursor-pointer hover:bg-white;
}
.HeaderIcons{
#apply bg-[#aff0cc] p-2 h-8 w-8 rounded-sm hover:bg-white cursor-pointer;
}
}
React Code : -
/* Footer React code */
import React from 'react';
export default function Footer() {
return (
<div className='bg-[#5cdb95] text-[#05386b] w-full text-md flex items-center justify-center'>
<div className='text-center'>
Made with <b className='text-red-600 text-lg'>♥</b> by <a href="/" className=' underline hover:no-underline'>Soumya Deep Sarkar</a>
</div>
</div>
)
}
Dashboard code->
/* Dashboard page code */
import React from "react";
import Header from "../header/index";
import Footer from "../footer/index";
import { GrBitcoin, GrGamepad } from "react-icons/gr";
import { SiCodingninjas } from "react-icons/si";
import { FiSearch } from "react-icons/fi";
import { FcSettings, FcBusinessman } from "react-icons/fc";
import { IoMdNotifications } from "react-icons/io";
import {GrChat} from "react-icons/gr"
export default function Dashboard() {
return (
<div className="flex flex-col h-screen">
<Header />
<div className="flex flex-row h-full">
<div
id="left-side-menu"
className="p-2 px-1 bg-back py-4 flex justify-between h-full flex-col"
>
<div className=" flex flex-col gap-3">
<span className="Icons">
<GrBitcoin />
</span>
<span className="Icons">
<GrGamepad />
</span>
<span className="Icons">
<SiCodingninjas />
</span>
</div>
<div className="flex flex-col gap-3">
<span className="Icons">
<FcSettings />
</span>
<span className="Icons">
<FcBusinessman/>
</span>
</div>
</div>
<div id="center-menu" className="flex flex-col w-full">
<div className="bg-[#20d876] w-full flex flex-row justify-between items-center px-4">
<span className="HeaderIcons my-1"><IoMdNotifications className="text-yellow-500"/></span>
<form className="w-full flex flex-row items-center justify-center p-1">
<span className="relative flex items-center">
<input type="text" className="border-2 px-2 rounded-md border-text "/>
<span className="absolute right-1 cursor-text"><FiSearch/></span>
</span>
</form>
<span className="HeaderIcons"><GrChat className="text-yellow-500"/></span>
<div>
</div>
</div>
</div>
<div id="right-side-menu"></div>
</div>
<Footer />
</div>
);
}
I have figured it out. The textbox(search one) is causing the issue in case of the dashboard header. To fix it I just have to define its width to 100% and it worked out.
Regarding the footer issue. I had to define the minimum height of the window. So I set min height to 100vh.
In tailwind css, for the dashboard header I just put w-full in the className attribute and for the footer I put min-h-screen in the parent div.
I'm trying to create a sticky header with TailwindCSS but can't seem to make it work.
I've read the docs and seems that i only need to add sticky top-0 to my div to make it sticky, but it doesn't work.
I've tried to clean up my code as best as I could for the sake of readability, but if you are intrested in the entire code you can find it here.
import { Logo, ToolbarButton, IconLink, Countdown } from "#lib/atoms";
import { faWhatsapp, faFacebook } from "#fortawesome/free-brands-svg-icons";
import {
faHandHoldingHeart,
faHeadphonesAlt,
} from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
export const Toolbar = () => {
return (
<div className="flex flex-col drop-shadow-2xl">
<div className="h-16 flex items-center justify-center bg-rs-secondary">
<div className="container flex justify-between">
<div className="flex gap-4 items-center">
<IconLink
icon={faFacebook}
href="https://www.facebook.com/estereo.sulamita"
/>
<IconLink icon={faWhatsapp} href="https://wa.link/logvtp" />
</div>
<Countdown />
</div>
</div>
{/* I want this div to be sticky */}
<div className="sticky top-0 h-20 flex justify-center bg-white">
<div className="container flex items-center h-full justify-between">
<Logo />
<div className="flex">
<ToolbarButton>Inicio</ToolbarButton>
<ToolbarButton>Videos</ToolbarButton>
<ToolbarButton>Colaboradores</ToolbarButton>
<ToolbarButton
className="group"
hoverBackgroundColor="hover:bg-black"
primary={true}
>
<FontAwesomeIcon
icon={faHandHoldingHeart}
className="group-hover:text-white w-4"
/>
</ToolbarButton>
<ToolbarButton
backgroundColor="bg-rs-primary"
hoverBackgroundColor="hover:bg-black"
textColor="text-white"
primary={true}
>
Reproducir
<FontAwesomeIcon icon={faHeadphonesAlt} className="w-4 ml-3" />
</ToolbarButton>
</div>
</div>
</div>
</div>
);
};
The above code renders the following component:
Also, you can find a deployed version of my app here.
I'd like to achieve something like this with my header component.
Any help is much appreciated.
sticky element should be direct child of the scrollable element.
In your case scrollable element is the root __next container. Basically it means that you need to remove this div <div className="flex flex-col drop-shadow-2xl"> and replace it with React.Fragment so both of your headers, Countdown and second Header, would be direct children of this scrollable div.
I am trying to make a website using NextJS and tailwindcss. But the div keeps shifting towards the left whenever the browser window is been resized.
Here is how it looks on resize but the text should be centered
Here is how it looks on desktop
import { IoIosArrowForward } from "react-icons/io";
import Link from "next/link";
const About = () => {
return (
<div className="font-inter py-4 my-16 flex justify-center items-center flex-col"
id="about">
<p className="text-6xl font-bold text-gray-700 text-center">
Hey, I'm Anurag
</p>
<p className="text-2xl text-gray-600 text-center my-8">
Hey there, I'm a Frontend Developer based in India. <br />
I'm mainly focused on Frontend Development, and I also write blogs
and design sometimes. <br />
Apart from coding, I love listening to music!
</p>
<p className="flex justify-center">
<Link href="https://github.com/kr-anurag" passHref>
<a className="text-xl w-72 text-white font-medium px-4 py-3 rounded-full flex items-center justify-center bg-gradient-to-r from-[#12c2e9] via-[#c471ed] to-[#f64f59] shadow-xl hover:bg-gradient-to-l duration-100"
aria-label="github-account"
target="blank">
Checkout my Github
<IoIosArrowForward />
</a>
</Link>
</p>
</div>
);
};
export default About;
By adding one tailwind class would solve the issue.
Add w-full to #about div. Here, is the sample of your code. Please check it out.
It works!
I have a card component that renders like the first image below on screen sizes above small, mobile devices I have the component set to flex-wrap. When flex-wrap is active then my image is pushed to the left of the card even though it's container is set to w-full and I have tried to center with justify-center. I am trying to centre the image only when devices are small and under. I have tried setting sm: justify-center which doesn't work. Anyone got ideas on how I can refactor to get this functionality to work? Thanks
import React from "react"
export default function FeatureCard(props) {
return (
<div className="flex flex-row flex-wrap w-2/3 h-auto bg-gray-200 p-2 rounded-lg">
<div className="flex xl:w-1/3 lg:w-1/3 md:w-1/3 sm:w-full xs:w-full">
<img src={props.image} />
</div>
<div className="flex xl:w-2/3 lg:w-2/3 md:w-2/3 sm:w-full xs:w-full text-center self-center justify-center font-bold">
<ul>
{props.features.map(feature => (
<li>{feature}</li>
))}
</ul>
</div>
</div>
)
}
<div className="flex flex-row flex-wrap w-full h-auto justify-center -py-2">
<div className="flex xl:w-1/2 lg:w-1/2 md:w-full sm:w-full xs:w-full h-auto justify-center py-2">
<FeatureCard
features={[
"Modern Website Design",
"Progressive Web Applications",
"Content Management Systems",
"JAMstack",
]}
image={"https://img.icons8.com/color/96/000000/monitor.png"}
/>
</div>
</div>
So if I understand correctly, you want the props.image centered on small screens?
What if you added something like this to the <div className="flex flex-row flex-wrap w-full h-auto justify-center -py-2"> div:
#media (max-width: 600px) {
flex-direction: column;
justify-content: center;
align-items: center;
}
What it basically does, is changing the flex direction to column instead of row when the screen is smaller than 600px, which in tailwind-css probably translates to:
sm:flex-col sm:justify-center sm:items-center