I'm trying to fit an iframe inside a div using tailwind, but I cannot figure out how to make the iframe responsive.
What kind of class do I need to use to make for example the following to work?
<div class="min-h-screen bg-gray-50 py-6 flex flex-col justify-center relative overflow-hidden sm:py-12">
<img src="/img/beams.jpg" alt="" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-none" width="1308" />
<div class="absolute inset-0 bg-[url(/img/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
<div class="relative px-6 pt-10 pb-8 bg-white shadow-xl ring-1 ring-gray-900/5 sm:max-w-lg sm:mx-auto sm:rounded-lg sm:px-10">
<iframe src="https://www.geogebra.org/calculator/zsnkxfmw?embed" width="800" height="600" allowfullscreen="" style="border: 1px solid #e4e4e4;border-radius: 4px;" frameborder="0"></iframe>
</div>
</div>
There is a official plugin https://github.com/tailwindlabs/tailwindcss-aspect-ratio
// tailwind.config.js
module.exports = {
theme: {
// ...
},
corePlugins: {
aspectRatio: false,
},
plugins: [
require('#tailwindcss/aspect-ratio'),
// ...
],
}
Or You Can Refer To https://tailwindcss.com/docs/aspect-ratio
Related
I am trying to create a custom table as per the design and I am using Tailwind CSS for styling. I initially used table tags in HTML, but I was unable to style it properly, so I switched to using divs. However, I am facing an issue with the width size of the table head and row. The width is not consistent due to the content of the cells, can anyone please help me in resolving this issue?
Design:
What I get using div instead of table tags:
code:
<div className="flex flex-col">
<div className='flex text-sm font-bold text-gray-500'>
<div className='w-[170px] mr-2'>ລູກຄ້າ</div>
<div className='w-[140px] mr-2'>ປະກັນໄພ</div>
<div className='w-[120px] mr-2'>ບໍລິສັດ</div>
<div className='w-[90px]'>ວັນທີເລີ່ມຕົ້ນ</div>
<div className='w-[90px]'>ວັນທີສິ້ນສຸດ</div>
<div className='w-[90px]'>ສະຖານະ</div>
<div className='flex-1'>ຄ່າທຳນຽມ</div>
<div className='w-[170px]'></div>
</div>
</div>
<hr />
<div className='max-h-[700px] overflow-y-scroll shadow-sm insuranceReport rounded-b bg-white'>
{
orders?.map((order, index)=>(
<div key={index} className={`flex items-center px-5 ${index%2 == 0 ? 'bg-[#F5FCF5]' : 'bg-[#FFFFFF]'} py-4 text-sm hover:opacity-80`}>
<div className='w-[170px] flex items-center mr-2 font-sans text-sm'>
<div className="w-[2.3rem] h-[2.3rem] mr-2 rounded-full overflow-hidden aspect-square">
<img
src={
GetImageUrl(order?.profile, true)
}
alt={order?.name}
className="object-cover w-full h-full"
onError={({ currentTarget }) => {
currentTarget.onerror = null; // prevents looping
currentTarget.src= IMAGE_NOT_FOUND;
}}
/>
</div>
<div className='flex flex-col'>
<Link className='cursor-pointer hover:underline' to={`/sale/${order?.uuid}`}>
<span>{order?.customer?.name}</span>
</Link>
<span className='text-sm opacity-80'>{order?.customer?.gender}</span>
</div>
</div>
<div className='w-[140px] mr-2 text-sm'>{order?.product}</div>
<div className='w-[120px] mr-2 text-sm'>{order?.company}</div>
<div className='w-[90px] text-sm'>{FormatDate(order?.dateStart)}</div>
<div className='w-[90px] text-sm'>{FormatDate(order?.dateEnd)}</div>
<div className='w-[90px] text-sm'><span className={SaleStatusChecker(order?.status)?.color}>{SaleStatusChecker(order?.status)?.status}</span></div>
<div className='flex-1 text-sm'>₭ {order?.totalPrice?.toLocaleString()}</div>
<div className='flex items-start gap-3 text-sm'>
<button className='px-3 py-1 border-2 rounded-lg outline-none active:opacity-50 text-primary' onClick={()=>navigate(`/sale/${order?.uuid}`)}><FontAwesomeIcon icon={faEye}/> ລາຍລະອຽດ</button>
<button className='px-3 py-1 border-2 rounded-lg outline-none active:opacity-50 text-primary' onClick={()=>handleOpenOrderUpdateModal(order?.uuid)}><FontAwesomeIcon icon={faPenToSquare}/> ແກ້ໄຂ</button>
</div>
</div>
))
}
{
(orders?.length == 0 || orders == undefined || orders == []) && !isFetching ? <Empty/> : ""
}
{
isFetching &&
<LoadingData/>
}
</div>
</div>
I don't want to use flex and set a static width size of the div element. Is there any alternative solution to this issue?
Thank you in advance for your help!
I'm working on this website that is built on React Js and Tailwind. I've made it completely responsive and everything is in working condition however, sometimes when i try to open it in responsive mode on my browser it shows up zoomed in. If i try to exit and enter responsive mode one or two times, it works as intended with no space to move right or left on the webpage. When opening the website on mobile phone however, it shows up zoomed in. It's been two days and i cant get it to work. Phone Display. This is how the site looks like when it's working after entering and exiting responsive mode a couple times. Responsive on Browser. This is how the browser looks like when i try to run it in responsive mode when the bug appears Bad Browser Display
const ComponentCaller = () => { return (
<div className="flex md:min-w-full sm:max-w-screen">
//min-w-[80px] is to create an empty div to leave space for the sidebar
<div className="min-w-[80px] bg-transparent"></div>
<div>
{/*
<div className="bg-one bg-opacity-80 w-screen h-screen -z-50"> */}
<FrontComponent /> {/*
<TestComponent /> */}
<HustleComponent />
<HoverTableComponent />
<AboutUsComponent />
<Contact />
<Footer />
</div>
</div>
) }
This displays all the components
const FrontComponent = () => { return (
<>
<div className="font-body font-extrabold">
<div className="h-full w-full flex flex-col md:flex-row text-lite">
//80 vh height fixed
<div className="flex flex-col justify-center items-center h-[80vh] md:pr-0 sm:pr-6">
<h1 className="font-head text-8xl mr-2 md:pl-12 text-lite leading-tight">
Sample Text
</h1>
<br />
<div className="uppercase text-lite flex flex-col md:flex-row text-lg mt-8 w-max">
<button className="style-1 mt-4 ss:mt-6 rounded-tr-2xl md:mx-4 inline-flex text-base justify-center align-middle w-72 md:w-36 lg:w-48 lg:h-16 h-12">
Get a Quote
<svg
className="fill-lite w-[15px] mx-2 animate-pulse"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z" />
</svg>
</button>
<button className="style-1 mt-4 md:mx-4 rounded-tr-2xl inline-flex text-base justify-center align-middle w-72 md:w-36 lg:w-48 lg:h-16 h-12">
Join our Team
</button>
</div>
</div>
<div className="w-[42rem] md:mr-4 ml-16 lg:max-w-[45%] md:w-3/5 md:py-8 my-12 text-center relative grid justify-items-center items-center">
<img src={business} alt='business' />
</div>
</div>
</div>
</> ) }
i use tailwind-css for styling my components in Nuxtjs
and my components .
and this is my style classes
.ccard {
#apply bg-white px-2 py-10;
&-header {
#apply relative;
&-btn {
#apply btn btn-circle btn-sm btn-primary px-0 border-0;
}
&-img {
// width: 100%;
// height: 100%;
#apply object-cover w-full;
}
}
&-detail {
#apply text-center pt-2 px-1;
&-cat {
#apply text-sm text-gray-400 mb-2;
}
&-title {
#apply text-lg font-semibold;
}
}
}
and this is my component template
<template>
<div class="ccard">
<div class="ccard-header">
<button class="ccard-header-btn">
<magnify />
</button>
<img :src="data.src" class="ccard-header-img" alt="" />
</div>
<div class="ccard-detail">
<div class="ccard-detail-cat">{{ data.cat }}</div>
<div class="ccard-detail-title">{{ data.title }}</div>
</div>
</div>
</template>
and this is result
i expect the button to be a circle BUT it is not !
i got inspect and it inhertited a min-height from some-where i dont know where it is .
and i think in tailwind child tags inherit their parent tags classes and i think this is not good .
how can i disable heritance in tailwind-css
I think the inheritance in 'tailwind-css' isn't your problem. I have two answers to this question:
1)you have to check to magnify inside the btn, maybe it has a little x-margin or x-padding
2)you have to set specific width and height (w-10 h-10) classes in the icon.
look at this code:
<button class="bg-green-400 rounded-full">
<img class="w-10 h-10 p-2" src="https://img.icons8.com/ios-glyphs/30/000000/search--v1.png"/>
</button>
On my react project i want align my components to vertical. But when i use div and make it flex , my component width is changing and looking bad. what should i do ? I using tailwindcss but if you dont know it you can tell normal css too. I can use normal css too. My component :
<div className="">
<div className="mt-6 ml-5 bg-gray-50 border rounded-lg border-gray-200 shadow-md w-3/12 h-full mb-10">
<div className="flex mt-2">
<div className="border border-gray-500 ml-2 mt-2 pl-1 pr-1 pt-2 ">
<FontAwesomeIcon icon={faEtsy} className="text-2xl text-red-600" />
</div>
<div className="relative">
<span className="ml-3 pt-2 relative text-xl font-medium">
{prop.PharmacyName}
</span>
<br />
<span className="ml-4 text-blue-800">{prop.PharmacyNumber}</span>
</div>
</div>
<Divider />
<div className="">
<p className="px-2 py-1 font-medium text-base text-gray-700">
{prop.PharmacyAdress}
</p>
</div>
</div>
</div>
How i calling my component :
data.map((x, index) => {
return (
<div className="flex align-center">
<PharmacyCard className="relative" key={index} props={x} />
</div> )})
How its looks like : https://prnt.sc/1covi9m
How i want : https://prnt.sc/1cow1sq
I using that component like 30-40 times with mapping. So i want to see like 3 component in a row. Thanks for all replies!
So i want to see like 3 component in a row.
Since you have clear idea about the layout, I suggest to wrap you components in another div with grid and three columns; something like this:
<div className="grid grid-cols-3">
{data.map((x, index)=>{<PharmacyCard className="relative" key={index} props={x} />})}
</div>
Depending on your design, you may add gap class as well.
Also consider removing w-3/12 class from components so they fill grid's width.
You just need to put the .flex in upper level like the below:
<div className='flex align-center'>
{data.map((x, index)=>{<PharmacyCard className="relative" key={index} props={x} />})}</div>
hope this link will assist you to get the flexbox better
https://codepen.io/enxaneta/full/adLPwv
I build a layout for a series of team portraits using React and Tailwind:
{/* Portrait list */}
<div className="max-w-sm mx-auto md:max-w-none">
{/* Portrait container */}
<div className="grid gap-12 md:grid-cols-3 md:gap-x-6 md:gap-y-8 items-start">
{/* 1st Portrait */}
<article className="flex flex-col h-full" data-aos="fade-up">
<header>
<Link to="/blog-post" className="block mb-6">
<figure className="relative h-0 pb-9/16 rounded-sm">
<img className="absolute inset-0 w-full h-full object-cover transform hover:scale-105 transition duration-700 ease-out" src={require('../images/john_doe.png').default} width="416" height="582" alt="News 01" />
</figure>
</Link>
<h3 className="h4 mb-2">
<Link to="/blog-post" className="hover:text-gray-100 transition duration-150 ease-in-out">John Doe</Link>
</h3>
</header>
<p className="text-lg text-gray-400 flex-grow">Head of Operations </p>
</article>
*/}
{/* 2nd portrait */} ...
The layout turns out exactly as intended:
After switching the hardcoded elements into a single data-driven component called 'TeamTile' , the layout is no longer applied. While the data is passed correctly into the component and every piece of information is present, all portraits are now shown below each other on every device: Why is this?
{/* Portrait list */}
<div className="max-w-sm mx-auto md:max-w-none">
{/* Portrait container */}
<div className="grid gap-12 md:grid-cols-3 md:gap-x-6 md:gap-y-8 items-start">
<TeamTile />
</div>
</div>
The element is constructed as follows, replicating the hard coded setup
using <article className="flex-col flex h-full" data-aos="fade-up"> exactly as before to apply the layout:
function TeamTile() {
return (
<div>
{TeamData.map((item, index) => {
return (
<article className="flex-col flex h-full" data-aos="fade-up">
<header>
<Link to={item.link} className="block mb-6">
<figure className=" rounded-sm">
<ProgressiveImage
delay={1000}
src={item.portrait}
placeholder={item.placeholder}
>
{(src, loading) => (
<img
className="inset-0 object-cover transform hover:scale-105 transition duration-700 ease-out"
style={{ opacity: loading ? 0.5 : 1 }}
src={item.portrait}
alt={item.alt}
/>
)}
</ProgressiveImage>
</figure>
</Link>
</header>
<div>
<h3 className="h4 mb-2">{item.name}</h3>
<p className="text-lg text-gray-500 flex-grow">{item.title}</p>
</div>
</article>
);
})}
</div>
);
}
export default TeamTile;
Where is my mistake?
because you wrapped your article tag with div you must remove div tag.
function TeamTile() {
return (
<>
{TeamData.map((item, index) => {
return (
<article className="flex-col flex h-full" data-aos="fade-up">
<header>
<Link to={item.link} className="block mb-6">
<figure className=" rounded-sm">
<ProgressiveImage
delay={1000}
src={item.portrait}
placeholder={item.placeholder}
>
{(src, loading) => (
<img
className="inset-0 object-cover transform hover:scale-105 transition duration-700 ease-out"
style={{ opacity: loading ? 0.5 : 1 }}
src={item.portrait}
alt={item.alt}
/>
)}
</ProgressiveImage>
</figure>
</Link>
</header>
<div>
<h3 className="h4 mb-2">{item.name}</h3>
<p className="text-lg text-gray-500 flex-grow">{item.title}</p>
</div>
</article>
);
})}
</>
);
}