black line above imageI am trying to create a product card using Tailwind CSS for styling. Whenever I get the image in the place that I want, there is a black line at the very top of the card/image. I have tried taking out all of the styles concerning my tag and it still seems to be there. Here is my code:
import React from 'react'
import coffeemerch from "../images/Coffee-Product photo.jpg";
export default function Products() {
return (
<div className="card w-96 bg-base-100 shadow-xl top-40 left-32">
<figure> <img className=" h-80 justify-center " src={coffeemerch} alt="coffee-product"></img></figure>
<div className="card-body">
<h2 className="card-title text-red-800">Medium Roast</h2>
</div>
</div>
);
}
Related
I am trying to apply an onhover effect for a viewport larger than 768px. Below 768px it should look like the elements are "always onhover".
Specifically, on desktop or larger devices in general, there should be a background in a box at onhover. This background should always be shown on mobile, i.e. <768px in my case.
What am I doing wrong?
Here are the snippets.
JSX-Snippet:
import { features } from "../constants"; import styles from "../style";
const FeatureCard = ({ icon, title, content, index }) => (
<div className=
{`
flex flex-row p-6 rounded-[20px]
ss:max-sm:feature-card-small
sm:feature-card
${index !== features.length - 1 ? "mb-6" : "mb-0"}
`}
>
<div className={`
w-[64px]
h-[64px]
rounded-full
${styles.flexCenter}
bg-dimBlue`
}>
<img
src={icon}
alt="star"
className="
w-[50%]
h-[50%]
object-contain"
/>
</div>
<div className="flex-1 flex flex-col ml-3">
<h4 className="
font-poppins
font-semibold
text-white
text-[18px]
leading-[23.4px]
mb-1">
{title}
</h4>
<p className="
font-poppins
font-normal
text-dimWhite
text-[16px]
leading-[24px]
">
{content}
</p>
);
export default FeatureCard;
CSS-Snippet:
.feature-card:hover { background: var(--black-gradient); box-shadow: var(--card-shadow); }
.feature-card-small { background: var(--black-gradient); box-shadow: var(--card-shadow); }
simply apply feature-card as class without viewport specification works as expected; onhover --> background changes
different viewport-specifications (sm:..., ss:max-sm and sm:) and creation of different CSS classes (so there can be no overlap for sure) did not work
sorry if the code block looks like a mess here on stackoverflow. my first post, still learning.
How to make the selected div element to be 100% in the inspect element tool in the picture below. I am using display:flex on .dvPageNotFound class and I want to apply height:100% on the div element inside it. If we put display:flex on parent element then all the child elements gets stretched by default, but here I don't get my child element stretched. I don't know why? I am using 12 column grid system same as bootstrap 4 grid Any help would be appreciated.
HERE IS THE CODE -
import React from 'react';
import { Link } from 'react-router-dom';
const PageNotFound = () => {
return (
<>
<div className="dvPageNotFound d-flex">
<div class='col-12'>
<h1 className="heading-lg">Page Not Found</h1>
<p className="my-3">The page you are looking for we coudn't found.</p>
<Link to="/" className="btn btn-black">
Back to Homepage
</Link>
</div>
</div>
</>
);
};
export default PageNotFound;
This worked for me. I added height: 100vh and added m-auto classes which we get from the 12 column grid.
import React from 'react';
import { Link } from 'react-router-dom';
const PageNotFound = () => {
return (
<>
<div className="dvPageNotFound d-flex justify-content-center align-items-center" style={{ height: '100vh' }}>
<div className="m-auto">
<h1 className="heading-lg">Page Not Found</h1>
<p className="my-3">The page you are looking for we coudn't found.</p>
<Link to="/" className="btn btn-black">
Back to Homepage
</Link>
</div>
</div>
</>
);
};
export default PageNotFound;
I am trying to create a new website and I want to add a 3d model from spline,
I added it but it takes some time to load so I decided to add a loader/Spinner but I did not know how to check if the 3d model is loaded or not.
this is my component
import React from "react";
import styles from "../styles/Home.module.css";
import Spline from "#splinetool/react-spline";
import NavBar from "./NavBar";
function WelcomeComp() {
return (
<div className={styles.Welcome}>
<div className="sticky top-4">
<NavBar />
</div>
<div className="flex flex-row h-screen">
<div className="flex flex-col items-start justify-center">
<p className={styles.WelcomeLine1}>Hi, My name is Abdallah Zaher</p>
<p className={styles.WelcomeLine2}>Iam a Front-end developer </p>
</div>
<div className="w-1/2">
<Spline scene="https://prod.spline.design/-----/scene.splinecode" />
</div>
</div>
</div>
);
}
export default WelcomeComp;
and here I want to make the if condition if the model is loaded show the component else show the spinner
import WelcomeComp from "../components/WelcomeComp";
import styles from "../styles/Home.module.css";
export default function Home() {
return (
<div className={styles.container}>
<WelcomeComp />
<div className={styles.loader}></div>
</div>
);
}
Spline component supports onLoad prop, so your Spline implementation should look something like this:
<Spline
onLoad={()=>setLoading(false)}
scene="https://prod.spline.design/-----/scene.splinecode"
/>
To keep it simple, I recommend having the Spline component and the Loader/Spinner component together in one scope, so Spline can easily change the loading state and also the loader can easily react to it. This is one of the possible ways how to implement it:
import React,{ useState } from "react";
import styles from "../styles/Home.module.css";
import Spline from "#splinetool/react-spline";
import NavBar from "./NavBar";
function WelcomeComp() {
const [loading, setLoading] = useState(true)
return (
<>
{loading && <div className={styles.loader}></div> } //if loading, show loader
<div className={styles.Welcome}>
<div className="sticky top-4">
<NavBar />
</div>
<div className="flex flex-row h-screen">
<div className="flex flex-col items-start justify-center">
<p className={styles.WelcomeLine1}>Hi, My name is Abdallah Zaher</p>
<p className={styles.WelcomeLine2}>Iam a Front-end developer </p>
</div>
<div className="w-1/2">
<Spline
onLoad={()=>setLoading(false)}
scene="https://prod.spline.design/-----/scene.splinecode"
/>
</div>
</div>
</div>
</>
);
}
export default WelcomeComp;
And of course, delete the loader div from the Home component.
Have a look at my current web page, developed using tailwindcss page below:
What now I want to achieve is to have a .PNG background instead of that blank green background in the center.
I am new to Tailwind, so I used to simply set a background: url(..) in a css file for particular div class. Looking at TailwindCSS documentation here about backround-image,I can't see similar functionalities there.
Below is snippet of my code for that particular div:
<!-- Content: background image url should be in this div, right?-->
<div class="flex-1 pt-2 text-2xl font-bold mt-2 mb-2 bg-green-50 rounded-br-3xl">
<div>
<!--Search field -->
<div class="w-full">
<form class="rounded">
<div class="px-5">
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Ask me anything (Press CTRL+K to focus)")>
</div>
</form>
</div>
<!-- content -->
<div class="px-5 pt-8">Course content here</div>
</div>
</div>
You can add your own background images by editing the theme.backgroundImage section of your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: theme => ({
'hero-pattern': "url('/img/hero-pattern.svg')",
'footer-texture': "url('/img/footer-texture.png')",
})
}
}
}
so hero-pattern will become bg-hero-pattern for example.
Now that Tailwind 3 is out, you can use one-off background images like this, without having to use inline styles or extend tailwind:
<div class="bg-[url('/img/background.png')]">
<!-- ... -->
</div>
You can learn more about using arbitrary values in Tailwind 3 in the docs.
I created a component named Header with a simple css class:
<template>
<nav
class="flex fixed w-full items-center justify-between px-6 h-16 bg-white text-gray-700 border-b border-gray-200 z-10"
>
<!-- Etc... -->
</nav>
In Home component I registred Header but it is overlapping the home:
<template>
<div class="container">
<Header />
<div class="flex m-5">
<h3>Hello</h3>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
components: {
Header: () => import('#/components/Header.vue')
}
}
</script>
The Hello is behind, even including block class in Home component is not worked. Anyone can helped?
There are may ways you could achieve this, but building on the code you already have, you could:
Add a top-0 class to your header. This will ensure that your header which is now positioned fixed will stick to the top of the viewport.
Add a top padding class equavliant to the height of your header (e.g. pt-16) to your container.
Here's a live demo for your reference.
overlapping component each others because of height of your component and in flex height taking automaticly so remove your height
remove css h-16