Using tailwind, I am trying to get the "footer" to the bottom of the page. Nothing I do seems to get it where it needs to be. I am wondering if fresh eyes can help me here.
<template>
<Head title="Log in" />
<div class="min-h-screen flex bg-gray-900">
<div class="w-1/2 flex-1 flex flex-col justify-center">
<div class="mx-auto w-full max-w-sm lg:w-96">
<div>
<div class="tracking-wider uppercase flex justify-center text-4xl md:mt-0 md:order-1 font-logo">
<div class="text-white">REALKINK</div><div class="text-red-600">MEN</div>
</div>
<div class="mt-6 relative">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t border-gray-700" />
</div>
<div class="relative flex justify-center text-sm">
</div>
</div>
<h2 class="flex justify-center mt-6 text-xl font-extrabold text-gray-300">Sign in to your account</h2>
</div>
<div class="mt-8">
<div class="mt-6">
<form action="#" method="POST" class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-300"> Email address </label>
<div class="mt-1">
<input id="email" name="email" type="email" autocomplete="email" required="" class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm" />
</div>
</div>
<div class="space-y-1">
<label for="password" class="block text-sm font-medium text-gray-300"> Password </label>
<div class="mt-1">
<input id="password" name="password" type="password" autocomplete="current-password" required="" class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm" />
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded" />
<label for="remember-me" class="ml-2 block text-sm text-gray-300"> Remember me </label>
</div>
<div class="text-sm">
Forgot your password?
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">Sign in</button>
</div>
</form>
</div>
</div>
</div>
<div class="sticky bottom-0 font-logo md:h-10 bg-gray-100 dark:bg-gray-900">
<div class="max-w-7xl mx-auto py-2 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
<div class="text-sm flex justify-center space-x-6 md:order-2">
<a href="/terms-of-service" class="text-gray-500 hover:text-red-700">
<span class="sr-only">Terms</span>
Terms
</a>
<a href="/privacy-policy" class="text-gray-500 hover:text-red-700">
<span class="sr-only">Privacy</span>
Privacy
</a>
<a href="#" class="text-gray-500 hover:text-red-700">
<span class="sr-only">Support</span>
Support
</a>
</div>
<div class="mt-2 md:mt-0 md:order-1">
<p class="text-center text-xs text-gray-500">© 2022 Real Kink LLC. All rights reserved.</p>
</div>
</div>
</div>
</div>
<div class="hidden lg:block relative w-0 flex-1">
<img class="absolute inset-0 h-full w-full object-cover" src="https://64.media.tumblr.com/7395cca2c3ec57278b71a63e3221d36a/482bae774b0fde2f-91/s2048x3072/a10ae44d666d4f8a0adec40b9f0030748c6f8745.jpg" alt="" />
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import { Head, Link } from '#inertiajs/inertia-vue3';
export default defineComponent({
components: {
Head,
Link,
},
props: {
canResetPassword: Boolean,
status: String
},
data() {
return {
form: this.$inertia.form({
email: '',
password: '',
remember: false
})
}
},
methods: {
submit() {
this.form
.transform(data => ({
... data,
remember: this.form.remember ? 'on' : ''
}))
.post(this.route('login'), {
onFinish: () => this.form.reset('password'),
})
}
}
})
</script>
I have put ALL the code here just to keep it clear and simple without any variables of issues. Again, I am just trying to get the footer to the bottom of the left column. Any help would be very appreciated!
Related
This is my code in html + tailwind css:
<div className="flex justify-center">
<div className="flex flex-col justify-center items-start gap-5">
<div className="form-check">
<input
className="form-check-input appearance-none rounded-full h-7 w-7 border-4 border-[#5F6368] bg-[#C4C4C4] hover:shadow-lg hover:shadow-[#5F6368] hover:border-[#3B52B5] checked:bg-[#7EABFF] checked:border-[#3B52B5] focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-5 cursor-pointer"
type="radio"
name="flexRadioDefault"
id="flexRadioDefault1"
/>
<label
className="form-check-label text-3xl text-right font-bold text-gray-800"
htmlFor="flexRadioDefault1"
>
الخيار 1
</label>
</div>
</div>
</div>
How can I make the radio choice from right to left?
Make just one div as a parent of the input field and the label. Then give the parent div these classes: flex flex-row-reverse items-center
<div className="form-check flex flex-row-reverse items-center">
<input
className="form-check-input appearance-none rounded-full h-7 w-7 border-4 border-[#5F6368] bg-[#C4C4C4] hover:shadow-lg hover:shadow-[#5F6368] hover:border-[#3B52B5] checked:bg-[#7EABFF] checked:border-[#3B52B5] focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-5 cursor-pointer"
type="radio"
name="flexRadioDefault"
id="flexRadioDefault1"
/>
<label
className="form-check-label text-3xl text-right font-bold text-gray-800"
htmlFor="flexRadioDefault1"
>
الخيار 1
</label>
</div>
I am creating a form that will be fixed to the top of a page. However, when I implement position: fixed to the parent div of the form, the search bar and buttons do not work. Here is the code:
<div className="fixed flex xl:pl-64 md:pl-2 sm:pl-2 p-4 w-2/4 bg-red-600 top-0 w-full ">
<h1 className="text-2xl text-white float-left"> Customer Search </h1>
<input className="border-2 border-gray-300 bg-white h-10 px-5 pr-16 rounded-lg text-sm focus:outline-none"
name="search"
placeholder="Search for..."
type="text"/>
<div className="text-white py-2 px-4 rounded border-2 border-red-100"> search </div>
<div className="text-white py-2 px-4 rounded border-2 border-red-100"> filter </div>
<div className="text-white py-2 px-4 rounded border-2 border-red-100"> clear </div>
</div>
Now, I did it in JSFiddle and the buttons do work. So now I am wondering, what could be wrong with my code? When I remove fixed, the search bar and buttons work just fine.
Welp, I fixed it. Much simpler than anticipated. I just added z-10 to the header. I guess it was being overlapped by some non-viewable thing.
<div style={{'height': '900px'}} className="w-full flex">
<div className="fixed xl:pl-64 md:pl-2 sm:pl-2 p-4 w-full bg-red-600 sm:pb-4 z-10">
<h1 className="text-4xl text-white pl-4 z-50"> Users </h1>
<p className="pt-2 pl-4">
<input className="w-3/4 rounded h-8 border-gray-400 border-2" type="text" placeholder="Search.." name="search"/>
<button className="text-white fa-lg pl-4" type="submit"><FontAwesomeIcon icon={faSearch}/></button>
<button className="ml-6 py-2 px-5 bg-gray-400 shadow z-50">Add User</button>
</p>
</div>
I'm trying to vertical center the form into my app.
Into tailwind.config.js , I've set the h-screen to 100vh (without header and footer height) :
module.exports = {
purge: [],
theme: {
minHeight: {
screen: 'calc(100vh - 296px)',
},
fontFamily: {
title: ['Righteous', 'sans-serif'],
body: ['Montserrat', 'sans-serif'],
},
},
variants: {},
plugins: [],
}
It works perfectly, but when I put h-full into my child (to be 100% of parent), the content don't dapat the height to be vertically center.
You can see the code in my screenshots below , the child is set to 100% but don't expend the div..
What is wrong ? Thanks
Screens here :
https://imgur.com/a/dT2nW7B
Edit (html code):
<section class="container mx-auto h-full px-6 p-10">
<div class="flex items-center flex-wrap">
<div class="w-full md:w-1/2">
<img src="images/illustrations/contact.svg" alt="Reporting" />
</div>
<div class="w-full md:w-1/2 pl-10">
<form class="w-full max-w-lg">
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide font-bold mb-2" for="grid-first-name">
Prénom
</label>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="grid-first-name" type="text" placeholder="Jack">
</div>
<div class="w-full md:w-1/2 px-3">
<label class="block uppercase tracking-wide font-bold mb-2" for="grid-last-name">
Nom
</label>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="grid-last-name" type="text" placeholder="Pot">
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full px-3">
<label class="block uppercase tracking-wide font-bold mb-2" for="grid-password">
E-mail
</label>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="email" type="email" placeholder="jackpot#exemple.fr">
<p class="text-gray-600 text-xs italic">Some tips - as long as needed</p>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full px-3">
<label class="block uppercase tracking-wide font-bold mb-2" for="grid-password">
Message
</label>
<textarea
class=" no-resize appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 h-48 resize-none"
id="message" placeholder="Je vous contacte pour ..."></textarea>
<p class="text-gray-600 text-xs italic">Re-size can be disabled by set by resize-none / resize-y
/
resize-x
/ resize</p>
</div>
</div>
<div class="md:flex md:items-center">
<div class="md:w-1/3">
<button
class="shadow bg-blue-500 hover:bg-white hover:text-blue-500 rounded-full hover:border-blue-500 border border-blue-500 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded"
type="button">
Envoyer
</button>
</div>
<div class="md:w-2/3"></div>
</div>
</form>
</div>
</div>
</section>
this code extends (laravel blade) this layout :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dico des Mots</title>
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="stylesheet" type="text/css" href="css/app.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
</head>
<body class="font-body">
#include('components.navbar')
<main id="app" class="min-h-screen">
#yield('content')
</main>
#include('components.footer')
</body>
</html>
You should use h-screen for this. See the working model here jsfiddle
<section class="container mx-auto"> // remove h-full and padding
<div class="flex items-center h-screen flex-wrap"> // add h-screen
Tip:
h-full is 100% (relative to parent)
h-screen is 100vh (relative to screen)
I created a footer that I wanted to #include to other webpages. As such, I created #section('content'), then at the bottom #include('footer') then #endsection. Now this works only on my contact page which is showing the footer. But is not working on my home or blog pages. Below I will include the code I'm working on Laravel 7, using blade, tailwindcss, html/css. I tried multiple things like moving around #include, or #extends or #yeild but couldn't figure this out. Any help or direction would be appreciated.
When I inspect the homepage, for instance, the footer is being passed through but is mixed in with the navbar. When I inspect the contact page its placed where it should be at the bottom of the page. This has me stumped.
FOOTER
#extends('layout')
<footer>
<div class="flex justify-center bottom-0 bg-gray-800 h-18 pt-4 pb-4 static w-full">
<a href="https://paolotrulli.com" class="text-white hover:text-blue-800 m-2"><img class="h-10 w-10"
src="/images/global.svg"></a>
<a href="https://twitter.com/p_trulli" class="text-white hover:text-lue-800 m-2"><img class="h-10 w-10"
src="/images/twitter-black.svg"></a>
<a href="https://github.com/PT-83" class="text-white hover:text-blue-800 m-2"><img class="h-10 w-10"
src="/images/github.svg"></a>
<p class="text-white pt-4">Copyright 2020, Paolo Trulli</p>
</div>
</footer>
#yield('footer')
LAYOUT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.0.1/dist/alpine.js" defer></script>
<title>#yield('title')</title>
</head>
<html>
<body>
<div class="absolute inset-x-0 top-0">
<nav x-data="{ open: false }" #keydown.window.escape="open = false" class="bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center h-24">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/images/startup.svg" alt="icon" />
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline">
<a href="/home"
class="px-4 py-2 rounded-md text-lg font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
<a href="/contact"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
<a href="/blog"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
<a href="po"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
<a href="#"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button #click="open = !open"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div :class="{'block': open, 'hidden': !open}" class="hidden md:hidden">
<div class="px-2 pt-2 pb-3 sm:px-3">
<a href="/home"
class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
<a href="/contact"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
<a href="/blog"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
<a href="#"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
<a href="#"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="/images/0.jpeg" alt="My Picture" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Paolo Trulli</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">paolo.g.trulli#gmail.com</div>
</div>
</div>
</div>
</nav>
#yield('content')
</body>
</html>
CONTACT PAGE
#extends('layout')
#section('title', 'Contact')
#section('content')
<div class="bg-gray-700 text-center text-lg full-screen pt-6">
<h1 class="pb-8 text-white text-xl">Contact</h1>
<form action="/contact" method="POST">
<div class="justify-center relative">
<label>
<input class="border-2 border-gray-800 border-black h-10 w-1/4" type='text' placeholder="Name"
autocomplete="off">
</label>
</div>
<div class="justify-center pt-4">
<label>
<input class="border-2 border-gray-800 h-10 w-1/4" type="text" placeholder="Email" autocomplete="off">
</label>
</div>
<div class="justify-center pt-4">
<label>
<input class="border-2 border-gray-800 h-20 w-1/4" type="text" placeholder="Type Text Here"
autocomplete="off">
</label>
</div>
#csrf
<div class="text-center pt-6">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded justify-center">
Submit</button>
<h3 class="pt-6 text-white">I will not SPAM you and your data is Safe!</h3>
<div class="bg-cover content-center flex justify-center min-h-50">
<img src="/images/contact.svg" alt="background image">
</div>
</div>
</form>
#include('footer')
#endsection
HOME PAGE
#extends('layout')
#section('title', 'Home')
#section('content')
<main>
<div class="bg-gray-700 text-center text-gray-200 tracking-wider leading-loose h-full">
<h1 class="pt-6 pb-6 text-lg font-semibold">
A Website Built and Designed By Me!
</h1>
<img class="container-sm mx-auto border-2 border-gray-800" src="/images/0.jpeg">
<p class="pt-6 text-base capitalize font-semibold">
Who am I you ask?
</p>
<div class="inline-flex">
<p class="flex-1"></p>
<p class="flex-1 text-center pt-3 text-justify">
I am a father of two, a husband of one, and someone who loves to build things. I tend to find
something I enjoy
get obsessed with it, and ditch if for something new. Rinsing and Repeating the process. My latest
obsession, in
case you didn't notice, creating this website by programming it myself. I have been diving deep into the
world
of coding, although it takes time to learn, and the many frustrating issues along the way, I can say for
certain
I love to learn and build.
</p>
<p class="flex-1"></p>
</div>
<p class="text-center pt-6 capitalize font-semibold">
So what will this site be or provide?</p>
<div class="inline-flex pt-3">
<p class="flex-1"></p>
<p class="flex-1 text-justify">
I plan to blog about
various topics that interest me. Topics will be random, interesting, and makes me curious. Also, I will
use
this site to showcase a portfolio of work I complete, beginning with this website and adding projects as
I
go.
</p>
<p class="flex-1"></p>
</div>
</div>
</div>
</main>
#include('footer')
#endsection
Lastly BLOG PAGE
#extends('layout')
#section('title', 'Blog')
#section('content')
<main>
<div class="bg-gray-700 text-center text-gray-700 h-screen text-lg">
<h3 class='text-gray-300 pt-6 text capitalize'>A place where I create posts on random things that interest me
</h3>
<div class="pt-6">
<form action="/blog" method="post">
</div>
<label class=""></label>
<input type="text" name="title" autocomplete="off">
#csrf
<div class="text-center pt-6">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded justify-center">
Add Blog Post</button>
</div>
</form>
<p style="color: red">#error('title') {{ $message }} #enderror</p>
<ul>
#forelse ($blogs as $blog)
<li>{{ $blog->title }}</li>
#empty
<li>
<h3 class="text-center pt-4 text-red-500">No Blog Posts Yet</h3>
</li>
#endforelse
</ul>
</div>
</div>
</main>
#include('footer')
#endsection
Simply, improper html tags. Lesson learned to ensure open and close tags are equal. Because I was short </div> tags my code was suffering and not working as it should.
Credit goes to #kerbholz
I am using TailwindCSS in a Next.JS project with postcss and autoprefixer. The issue here is it renders fine in Desktop and Chrome for Android, and Firefox. In iOS though both on Safari as well as chrome, the UI gets messed up.
I tried a lot of autoprefixer configs. None of them worked. This problem exists only with webkit. I thought maybe because of the flex, but other flexes on the same page work fine.
Here's the Minimal repo to reproduce the error.
https://github.com/RohithCIS/tailwind-nextjs-webkit-issue
I have attached the images below.
Here's my configs and thanks for the help.
// postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer')
]
}
// tailwind.config.js
module.exports = {
theme: {
extend: {
borderRadius: {
'xl': '30px'
},
colors: {
grapefruit: '#da4453',
bittersweet: '#e9573f',
bluejeans: '#4a89dc',
lavander: '#967adc',
sunflower: '#f6bb42',
grass: '#8cc152',
pinkrose: '#d770ad',
lightgray: '#e6e8ed',
mint: '#37bc9b',
aqua: '#3bafda',
mediumgray: '#aab2bd',
darkgray: '#434a54'
}
},
},
variants: {},
plugins: []
}
// next.config.js
const withSass = require('#zeit/next-sass');
module.exports = withSass({});
<section className="flex flex-col items-center lg:mt-5">
<div className="max-w-1200">
<div className="flex flex-col lg:flex-row justify-between lg:p-3 w-full">
{/* PREVIEW PANE */}
<div style={{ flexBasis: 0, flexGrow: 3 }}>
<CarouselProvider
naturalSlideWidth={1}
naturalSlideHeight={1}
totalSlides={3}
className="flex flex-col-reverse lg:flex-row"
>
<div className="flex flex-row lg:flex-col p-3 lg:p-0">
<Dot slide={0} className="thumb-preview border border-gray-300 hover:border-pinkrose rounded lg:mb-3 mr-3 lg:mr-0">
<img className="rounded object-cover h-full w-full" src="https://images.cbazaar.com/images/stones-embellished-royal-blue-saree-sadsfcns2198-u.jpg"></img>
</Dot>
<Dot slide={1} className="thumb-preview border border-gray-300 hover:border-pinkrose rounded lg:mb-3 mr-3 lg:mr-0">
<img className="rounded object-cover h-full w-full" src="https://www.jivaana.com/cache/9d/90/rose-red-saree-and-blush-pink-crop-top_saree_red-baby-pink_151186283056-9d90b1cb5f0ccd4306a0ba39058f8571.jpg"></img>
</Dot>
<Dot slide={2} className="thumb-preview border border-gray-300 hover:border-pinkrose rounded lg:mb-3 mr-3 lg:mr-0">
<img className="rounded object-cover h-full w-full" src="https://images.cbazaar.com/images/stones-embellished-royal-blue-saree-sadsfcns2198-u.jpg"></img>
</Dot>
</div>
{/* <div>
<img className="object-contain" src="https://images.cbazaar.com/images/stones-embellished-royal-blue-saree-sadsfcns2198-u.jpg"></img>
</div> */}
<div className="w-full lg:mx-3">
<Slider>
<Slide index={0}><ImageWithZoom src="https://images.cbazaar.com/images/stones-embellished-royal-blue-saree-sadsfcns2198-u.jpg"></ImageWithZoom></Slide>
<Slide index={1}><ImageWithZoom src="https://www.jivaana.com/cache/9d/90/rose-red-saree-and-blush-pink-crop-top_saree_red-baby-pink_151186283056-9d90b1cb5f0ccd4306a0ba39058f8571.jpg"></ImageWithZoom></Slide>
<Slide index={2}><ImageWithZoom src="https://images.cbazaar.com/images/stones-embellished-royal-blue-saree-sadsfcns2198-u.jpg"></ImageWithZoom></Slide>
</Slider>
</div>
</CarouselProvider>
</div>
{/* DETAILS PANE */}
<div style={{ flexBasis: 0, flexGrow: 4 }} className="flex flex-col p-5 pt-0 rounded-lg">
<span className="text-base lg:text-xl text-darkgray">Blue Gray and Gold Coloured Netted Cotton Saree | Straight from Weavers</span>
<div className="flex flex-col lg:flex-row">
<div className="flex flex-col">
<div className="flex justify-between flex-row-reverse items-start lg:flex-col">
<div className='flex flex-row items-center'>
<StarRatingComponent className="text-3xl"
name="rate1"
starCount={5}
value={4}
starColor={'#d770ad'}
/>
<span className="text-dark-gray ml-5 text-xs">231 Ratings<br />10 Reviews</span>
</div>
<div>
<div className="lg:mt-5">
<span className="text-4xl text-pinkrose">₹{store.price}</span>
<span className="text-gray-500 line-through ml-2">₹{store.originalPrice}</span>
</div>
<span className="text-darkgray text-sm">+ ₹100 Shipping</span>
</div>
</div>
<span className="text-xs font-bold mt-3 lg:mt-5 p-1 text-darkgray">Select Variant</span>
<div className="variants flex flex-row items-center text-darkgray">
<div>
<input className="variant hidden" type="radio" name="variant" value="variant1" id="variant1" onChange={this.handleVariantChange} defaultChecked></input>
<label htmlFor="variant1">
<span className="text-xs border border-pinkrose p-1 mr-2 rounded cursor-pointer">With Kit</span>
</label>
</div>
<div>
<input className="variant hidden" type="radio" name="variant" value="variant2" id="variant2" onChange={this.handleVariantChange}></input>
<label htmlFor="variant2">
<span className="text-xs border border-pinkrose p-1 mr-2 rounded cursor-pointer">Without Kit</span>
</label>
</div>
</div>
</div>
<div className="flex flex-row lg:flex-col items-center justify-between lg:justify-center mt-5 lg:mt-0" style={{ flexGrow: 1 }}>
<button className="text-white bg-pinkrose hover:bg-lavander hover:shadow-none p-3 rounded mb-3 shadow-lg w-full lg:w-48 mr-2 lg:mr-0">Add to Cart</button>
<button className="text-white bg-pinkrose hover:bg-lavander hover:shadow-none p-3 rounded mb-3 shadow-lg w-full lg:w-48 ml-2 lg:ml-0">Buy Now</button>
</div>
</div>
<div className="flex flex-col mt-5 text-darkgray">
<span className="text-xs font-bold p-1">Description</span>
<p className="p-1 text-sm">This is a beautiful netted cotton saree, with patch work along the zari embedded with beautiful gold and silver stone work. Comes with a contast blouse. The suggested designs below work really well with the saree.</p>
</div>
</div>
</div>
<div className="text-darkgray p-5 pt-0 flex flex-col lg:flex-row">
{/* SPECS PANE */}
<div style={{ flexBasis: 0, flexGrow: 3 }}>
<span className="text-xs font-bold p-1">Specifications</span>
<table className="border border-gray-400 border-collapse w-full mt-5">
<thead>
<tr>
<th className="p-1 border-b border-gray-400 text-left text-sm bg-gray-200">Specification</th>
<th className="p-1 border-b border-gray-400 text-left text-sm">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td className="p-1 text-sm bg-gray-200">Length</td>
<td className="p-1 text-sm">8 Yards</td>
</tr>
<tr>
<td className="p-1 text-sm bg-gray-200">Cloth Type</td>
<td className="p-1 text-sm">Netted Cotton</td>
</tr>
</tbody>
</table>
</div>
{/* REVIEWS PANE */}
<div className="mt-5 lg:p-5 lg:pt-0 lg:mt-0" style={{ flexBasis: 0, flexGrow: 4 }}>
<span className="text-xs font-bold p-1">Reviews</span>
<div className="flex flex-row py-5 items-start border-b border-gray-400">
<div className="flex flex-col items-center">
<img src="https://i.pravatar.cc/300" className="w-10 h-10 rounded-full" />
</div>
<div className="flex flex-col px-3 flex-grow">
<span className="font-bold text-sm">Write Your Review</span>
<span className="text-xs">John Doe</span>
<input placeholder="Review Title" className="rounded bg-gray-200 text-sm mt-3 p-2"/>
<textarea placeholder="Write your Review here" className="rounded bg-gray-200 text-sm mt-3 p-2" rows="3"/>
<button className="rounded shadow-lg bg-pinkrose text-white px-2 py-1 w-1/3 lg:w-1/5 mt-3">Submit</button>
</div>
</div>
<div className="flex flex-row py-5 items-start border-b border-gray-400">
<div className="flex flex-col items-center">
<img src="https://i.pravatar.cc/300" className="w-10 h-10 rounded-full" />
<span className="px-2 mt-2 rounded bg-sunflower font-bold text-white text-sm">3.5 ★</span>
</div>
<div className="flex flex-col px-3">
<span className="font-bold text-sm">Awesome Saree, Thoroughly Enjoyed Wearing It.</span>
<span className="text-xs">John Doe</span>
<p className="text-sm mt-1">
This was a great saree. I gifted it to myself on my birthday. Prompt Delivery and Great Collection.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
Found the problem. The CSS in JS was the problem. With Tailwind's flex-col and this, safari shrunk the content to fit it. Hence the overlap. Removed CSS in JS and moved it to a Sass file with media queries and loaded them with next-sass.
<div style={{ flexBasis: 0, flexGrow: 3 }}>
...
</div>
<div style={{ flexBasis: 0, flexGrow: 4 }}>
...
</div>
Totally my fault.