Can someone advise or provide an example on how to implement a background image slider with tailwind css?
To set a single image i have to do as follow:
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
backgroundImage: {
'my_bg_image' : "url('../public/bg.png')",
}
},
},
plugins: [],
}
then return a div as follow:
return (
<div
className="bg-scroll bg-[url('/bg.png')] h-[972px]"
>
</div>
)
What if i want this image change, is it possible?
Mainly you will need Carousel wrapper, Slider indicators , Slider controls.
Refer to this :
https://tailwind-elements.com/docs/standard/components/carousel/
OR you can use this:
html file:
<body>
<section>
<div class="relative">
<ul id="slider">
<li class="h-[50vh] relative">
<img class="h-full w-full object-cover" src="./img1.jpg" alt="">
</li>
<li class="h-[50vh] relative hidden">
<img class="h-full w-full object-cover" src="./img2.jpg" alt="">
</li>
<li class="h-[50vh] relative hidden">
<img class="h-full w-full object-cover" src="./img3.jpg" alt="">
</li>
</ul>
<div class="absolute px-5 flex h-full w-full top-0 left-0">
<div class="my-auto w-full flex justify-between">
<button onclick="prev()" class="bg-white p-3 bg-opacity-70 shadow-lg rounded-full">Button 1</button>
<button onclick="next()" class="bg-white p-3 bg-opacity-70 shadow-lg rounded-full">Button 2</button>
</div>
</div>
</div>
</section>
<script src="./main.js"></script>
</body>
js file:
curr_slide = 1;
sliderElemnt = document.getElementById('slider');
total_slides = sliderElemnt.childElementCount;
// console.log(total_slides);
function next() {
if (curr_slide < total_slides) {
curr_slide++;
slide_show();
}
}
function prev() {
if (curr_slide > 1) {
curr_slide--;
slide_show();
}
}
function slide_show() {
slides = document.getElementById('slider').getElementsByTagName('li');
for (let index = 0; index < total_slides; index++) {
const element = slides[index];
if(curr_slide == index+1){
element.classList.remove('hidden');
}else{
element.classList.add('hidden');
}
}
}
Related
I am trying to make an index page and I want it to have the following layout
Index page layout
I am using Deno Fresh thus I have tailwind for styling.
I have the following export for my index page that uses a footer and a header component an image and a Sign In island like so:
return (
<div className={'bg-[#5C7EB5]'}>
<Header active={"/"} flag={false}/>
<div className={"flex h-full gap-52 p-auto justify-center items-center"}>
<SignIn/>
<img src={"https://cdn-icons-png.flaticon.com/512/2974/2974498.png"}
alt={"Couldn't load image..."}
className={"w-1/4 h-1/4"}/>
</div>
<Footer/>
</div>
);
}
The components and the island are the following
Header:
export function Header({ active, flag }: Props, ) {
const menus = [
{ name: "Home", href: "/" },
{ name: "Rack Temperatures", href: "/test-header" },
{ name: "Entrees", href: "/docs" },
{ name: "Temperature Humidity", href: "/dummy"}
];
return (
<div class="sticky top-0 bg-[#28374F] w-full py-5 px-8 flex flex-col md:flex-row gap-4 mx-0">
<div class="flex items-center flex-1">
<div className="ml-1 text-2xl text-gray-50 font-bold">
<a href={"/"}>FlyMonitoring</a>
</div>
<a href={"/"}>
<img src={"https://pngimage.net/wp-content/uploads/2018/06/heisenberg-logo-png-2.png"}
alt={"Couldn't load image..."}
class={"w-12 h-12"}/>
</a>
</div>
<ul class="flex items-center gap-6">
{menus.map((menu) => (
<li>
<a
href={menu.href}
class={"text-gray-50 hover:text-blue-200 py-1 border-gray-50" +
(menu.href === active ? " font-bold border-b-2" : "")}
>
{menu.name}
</a>
</li>
))}
</ul>
<div>
{flag
? <button type={'submit'}
className={"bg-blue-600 hover:bg-blue-700 text-white rounded px-6 py-2.5"}>
Log Out</button>
: ""}
</div>
</div>
);
}
Footer:
import BrandGithub from "https://deno.land/x/tabler_icons_tsx#0.0.1/tsx/brand-github.tsx";
export default function Footer() {
const menus = [
{
title: "Device Control",
children: [
{ name: "Rack Temperature", href: "/rack-temperature" },
{ name: "Temperature Humidity", href: "/temperature-humidity" },
{ name: "Water Level", href: "/water-level" },
{ name: "Smoke", href: "/smoke" },
{ name: "Entrees", href: "/entrees" },
],
},
{
title: "Information",
children: [
{ name: "Email", href: "#" },
{ name: "Phone", href: "#" },
{ name: "Discord", href: "#" }
],
},
];
return (
<div class="bg-[#28374F] w-full flex flex-col md:flex-row w-full gap-2 md:gap-16 px-8 py-4 text-sm">
<div class="flex-1">
<div class="flex items-center gap-1">
<div class="font-bold text-2xl text-gray-50">
FlyMonitoring
</div>
</div>
<div class="text-gray-100">
Application for high security room monitoring
</div>
</div>
{menus.map((item) => (
<div class="mb-4" key={item.title}>
<div class="font-bold text-gray-50">{item.title}</div>
<ul class="mt-2">
{item.children.map((child) => (
<li class="mt-2" key={child.name}>
<a
class="text-gray-200 hover:text-blue-200"
href={child.href}
>
{child.name}
</a>
</li>
))}
</ul>
</div>
))}
<div class="text-gray-100 space-y-2">
<div class="text-xs">
Copyright © 2020<br />
All right reserved.
</div>
<a
href="https://github.com/****************"
class="inline-block hover:text-blue-200"
>
<BrandGithub />
</a>
</div>
</div>
);
}
Your code is unfortunately not reproducible:
Follow the below code structure:
flex flex-col
|_ h-40
|_ flex-1 👈 This fills the entire space
|_ h-60
<div class="flex h-screen flex-col bg-slate-500">
<header class="flex h-20 items-center justify-center bg-blue-600 text-6xl">Header</header>
<main class="flex flex-1 items-center justify-center bg-green-300 text-6xl">Main</main>
<footer class="flex h-40 items-center justify-center bg-yellow-400 text-6xl">Footer</footer>
</div>
tailwind-play
As you can see the underline is not complete filling the full length. I couldn't figure out why that is. This is made with tailwindCSS. Does anyone know where to find the full width for the deposit part?
My code:
function MyPage() {
const [currentTab, setCurrentTab] = useState<string>("deposit");
const [inputValue, setInputValue] = useState<string>("");
const [outputValue, setOutputValue] = useState<string>();
function classNames(...classes: string[]) {
return classes.filter(Boolean).join(" ");
}
return(
<div className="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700">
<ul className="flex flex-wrap -mb-px">
<li className="mr-2 ">
<button
onClick={() => {
setCurrentTab("withdrawal"),
currentTab != "withdrawal" ? setOutputValue("") : null;
}}
className={classNames(
currentTab == "withdrawal"
? "text-gray-100 border-gray-100 inline-block p-4 border-b-2 rounded-t-lg active"
: "inline-block p-4 rounded-t-lg active transition-all ease-in duration-100"
)}
>
Withdrawal
</button>
</li>
<li className="mr-2 ">
<button
onClick={() => {
setCurrentTab("deposit"), currentTab != "deposit" ? setOutputValue("") : null;
}}
className={classNames(
currentTab == "deposit"
? " text-gray-100 border-gray-100 inline-block p-4 border-b-2 rounded-t-lg active"
: "inline-block p-4 rounded-t-lg active transition-all ease-in duration-100 "
)}
aria-current="page"
>
Deposit
</button>
</li>
</ul>
</div>
)
}
mr-2 class for button's wrapper element <li className="mr-2"> creates margin on the right side of every li element of the loop - so your button cannot stretch on full width.
By adding last:mr-0 we're simply removing margin for the last child element of the loop. The example for this can be found here
<li className="mr-2 last:mr-0">
Compiled CSS for last:mr-0 would look like
.last\:mr-0:last-child {
margin-right: 0px;
}
Navbar menu items are shown in mobile view and function correctly but in the desktop mode, they are hidden. I am a beginner in tailwind so appreciate some detailed answers Thank you!
I am using react with typescript.
code:-
import React, { useState } from 'react'
import CloseIcon from '../../assets/icons/close.svg';
import HamburgerMenuIcon from '../../assets/icons/hamburger-menu.svg';
export const HeaderBar = () => {
const [toggle, setToggle] = useState(false);
const links = [
{ name: "Home", link: "/" },
{ name: "About", link: "/" },
{ name: "Work", link: "/" },
{ name: "Experience", link: "/" },
{ name: "Contact", link: "/" }
]
return (
<div className='shadow-md w-full fixed top-0 left-0'>
<div className='md:flex items:center justify-between bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm py-4 md:px-10 px-7'>
<div className='font-bold text2xl cursor-pointer flex items-center font-[poppins] text-gray-800 bg-slate-900'>
<span className='text-3xl'></span>
Designer
</div>
<div className='text-3xl absolute right-8 top-6 md:hidden cursor-pointer' onClick={() => { setToggle(!toggle) }}>
<img src={toggle ? CloseIcon : HamburgerMenuIcon} height={20} width={20} />
</div>
<ul className={` bg-white md:flex md:items-center md:pb-0 absolute md:static md:z-auto z-[-1] left-0 w-full md:w-auto bg-red-600 md:pl-0 pl-4 transition-all duration-500 ease-in-out ${toggle ? 'top-[55px] opacity-100' : '-top-[140px] opacity-0'} `}>
{links.map((link) => {
return (
<li key={link.name} className='bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm md:ml-8 text-md md:my-0 my-4 '>
<a href={link.link} className='text-gray-800 hover:text-gray-400 duration:500'>
{link.name}
</a>
</li>
)
})}
</ul>
</div>
</div >
);
};
I found the bug here
${toggle ? 'top-[55px] opacity-100' : '-top-[140px] opacity-0'} `}>
should change to
${!toggle ? 'top-[55px] opacity-100' : '-top-[140px] opacity-0'} `}>
I've been building this navbar this week and seem to have the layout working for the most part. However there are a couple of little functionality issues I have run in to with the hover effect and the links for the menu items on the left and the logo in the middle.
For some reason when the menu is at its full width the hover stops working, but when I collapse it to the hamburger menu it works just fine. I'm not too sure what I've miss here, and would welcome and suggestions on what I've done wrong to stop the hover and the links from working.
The accented-pink color is a custom configured color in my tailwind.config.js file
Navbar.jsx
import Link from "next/link";
import { useState } from "react";
import React from "react";
import Logo from "../Logo";
import headerLogo from "../../assets/images/headerImages/phreaquencyLogoPink.png";
import { FiGithub, FiMail, FiTwitter } from "react-icons/fi";
const NewNavbarLogoCenter = () => {
const [active, setActive] = useState(false);
const handleClick = () => {
setActive(!active);
};
return (
<>
<nav className="flex flex-row w-screen bg-yellow-100">
<div className="fixed top-0 flex text-center pl-[5vw] pr-[5vw] md:pl-[1.5vw] md:pr-[1.5vw] lg:pt-[3vw] pb-9 lg:px-[1.5vw] z-50 text-xl w-full align-baseline pt-[5vw]">
<div className="lg:absolute flex lg:left-0 lg:right-0 z-10 lg:mx-auto lg:inline-block md:top-[3vw] md:left-[1.5vw] md:w-[calc(131px+3vw)] md:block">
<Link href="/">
<a>
{" "}
<Logo
logoSrc={headerLogo}
logoAltSrc="phreaquency logo"
logoLayout="intrinsic"
logoObjectFit="contain"
logoWidth="172px"
logoHeight="50px"
className="relative items-center "
/>
</a>
</Link>
</div>
<button
className="inline-flex p-3 ml-auto rounded outline-none hover:text-pink-accented lg:hidden"
onClick={handleClick}
>
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
<div
className={`${
active ? "" : "hidden"
} w-full lg:inline-flex lg:flex-grow lg:w-auto`}
>
<div className="">
<div className="flex flex-col lg:flex-row lg:justify-start">
<div className="items-center justify-center w-full mr-3 lg:flex lg:w-auto hover:text-pink-accented">
<Link href="/">
<a>Agency</a>
</Link>
</div>
<div className="items-center justify-center w-full mr-3 lg:inline-flex lg:w-auto hover:text-pink-accented">
<Link href="/">
<a>Work</a>
</Link>
</div>
<div className="items-center justify-center w-full mr-3 lg:inline-flex lg:w-auto hover:text-pink-accented">
<Link href="/">
<a>Services</a>
</Link>
</div>
<div className="items-center justify-center w-full mr-3 lg:inline-flex lg:w-auto hover:text-pink-accented">
<Link href="/">
<a>Insights</a>
</Link>
</div>
<div className="items-center justify-center w-full mr-3 lg:inline-flex lg:w-auto hover:text-pink-accented">
<Link href="/">
<a>Contact</a>
</Link>
</div>
</div>
<div className="lg:absolute lg:top-0 lg:right-0 flex flex-row text-center pt-[6vw] lg:pt-[3vw] lg:pb-9 px-[1.5vw] z-50 text-xl lg:items-center lg:justify-end w-full justify-center items-center content-center">
<div className="flex items-center justify-center w-full mr-3 lg:inline-flex lg:w-auto hover:text-pink-accented">
<Link href="/">
<a>
<FiGithub />
</a>
</Link>
</div>
<div className="flex items-center justify-center w-full mr-3 lg:inline-flex lg:w-auto hover:text-pink-accented">
<Link href="/">
<a>
<FiTwitter />
</a>
</Link>
</div>
<div className="flex items-center justify-center w-full lg:inline-flex lg:w-auto hover:text-pink-accented">
<Link href="/">
<a>
<FiMail />
</a>
</Link>
</div>
</div>
</div>
</div>
</div>
</nav>
</>
);
};
export default NewNavbarLogoCenter;
tailwind.config.js
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
darkMode: "class", //remove this to have dark mode switch automatically
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./layouts/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
height: {
"50v": "50vh",
"60v": "60vh",
"70v": "70vh",
"80v": "80vh",
"90v": "90vh",
},
fontFamily: {
sans: ["Poppins", ...defaultTheme.fontFamily.sans],
},
colors: {
"off-white": "#f8f8ff",
"off-black": "#2e343b",
"pink-accented": "#ed61a2",
"section-overlay": "rgba(0,0,0, .2)",
},
},
},
plugins: [],
};
The accented colors are used with forms as tailwind docs says
so if you deleted the -accent and specify the degree of color after pink you should be good to go
hover:text-pink-500
Works for me.
wide screen
smaller screen
Maybe u could use the dev tools to see what's going on when u hover on wide screen.
Little advice, try to loop through the data in an array rather than writing the same code multiple times.
Here's how I test the code, hope it helps.
import React,{ useState } from "react";
const Navbar = () => {
const [active, setActive] = useState(false);
const handleClick = () => {
setActive(!active);
};
const links = [
{
name:'Agency',
url:'/',
},
{
name:'Work',
url:'/',
},
{
name:'Services',
url:'/',
},
{
name:'Insights',
url:'/',
},
{
name:'Contact',
url:'/',
},
]
return (
<>
<nav className="flex flex-row w-screen bg-yellow-100">
<div className="fixed top-0 flex text-center pl-[5vw] pr-[5vw] md:pl-[1.5vw] md:pr-[1.5vw] lg:pt-[3vw] pb-9 lg:px-[1.5vw] z-50 text-xl w-full align-baseline pt-[5vw]">
<div className="lg:absolute flex lg:left-0 lg:right-0 z-10 lg:mx-auto lg:inline-block md:top-[3vw] md:left-[1.5vw] md:w-[calc(131px+3vw)] md:block">
<a href="/">
logo
</a>
</div>
<button
className="inline-flex p-3 ml-auto rounded outline-none hover:text-pink-accented lg:hidden"
onClick={handleClick}
>
burgerbutton
</button>
<div className={`${
active ? "" : "hidden"
} w-full lg:inline-flex lg:flex-grow lg:w-auto`}>
<div className="">
<div className="flex flex-col lg:flex-row lg:justify-start">
{
links.map((link)=>{
return (
<div className="items-center justify-center w-full mr-3 lg:flex lg:w-auto hover:text-pink-accented">
<a href={link.url}>{link.name}</a>
</div>
)
})
}
</div>
</div>
</div>
</div>
</nav>
</>
);
};
export default Navbar;
const { useState } = React;
const App = () => {
const [items, setItems] = useState([]);
const [numItems, setNumItems] = useState(0);
return (
<div className="w-full">
<div className="flex p-5 align-center w-full flex-col">
<div className="flex justify-center">
<button
className="border-red-500 border-2 m-2 p-2"
onClick={() => {
addItems("Item " + (numItems + 1));
setNumItems(numItems + 1);
}}
>
Add Item
</button>
</div>
<div className="flex flex-nowrap justify-center align-center p-2 overflow-x-auto border-2 border-blue-700">
{items.map((item) => (
<div className="m-2 p-2 border-red-800 border-2 flex-shrink-0" key={item}>
<h1>{item}</h1>
</div>
))}
</div>
</div>
</div>
);
function addItems(item) {
setItems([...items, item]);
}
};
ReactDOM.render(<App />, document.getElementById("app"));
I am using Tailwind css with React.js
In the component above, I have a button that simply adds divs horizontally to a flexbox that automatically scrolls. The issue is, I am not able to add the divs from the center i.e if I add the justify-center or justify-content: center; in normall css, the items in the beginning get clipped off. How can I keep adding items indefinitely, without losing the items and maintaining the ability to scroll?
Codepen link : https://codepen.io/vineet192/pen/jOGZQZE
I've changed your snippet a little bit, to make it work.
Basically the clipping was because of the overflow + center.
const { useState } = React;
const App = () => {
const [items, setItems] = useState([]);
const [numItems, setNumItems] = useState(0);
return (
<div className="w-full">
<div className="flex p-5 align-center w-full flex-col">
<div className="flex justify-center">
<button
className="border-red-500 border-2 m-2 p-2"
onClick={() => {
addItems("Item " + (numItems + 1));
setNumItems(numItems + 1);
}}
>
Add Item
</button>
</div>
<div className="flex flex-nowrap justify-center align-center p-2 overflow-x-hidden border-2 border-blue-700">
<div className='flex overflow-x-auto'>
{items.map((item) => (
<div
className="m-2 p-2 border-red-800 border-2 flex-shrink-0"
key={item}
>
<h1>{item}</h1>
</div>
))}
</div>
</div>
</div>
</div>
);
function addItems(item) {
setItems([...items, item]);
}
};
ReactDOM.render(<App />, document.getElementById("app"));