I'm trying to create an arrow that moves(goes up through the upright corner and then reappears via the bottom left corner after that). So far I have the disappearing portion done but cannot resolve how to get it to then come back up through the bottom left.
My code is as follows:
<div class="text-3xl w-fit" style="clip-path: inset(0 0 0 0 );" >
<div class="transition ease-in-out hover:-translate-y-5 hover:translate-x-5 " >↗</div>
</div>
(also any better method would be lovely)
Try this:
DEMO
<script src="https://cdn.tailwindcss.com"></script>
<div class="text-3xl p-2 group border w-fit grid" style="clip-path: inset(0 0 0 0 );">
<div class="[grid-area:1/1] flex items-center justify-center h-10 w-10 transition ease-in-out group-hover:delay-300 translate-y-10 -translate-x-10 group-hover:translate-y-0 group-hover:translate-x-0">↗</div>
<div class="[grid-area:1/1] flex items-center justify-center h-10 w-10 transition ease-in-out delay-300 group-hover:delay-[0s] duration-300 group-hover:-translate-y-10 group-hover:translate-x-10">↗</div>
</div>
Related
I try using flowbite carousel with next app. Before the page become interactive, the image has a hidden class. After page become interactive, a JavaScript file removes the hidden class and makes slider work. The problem is when JavaScript loads, and slider start sliding, the image become: (Rendered size: 0 × 0 px) and doesn't renders!
Here's The Carousel Code:
`import Image from "next/image";
export default function Slider() {
return (
<div id="default-carousel" className="relative" data-carousel="slide">
{/* Carousel wrapper */}
<div className="relative h-56 overflow-hidden rounded-lg md:h-96">
{/* Item 1 */}
<div className="hidden duration-700 ease-in-out" data-carousel-item>
<span className="absolute text-2xl font-semibold text-white -translate-x-1/2 - translate-y-1/2 top-1/2 left-1/2 sm:text-3xl dark:text-gray-800">
First Slide
</span>
<Image
src={"/assets/slide1.jpg"}
className="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 object-contain"
alt="..."
fill
/>
</div>
);
}
Removed unnecessary parts of code here.
Chrome Dev Tools:
Screenshot of error
I've tried fill property, giving static width and height. None of them worked.
I am struggling to imagine the best way to accomplish a layout I am trying to achieve which includes a static sized oval that is cropped for smaller screens and which contains text inside it that will respond based on the breakpoint.
The design is like this:
So far, I'm here:
I'm trying to achieve this by creating the Oval outside my container div then putting on negative margin on the text to give it the appearance it is inside the oval. I feel like this isn't the right approach.
Currently set up (using Tailwind):
<section id="reading">
<div class="mt-12 border border-black rounded-[50%] overflow-hidden w-[686px] h-72"></div>
<div class="flex flex-col mx-auto md:container">
<div class="self-center justify-center px-8 text-center uppercase -my-80 py-28 text-ts3 font-title-preset">Text Headline Goes Here</div>
</div>
</section>
In my head, for the oval, I would just do margin:auto; overflow:hidden, and width:100% on the div, but that isn't working.
Any pointers on how you would approach this from a better practice perspective?
Thanks!
The approach you're taking separates the oval from the content within. A better way would be to keep them together by wrapping them both in a relatively positioned div and making the oval absolutely positioned to the top and center (then using a transform to center again which is a common pattern) and adding overflow-hidden to the relatively positioned element.
Not sure what your text-ts3 class is meant to do since you did not share your config. But this example uses a few breakpoints with text size classes defined for each and some negative top margin on the text to make things look more vertically centered. Here is the example running on Tailwind Play https://play.tailwindcss.com/3zWymGzXPn
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<section id="reading" class="border border-transparent pt-12">
<div class="overflow-hidden relative mx-auto md:container h-72">
<div class="border border-black rounded-[50%] w-[686px] h-full absolute top-0 left-1/2 -translate-x-1/2"></div>
<div class="h-full flex items-center justify-center max-w-[686px] mx-auto">
<div class="text-center uppercase -mt-4 sm:-mt-6 md:-mt-8 text-5xl sm:text-6xl md:text-7xl max-w-xs sm:max-w-sm">Text Headline Goes Here</div>
</div>
</div>
</section>
You can set the width of the oval to 120% (or a fixed with per breakpoint) and the shrink to 0, so it does not shrink.
<section id="reading">
<div class="flex h-screen w-full justify-center overflow-hidden bg-yellow-100">
<div class="mt-12 flex h-56 w-[120%] shrink-0 items-center justify-center rounded-[50%] border border-slate-300">
<div class="font-semibold">text goes here.</div>
</div>
</div>
</section>
See example in tailwind play.
I am trying to make a 404 page with Nextjs and typescript. Here are the screenshots:
As you see, I have the scrollbar on both the right and bottom sides and they are breaking the responsiveness.
I gave the background color to make this noticeable.
Here's my code...
import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";
interface Props {}
const ErrorPage: React.FC<Props> = ({}) => {
const router = useRouter();
return (
<>
<div className="bg-gray-900 h-screen w-screen flex justify-center items-center absolute z-0">
<svg
className="p-6 lg:p-48 fill-current text-gray-300"
viewBox="0 0 445 202"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
// viewBox="0 0 24 24"
>
<path
d="M137.587 154.953h-22.102V197h-37.6v-42.047H.53v-33.557L72.36 2.803h43.125V124.9h22.102v30.053zM77.886 124.9V40.537L28.966 124.9h48.92zm116.707-23.718c0 22.46 1.842 39.643 5.525 51.547 3.684 11.905 11.23 17.857 22.64 17.857 11.411 0 18.89-5.952 22.44-17.857 3.548-11.904 5.323-29.086 5.323-51.547 0-23.54-1.775-40.97-5.324-52.29s-11.028-16.98-22.438-16.98c-11.41 0-18.957 5.66-22.64 16.98-3.684 11.32-5.526 28.75-5.526 52.29zM222.759.242c24.887 0 42.339 8.76 52.356 26.28 10.018 17.52 15.027 42.406 15.027 74.66s-5.01 57.095-15.027 74.525c-10.017 17.43-27.47 26.145-52.356 26.145-24.887 0-42.339-8.715-52.357-26.145-10.017-17.43-15.026-42.271-15.026-74.525 0-32.254 5.009-57.14 15.026-74.66C180.42 9.001 197.872.241 222.76.241zm221.824 154.711h-22.102V197h-37.6v-42.047h-77.355v-33.557l71.83-118.593h43.125V124.9h22.102v30.053zM384.882 124.9V40.537l-48.92 84.363h48.92z"
fillRule="nonzero"
/>
</svg>
</div>
<div className="h-screen w-screen flex justify-center items-center relative z-10">
<div className="p-6 text-center">
<h2 className="uppercase text-xl lg:text-5xl font-black">
We are sorry, Page not found!
</h2>
<p className="mt-3 uppercase text-sm lg:text-base font-semibold text-gray-900">
The page you are looking for might have been removed had its name
changed or is temporarily unavailable.
</p>
<div className="text-center">
<Link href="/">
<a
className="mt-6 m-auto bg-primary text-white py-4 px-6 w-1/3 block rounded-full tracking-wide
font-semibold font-display focus:outline-none focus:shadow-outline hover:bg-primaryAccent
shadow-lg transition-css"
>
Back To Homepage
</a>
</Link>
<button
onClick={() => router.back()}
className="mt-6 m-auto bg-primary text-white py-4 px-6 w-1/4 block rounded-full tracking-wide
font-semibold font-display focus:outline-none focus:shadow-outline hover:bg-primaryAccent
shadow-lg transition-css"
>
Go Back
</button>
</div>
</div>
</div>
</>
);
};
export default ErrorPage;
Is this happening because of h-screen and w-screen or is something wrong with flex? But if I don't use them, I don't make it to work as I am expecting which is placing one div above the other (absolute). I am probably looking at this code for too long and I am lost in space.
So, what am I doing wrong here? Thanks.
I would suggest to have a parent relative div
<div class="h-screen w-screen relative">
<!-- 404 -->
<div class="bg-gray-900 flex justify-center items-center absolute inset-0 z-0"> // inset-0 is important
<svg></svg>
</div>
<!-- content -->
<div class="flex justify-center items-center absolute inset-0 z-10">
</div>
</div>
I replicated your design.
I would recommend changing h-screen to min-h-screen.
You can check out an example using your code in the following link.
https://play.tailwindcss.com/eD7VEDN5AR
"width: 100vw" is breaking the page layout. There's a horizontal scrollbar appearing on the page.
That's because the w-screen property means "width: 100vw" (the element with such a property is supposed to consume the whole available device screen space horizontally).
As you have a vertical scrollbar on the page body () (as the body is probably bigger in height than the screen height (= 100vh)), you'll always have less gorizontal space than 100vw, as the horizontal space is also consumed by the vertical scrollbar.
It's not a TailwindCSS-related issue, but rather a CSS-related bug.
The vertical scrollbar's width is usually ~12 px, but it differs between OS'es and screen sizes.
What I think would be better is if CSS would count the available screen width for the 100vw property considering the scrollbar width, like 100vw = real screen width - (vertical scrollbar's width, if one is present).
"(height: 100vh // max-height: 100vh)" is breaking the page layout. There's a vertical scrollbar appearing
That's because the w-screen property means "width: 100vw" (the element with such a property is supposed to consume the whole available device screen space horizontally).
As you have a vertical scrollbar on the page body () (as the body is probably bigger in width than the screen width (= 100vw)), you'll always have less vertical space than 100vh, as the vertical space is also consumed by the horizontal scrollbar.
The horizontal scrollbar's width is usually ~12 px, but it differs between OS'es and screen sizes.
For this case CSS could count the property for the 100vh value like 100vh = real screen height - (horizontal scrollbar's height, if one is present).
What can be done now:
You better use width: 100% and height: 100% properties instead of width: 100vw and height: 100vh
It's always risky to use the vh and vw values. Why would you need that? Semantically, the child should always be smaller than the parent.
This is the same ugly workaround as hiding the problems with overflowing with "overflow-x: hidden".
So your code should look like:
import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";
interface Props {}
const ErrorPage: React.FC<Props> = ({}) => {
const router = useRouter();
return (
<>
<div className="bg-gray-900 h-full w-full flex justify-center items-center absolute z-0">
<svg
className="p-6 lg:p-48 fill-current text-gray-300"
viewBox="0 0 445 202"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
// viewBox="0 0 24 24"
>
<path
d="M137.587 154.953h-22.102V197h-37.6v-42.047H.53v-33.557L72.36 2.803h43.125V124.9h22.102v30.053zM77.886 124.9V40.537L28.966 124.9h48.92zm116.707-23.718c0 22.46 1.842 39.643 5.525 51.547 3.684 11.905 11.23 17.857 22.64 17.857 11.411 0 18.89-5.952 22.44-17.857 3.548-11.904 5.323-29.086 5.323-51.547 0-23.54-1.775-40.97-5.324-52.29s-11.028-16.98-22.438-16.98c-11.41 0-18.957 5.66-22.64 16.98-3.684 11.32-5.526 28.75-5.526 52.29zM222.759.242c24.887 0 42.339 8.76 52.356 26.28 10.018 17.52 15.027 42.406 15.027 74.66s-5.01 57.095-15.027 74.525c-10.017 17.43-27.47 26.145-52.356 26.145-24.887 0-42.339-8.715-52.357-26.145-10.017-17.43-15.026-42.271-15.026-74.525 0-32.254 5.009-57.14 15.026-74.66C180.42 9.001 197.872.241 222.76.241zm221.824 154.711h-22.102V197h-37.6v-42.047h-77.355v-33.557l71.83-118.593h43.125V124.9h22.102v30.053zM384.882 124.9V40.537l-48.92 84.363h48.92z"
fillRule="nonzero"
/>
</svg>
</div>
<div className="h-full w-full flex justify-center items-center relative z-10">
<div className="p-6 text-center">
<h2 className="uppercase text-xl lg:text-5xl font-black">
We are sorry, Page not found!
</h2>
<p className="mt-3 uppercase text-sm lg:text-base font-semibold text-gray-900">
The page you are looking for might have been removed had its name
changed or is temporarily unavailable.
</p>
<div className="text-center">
<Link href="/">
<a
className="mt-6 m-auto bg-primary text-white py-4 px-6 w-1/3 block rounded-full tracking-wide
font-semibold font-display focus:outline-none focus:shadow-outline hover:bg-primaryAccent
shadow-lg transition-css"
>
Back To Homepage
</a>
</Link>
<button
onClick={() => router.back()}
className="mt-6 m-auto bg-primary text-white py-4 px-6 w-1/4 block rounded-full tracking-wide
font-semibold font-display focus:outline-none focus:shadow-outline hover:bg-primaryAccent
shadow-lg transition-css"
>
Go Back
</button>
</div>
</div>
</div>
</>
);
};
export default ErrorPage;
In the case of TailwindCSS, you should use h-full and w-full instead of h-screen and w-screen.
Also, in your specific case it's this line that was breaking everything, most likely:
<div className="h-screen w-screen flex justify-center items-center relative z-10">
As you already have this applied to the parent element:
<div className="bg-gray-900 h-screen w-screen flex justify-center items-center absolute z-0">
It's all wrong semantically in your code. This is ugly work-arounding.
You haven't provided the tailwind.config.js, so some of the colors in the demo are missing due to missing custom TailwidnCSS class names values.
But this is basically the same code with an exception of eplacing all -screen properties with -full and also removing the bottom padding of the svg, as on most of the screens, the svg has too much spacing and then consumes >100vh space of the screen and is not positioned at the center vertically, but rather has starneg white space at the bottom of the page.
https://dpd0jl.sse.codesandbox.io/
I'm currently using Tailwind / TailwindUI and I would like to scale down ALL items.
Eg I go to my website and Zoom out so everything becomes smaller and the zoom level is 85%
I would like my website to appear at this scale (85%) when a normal user visits.
How would I go about doing this in tailwind?
You can use transform & scale property to achieve this.
Just add transform along with the scale-95 etc.
Visit for more reference :-
https://tailwindcss.com/docs/scale
https://tailwindcss.com/docs/transform
A simple solution to this is using the browser's built in zoom functionality.
document.body.style.zoom = "85%"
I've tested this on Chrome 101.
This is functional Alpine.js component that achieves dynamically changing browser's zoom percentage:
<div x-data="{zoom:100}" class="flex bg-teal-600 text-white mx-3 my-2 rounded-md text-sm font-medium">
<div #click="document.body.style.zoom = `${zoom-=10}%`" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-1 px-2 pl-3 rounded-l">-</div>
<div x-text="zoom" class="px-2 pt-1"></div>
<div #click="document.body.style.zoom = `${zoom+=10}%`" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-1 px-2 rounded-r">+</div>
</div>
I'm using TailwindCSS -a utility class framework- to style my elements. Altough this is more a generic CSS question.
I can't manage to position the box so this gets the remaining space without overflowing it. This is my actual state:
<div class="flex flex-col h-screen mx-8 bg-white rounded p-4 mb-8">
<!-- SUBTITLE -->
<div>
<h2 class="text-lg font-bold text-gray-700 pb-4">Subtitle</h2>
</div>
<div class="relative self-auto mb-8">
<!-- ELEMENTS -->
<a href="#">
<img class="absolute z-10" style="top: 131px; left: 235px;"
src="{{ asset('some.svg') }}">
</a>
</div>
</div>
Output (omitting some of the inside elements):
As you can see, the scrollbar shows because the div is too big. In order to see the bothom of the box I have to scrolldown:
This is my desired output:
Thanks in advance.
Fiddle
Link.
The class .h-screen is 100vh. .mb-8 has an margin-bottom:2rem. So the height is 100vh + 2rem. You can use [calc][1] to subtract the margin from the height.
.h-screen{
height:calc(100vh - 2rem)!important;
}
https://jsfiddle.net/c28145au/
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
This is the solution I found: w-[calc(100%_-_10px)]
you are using class h-screen which has height: 100vh; remove that class from the div.