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.
Related
In my web project, I'm trying to reproduce the following card:
When the Card is not active it is characterized by the fact that the image is always in the center even though the title has a dynamic height, and when its active (i.e it has the blue background) I don't want to change the height of the card but just to push the image up a little bit to add that extra space where the new round arrow button will appear and I'm completely unable to make this happen.
I'm using tailwind in a Nextjs project but plain and simple html and css would also be fine.
You could use flexbox to align the content to the bottom of the card and give the text a fixed height when inactive to keep it at the same position regardless of whether it spans one or two lines.
To move everything up for the arrow you could render an arrow element below the text when he card is active and it would automatically push everything up. You could remove the fixed height of the text when active so there is no gap between the text and arrow. I have created an example here https://play.tailwindcss.com/7h1IY8alDQ.
Here is the code:
<div class="flex h-screen space-x-4 bg-blue-100 p-6">
<!-- card 1 -->
<div class="group flex h-32 w-32 flex-col items-center justify-end space-y-2 rounded-lg border-4 border-white bg-white p-2 hover:border-[#5691C3] hover:bg-[#80B2D5]">
<!-- icon -->
<div class="h-10 w-10 bg-gray-300 group-hover:bg-white"></div>
<!-- title -->
<p class="h-8 text-center text-xs text-black group-hover:h-auto group-hover:text-white group-hover:underline">Motor</p>
<!-- arrow -->
<div class="relative hidden h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 border-white text-sm group-hover:flex"></div>
</div>
<!-- card 2 -->
<div class="group flex h-32 w-32 flex-col items-center justify-end space-y-2 rounded-lg border-4 border-white bg-white p-2 hover:border-[#5691C3] hover:bg-[#80B2D5]">
<!-- icon -->
<div class="h-10 w-10 bg-gray-300 group-hover:bg-white"></div>
<!-- title -->
<p class="h-8 text-center text-xs text-black group-hover:h-auto group-hover:text-white group-hover:underline">Workmen Compensation</p>
<!-- arrow -->
<div class="relative hidden h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 border-white text-sm group-hover:flex"></div>
</div>
</div>
I have following sample, written in tailwind css:
https://play.tailwindcss.com/f9iOK1e0oM
I want to have my control buttons on the bottom if the grid containers, however, they have different content sizes for the blue "tag" boxes, so the grid gets increased in height by some containers. however, as I am working with grid, all boxes are getting this height then. this is ok. But my control buttons should be always on the bottom of the containers, so that "Enabled" and "Delete" should not be so far away from bottom for the second container.
How to achieve this?
You need to add flex flex-col to the li element. And grow to the first child div and grow-0 max-h-max to the second child div.
<li class="flex flex-col col-span-1 divide-y divide-gray-200 rounded-lg bg-white shadow">
<div class=" grow flex w-full flex-col items-start justify-between p-6">
<div class="flex w-full items-start justify-between space-x-3">
<h3 class="truncate text-sm font-medium text-gray-900">243rfh83294d-23r8fj2n48r-24fi43bf</h3>
<span class="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"> running </span>
</div>
<p class="mt-1 whitespace-pre-wrap text-xs font-bold text-gray-500">Interval: <span class="font-normal">1234</span></p>
<p class="mt-1 whitespace-pre-wrap text-xs font-bold text-gray-500">Next run: <span class="font-normal">1234</span></p>
<p class="mt-1 whitespace-pre-wrap">
<span class="inline-block flex-shrink-0 rounded-full bg-blue-100 px-2 py-0.5 text-xs text-blue-800">test 1</span>
</p>
</div>
<div>
<div class="-mt-px flex shrink-0 grow-0 divide-x divide-gray-200 max-h-max">
<div class="flex w-0 flex-1">
<button class="relative -mr-px inline-flex w-0 flex-1 items-center justify-center rounded-bl-lg border border-transparent py-4 text-sm font-medium text-gray-700 hover:text-gray-500">
<span class="ml-3">Enabled</span>
</button>
</div>
<div class="-ml-px flex w-0 flex-1">
<button class="group relative inline-flex w-0 flex-1 items-center justify-center rounded-br-lg border border-transparent py-4 text-sm font-medium text-gray-700 transition hover:text-red-500">
<span class="ml-3">Delete</span>
</button>
</div>
</div>
</div>
</li>
https://play.tailwindcss.com/ilTMM5glku
I have done this only for the second card, but you should do it for all cards. So that when the content changes, the button row will always stick to the bottom and keep the same height in all cards.
Hope this helps.
instead of the "..." in the end of the title in mobile view how do I get to break the line so that the entire title is visible.
i have tried applying span but it doesn't work either. please help.
<div class="bg-indigo-700 px-4 py-5 border-b rounded-t sm:px-6">
<h3 class="text-lg leading-6 font-medium text-white">
Choose the clip you want and download.
</h3>
</div>
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<ul class="divide-y divide-gray-200">
{%for links in url_dict:%}
<li>
<a class="block hover:bg-gray-50">
<div class="px-4 py-4 sm:px-6">
<div class="flex items-center justify-between">
<!-------------------------------------------TITLE OF THE VIDEO--------------------------->
<h3 class="text-sm font-thin text-gray-700 truncate">
<a href='{{links}}'>{{url_dict[links][0]}}</a>
</h3>
<!----------------------------------------DOWNLOAD BUTTON---------------------------------->
<div class="ml-2 flex-shrink-0 flex">
<p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 hover:bg-green-200 text-green-800 hover:text-green-700">
Download
</p>
</div>
</div>
<div class="mt-2 sm:flex sm:justify-between">
<div class="sm:flex">
<p class="flex items-center text-sm font-light text-gray-500">
length: {{url_dict[links][1]}}
</p>
</div>
</div>
</div>
</a>
</li>
{% endfor %}
</ul>
<button type="button" class="inline-flex items-center m-4 px-4 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
View more
</button>
</div>
You need to remove the truncate class from the <h3> element in the mobile view.
Use md: to indicate that truncate class is applicable only on medium and large screens
<!-------------------------------------------TITLE OF THE VIDEO--------------------------->
<h3 class="text-sm font-thin text-gray-700 md:truncate">
<a href='{{links}}'>{{url_dict[links][0]}}</a>
</h3>
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'd like to create a dropdown-menu using tailwindcss. The menu is supposed to have the width w-3/5 and it should be right centered under it's parent menu element.
I created a codepen to demonstrate this: https://codepen.io/spqrinc/pen/Exjympz
This is the snippet:
<div class="group">
<div class="lg:relative w-full">
<button class="mt-1 block px-2 py-4 text-white font-semibold rounded-sm hover:bg-gray-700 md:mt-0 md:ml-2 inline-flex items-center justify-between w-full">
<span class="mr-24">Test</span>
</button>
</div>
<ul class="lg:absolute m-1 mt-4 w-3/5">
<div class="bg-gray-500 text-white w-full px-2 pt-2 pb-4 group-hover">
<li class="">
<a
class="block px-2 py-4 text-white font-semibold rounded-sm hover:bg-gray-700"
href="#">One</a>
</li>
<li class="">
<a class="block px-2 py-4 text-white font-semibold rounded-sm hover:bg-gray-700"
href="#">Two</a>
</li>
<li class="">
<a
class="block px-2 py-4 text-white font-semibold rounded-sm hover:bg-gray-700"
href="#">Three</a>
</li>
</div>
</ul>
</div>
As you can see, the submenu is visible, but it's not centered under it's parent element. A lot of it's width is not visible.
Of course I could do something like left-0 or right-0, but in this case menu elements that are centered in the navbar don't have their menu centered, too. So the submenu should always be centered if possible.
So my question is: How can I get this working as in this little sketch?
Here is how I have setup differently aligned drop downs:
https://codepen.io/forloops/pen/QWpKELQ
The key differences between each is:
left class: left-0
center classes: md:left-1/2 md:-translate-x-1/2
right class: right-0
You can find these classes on the element that has: data-ref='check this element class'
Please note: This example uses AlpineJS along with Tailwind CSS v2