I have a collection of images that appear as cards. The cards have text below them. I am trying to hide the text and show the image only using tailwind v2 with no luck.
My code :
<div class="group max-w-sm bg-white m-4 rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img class="rounded-t-lg w-full h-64 object-cover" src="images/care.webp" alt="" />
</a>
<div class="p-1 visible group-hover:invisible">
<p class="visible group-hover:invisible text-center mb-3 font-normal text-gray-700 dark:text-gray-400">CARE</p>
</a>
</div>
</div>
<!-- end of card -->
<!-- Card -->
<div class="group max-w-sm bg-white m-4 rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img class="rounded-t-lg w-full h-64 object-cover" src="images/kindness.jpg" alt="" />
</a>
<div class="p-1 invisible group-hover:visible">
<p class="invisible group-hover:visible text-center mb-3 font-normal text-gray-700 dark:text-gray-400">KINDNESS</p>
</a>
</div>
</div>
Any recommendations/advise on what i am doing wrong will be appreciated.
I have referenced documentation and stackoverflow with no luck
in your documentation link at the end there is such a code
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
visibility: ['hover', 'focus'],
}
}
}
so you have to add these parameters to your tailwind.config.js to make it work
and use these classes visible hover:invisible
Related
I have added images on my page using tailwinds but on mobile, the image still appears to be bigger than I want.
My code below:
<script src="https://cdn.tailwindcss.com"></script>
<div class="max-w-md mx-auto bg-white hover:bg-gray-200 py-3 px-6 border-b border-gray-300 overflow-hidden md:max-w-2xl">
<div class="flex">
<div class="md:shrink-0">
<img class="h-40 w-full scale-75 object-cover md:h-full md:w-48" src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="Man looking at item at a store">
</div>
<div class="p-4">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-light">Course</div>
How to Organize Your Time and Your Life
<p class="mt-2 ">By: Pete Mockaitis | How to Be Awesome at Your Job</p>
<span class="text-sm text-slate-500">134,768 Viewers. Released Jun 19, 2022</span>
</div>
</div>
</div>
What I get
What I want
I think the best way to make a website responsive is by using display: grid;>. I think this solves your problem:
<script src="https://cdn.tailwindcss.com"></script>
<div class="max-w-md mx-auto bg-white hover:bg-gray-200 py-3 px-6 border-b border-gray-300 overflow-hidden md:max-w-2xl grid grid-cols-3 gap-4">
<img class="h-30 w-full col-span-1 object-cover md:h-full md:w-48" src="https://images.unsplash.com/photo-1488998427799-e3362cec87c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="Man looking at item at a store">
<div class="col-span-2">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-light">Course</div>
How to Organize Your Time and Your Life
<p class="mt-2 ">By: Pete Mockaitis | How to Be Awesome at Your Job</p>
<span class="text-sm text-slate-500">134,768 Viewers. Released Jun 19, 2022</span>
</div>
</div>
In short, my problem is this:
I'm using TailWind on Laravel, I can't get the text inside the border to fit the whole div he's in, and it's weirdly centered this way where the amount of characters per line is limited
I tried many approaches like changing and trying different values of padding and margin but I was unsuccessful, it only makes the div bigger but the text is still awfully centered and limited.
the code portion is as follows:
<div class="mx-4">
<x-card class="p-10">
<div
class="flex flex-col items-center justify-center text-center"
>
<img
class="w-48 mr-6 mb-6"
src="{{$album->logo? asset('storage/'.$album->logo) : asset('/images/noalbum.png')}}"
alt=""
/>
<h3 class="text-2xl mb-2">{{$album->title}}</h3>
<div class="text-xl font-bold mb-4">{{$album->artist}}</div>
<x-insidetags :tagscsv="$album->tags"/>
<div class=" w-full mb-6 mt-5">
<h3 class="text-3xl font-bold">
About the album
</h3>
</div>
<div>
<div class="flex">
<div class="px-20 text-lg border border-black text-left">
<h3 class="font-bold">Track List :</h3>
#foreach($tracks as $track)
<p>- {{$track}}</p>
#endforeach
</div>
<div class="text-lg space-y-6 ml-10">
<div class="text-left py-10">
{{$album->description}}
</div>
<a
href="{{$album->website}}"
target="_blank"
class=" bg-black text-laravel mt-16 py-2 px-10 rounded-xl hover:opacity-80"
><i class="fa-solid fa-globe"></i> Visit RateYourMusic page</a
>
</div>
</div>
</div>
</div>
For refrence I'm trying to create something like this, but only with the name of the tracks for the moment
I figured it out, added flex 1 1 0% and flex 4 1 0% to the two divs
<div class=" text-lg shadow-xl text-left flex-1 h-fit p-5">
<h3 class="font-bold">Track List :</h3>
#foreach($tracks as $track)
<p>- {{$track}}</p>
#endforeach
</div>
<div class="text-lg ml-10 flex-[4_1_0%]">
<div class="text-left py-10">
{{$album->description}}
</div>
<a
href="{{$album->website}}"
target="_blank"
class=" bg-black text-laravel mt-16 py-2 px-10 rounded-xl hover:opacity-80"
><i class="fa-solid fa-globe"></i> Visit RateYourMusic page</a
>
</div>
I'm using tailwindcss. I have a flexbox container and a login button inside it.
The button looks like it's being stretched.
<nav font-am class="m-6 text-xl">
<div class="flex flex-row justify-between container">
<div>
<img src="./img/Logo.png">
</div>
<div class="flex flex-row">
<img src="./img/AccountLog.png">
<p class="hidden md:flex">My Account</p>
</div>
<div class="flex flex-row">
<img src="./img/love_symbol.png">
<p class="hidden md:flex">My List</p>
</div>
<div class="flex box-border flex-row">
<img src="./img/LockLogo.png">
<button class="bg-darkPink hover:underline text-white font-bold py-2 px-4 rounded-full" role="button">Sign In</button>
</div>
</div>
</nav>
Here is how it looks with the logo:
And the button is displayed normally when I delete the logo:
What should I do to keep the button looks normal when the logo is on. Is the logo taking up too much space or something?
You've set your button as a stretched flex element in a flex row. You can do one of several things to fix it:
Align the row elements to center rather than stretching them. Here, '.self-center` seems to work nicely, though you could do it at the row level also.
Wrap the button in a div. This will make the div the stretched element, and you'll need to center the button vertically with other styles.
Both solutions are shown here.
.bg-darkPink {
background: pink;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav font-am class="m-6 text-xl">
<div class="flex flex-row justify-between container">
<div class="flex box-border flex-row">
<img src="https://via.placeholder.com/80">
<button class="bg-darkPink hover:underline text-white_disabled font-bold
py-2 px-4 rounded-full self-center">Flex class</button>
</div>
<div class="flex box-border flex-row">
<img src="https://via.placeholder.com/80">
<div class="flex flex-column items-center">
<button class="bg-darkPink hover:underline text-white_disabled font-bold
py-2 px-4 rounded-full">Flex div</button>
</div>
</div>
</div>
</nav>
You can give the div which is the parent of the link and the button the tailwind classes grow-0 and shrink-0 to prevent it from changing shape. Set items-center to align the lock icon vertically with the button.
Don't let the logo disappear with display:none, do it with opacity:0
I'm using tailwindcss inn reactjs which has div element divided into two parts, one is 9-12 and the second is 3-12. The 9-12 part is overlapping navbar one element and I'm able to click that element, but the 3-12 part overlaps 3 elements i.e. Experinece, Projet and Contact in navbar, which is not clickable.
Here's the code for navbar section:
<nav className="bg-gray-900 fixed w-full">
<div className="max-w-7xl mx-auto px-8">
<div className="flex items-center justify-between h-24">
<div className="w-full justify-between flex items-center">
<a className="flex-shrink-0" href="/">
<img
className="h-20 w-20 mt-4"
src={logo}
alt="Pradeep Anand"
/>
</a>
<div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4">
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
About
</a>
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-delay="100"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
Experience
</a>
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-delay="200"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
Project
</a>
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-delay="300"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
Contact
</a>
</div>
</div>
</div>
<div className="block">
<div className="ml-4 flex items-center md:ml-6"></div>
</div>
<div className="-mr-2 flex md:hidden">
<button className="text-gray-800 dark:text-white hover:text-gray-300 inline-flex items-center justify-center p-2 rounded-md focus:outline-none">
<svg
width="20"
height="20"
fill="currentColor"
className="h-8 w-8"
viewBox="0 0 1792 1792"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"></path>
</svg>
</button>
</div>
</div>
</div>
</nav>
Here's the code for another component:
<div className="flex px-48 flex-wrap">
<div className="w-9/12 pt-32 pb-10">
<h2
className="text-2xl text-pink-600 intro"
data-aos="fade-up"
data-aos-delay="300"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
>
Hi, my name is
</h2>
<br />
<h1
className="text-8xl"
data-aos="fade-up"
data-aos-delay="500"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
>
Pradeep
<br />
Anand
</h1>
<div
className="w-16 h-2 bg-pink-800 mt-3"
data-aos="fade-right"
data-aos-delay="300"
data-aos-anchor-placement="top-bottom"
/>
<button
className="my-28 px-6 py-4 transition ease-in duration-200 uppercase rounded-md hover:bg-pink-800 hover:bg-opacity-30 hover:text-white border-2 border-pink-900 focus:outline-none"
data-aos="fade-up"
data-aos-delay="500"
data-aos-duration="1000"
data-aos-anchor-placement="top-bottom"
>
Get In Touch
</button>
</div>
<div
className="w-3/12 pt-48"
data-aos="fade-left"
data-aos-delay="800"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
>
<h3 className="text-sm text-pink-800 font-bold intro">
Introduction
</h3>
<h4 className="text-4xl py-4">
Software Developer by Profession. Web Dev by passion.
</h4>
<p>I'm a software engineer from India. I make things for web.</p>
</div>
</div>
please provide z-index to the nav bar to avoid this . since it has position fixed property
I have a web app I'm building out in Rails 5, Ruby 2.4. Im using Tailwindcss as my design framework.
I have a hero image (below) in which I'm using a tailwind like alert as a banner to advertise a new web store for merch. It sits exactly where I want it to im the hero, however on page scroll it floats over my fixed nav, and in mobile view with the nav menu dropped down it floats overtop of it blocking the nav view.
Im not too sure how to fix this so it sits behind the nav and dosnt obstruct the nav functionality.
link to site for viewing
Loadlead website
my hero image code:
<div class="flex flex-wrap sm:block bg-transparent" id="header-hero">
<div class="container mx-auto">
/* BANNER THATS CAUSING ISSUES */
<div class="bg-transparent text-center py-4 lg:px-4">
<div class="p-2 bg-load-lead-green items-center text-white leading-none lg:rounded-full flex lg:inline-flex opacity-75 border-b-4 border-black md:mt-8">
<span class="flex rounded-full bg-blue uppercase px-2 py-1 text-xs font-bold mr-3 border-b-2 border-black">New</span>
<span class="font-semibold mr-2 text-left flex-auto">Pre-order LoadLead gear in our new web store</span>
<svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/></svg>
</div>
</div>
/* END BANNER */
<div class="flex py-8 px-4 sm:px-8">
<div class="w-full py-8">
<p class="text-4xl text-black font-sans font-bold mb-1">Trucking. Simplified</p>
<p class="text-xl text-black sm:text-lg mb-6 font-sans font-semibold">Minimize your trucks downtime & keep your loads moving!</p>
<a class="bg-blue text-white no-underline uppercase text-sm px-4 py-2 rounded-full font-bold hover:bg-blue border border-b-4 border-black hover:border-transparent cursor-not-allowed" href="/#">Take a Tour</a>
<a class="bg-load-lead-green text-white no-underline uppercase text-sm px-4 py-2 rounded-full font-bold hover:bg-load-lead-green border border-b-4 border-black hover:border-transparent cursor-not-allowed" href="/#">Join the Community</a>
</div>
</div>
</div>
</div>
Any help here would be greatly appreciated!
You need to have your hero as relative and the banner as absolute positions.