How do I make my design fit the viewport? - css
Why is h-screen not working on my design? I want the card to fit the viewport elegantly. I need the space between divs to be equal. I don't need the negative space at the bottom on iPhone 8. Right now the only device that works fine here is the iPhone 6.
<div class="h-screen">
<img class="w-full h-56 object-cover object-center" :src="coverUrl" alt="cover image">
<div class="flex items-center p-5 ">
<img :src="avatarUrl" alt="avatar image" class="h-24 rounded-full border-solid border-white border-2 -mt-10">
<h1 class="ml-2 text-2xl font-semibold text-gray-800">Simon Schillingen</h1>
</div>
<div class="flex items-center px-6 py-3 bg-gray-900">
<svg class="h-6 w-6 text-white fill-current" viewBox="0 0 20 20">
<path d="M10,6.978c-1.666,0-3.022,1.356-3.022,3.022S8.334,13.022,10,13.022s3.022-1.356,3.022-3.022S11.666,6.978,10,6.978M10,12.267c-1.25,0-2.267-1.017-2.267-2.267c0-1.25,1.016-2.267,2.267-2.267c1.251,0,2.267,1.016,2.267,2.267C12.267,11.25,11.251,12.267,10,12.267 M18.391,9.733l-1.624-1.639C14.966,6.279,12.563,5.278,10,5.278S5.034,6.279,3.234,8.094L1.609,9.733c-0.146,0.147-0.146,0.386,0,0.533l1.625,1.639c1.8,1.815,4.203,2.816,6.766,2.816s4.966-1.001,6.767-2.816l1.624-1.639C18.536,10.119,18.536,9.881,18.391,9.733 M16.229,11.373c-1.656,1.672-3.868,2.594-6.229,2.594s-4.573-0.922-6.23-2.594L2.41,10l1.36-1.374C5.427,6.955,7.639,6.033,10,6.033s4.573,0.922,6.229,2.593L17.59,10L16.229,11.373z"></path>
</svg>
<h1 class="mx-3 text-white font-semibold text-lg">Raise $22</h1>
</div>
<div class="border-b text-xl flex pb-3 justify-center pt-5 text-grey-dark">
<div class="text-center mr-3 border-r pr-3">
<h2>Q♠</h2>
</div>
<div class="text-center">
<h2>K♠</h2>
</div>
</div>
<div class="py-4 px-6">
<div class="flex items-center mt-4 text-gray-700">
<svg class="h-6 w-6 fill-current" viewBox="0 0 20 20">
<path d="M15.573,11.624c0.568-0.478,0.947-1.219,0.947-2.019c0-1.37-1.108-2.569-2.371-2.569s-2.371,1.2-2.371,2.569c0,0.8,0.379,1.542,0.946,2.019c-0.253,0.089-0.496,0.2-0.728,0.332c-0.743-0.898-1.745-1.573-2.891-1.911c0.877-0.61,1.486-1.666,1.486-2.812c0-1.79-1.479-3.359-3.162-3.359S4.269,5.443,4.269,7.233c0,1.146,0.608,2.202,1.486,2.812c-2.454,0.725-4.252,2.998-4.252,5.685c0,0.218,0.178,0.396,0.395,0.396h16.203c0.218,0,0.396-0.178,0.396-0.396C18.497,13.831,17.273,12.216,15.573,11.624 M12.568,9.605c0-0.822,0.689-1.779,1.581-1.779s1.58,0.957,1.58,1.779s-0.688,1.779-1.58,1.779S12.568,10.427,12.568,9.605 M5.06,7.233c0-1.213,1.014-2.569,2.371-2.569c1.358,0,2.371,1.355,2.371,2.569S8.789,9.802,7.431,9.802C6.073,9.802,5.06,8.447,5.06,7.233 M2.309,15.335c0.202-2.649,2.423-4.742,5.122-4.742s4.921,2.093,5.122,4.742H2.309z M13.346,15.335c-0.067-0.997-0.382-1.928-0.882-2.732c0.502-0.271,1.075-0.429,1.686-0.429c1.828,0,3.338,1.385,3.535,3.161H13.346z"></path>
</svg>
<h1 class="px-2 text-sm">Stack: $100</h1>
</div>
<div class="flex items-center mt-4 text-gray-700">
<svg class="h-6 w-6 fill-current" viewBox="0 0 20 20">
<path d="M10,1.375c-3.17,0-5.75,2.548-5.75,5.682c0,6.685,5.259,11.276,5.483,11.469c0.152,0.132,0.382,0.132,0.534,0c0.224-0.193,5.481-4.784,5.483-11.469C15.75,3.923,13.171,1.375,10,1.375 M10,17.653c-1.064-1.024-4.929-5.127-4.929-10.596c0-2.68,2.212-4.861,4.929-4.861s4.929,2.181,4.929,4.861C14.927,12.518,11.063,16.627,10,17.653 M10,3.839c-1.815,0-3.286,1.47-3.286,3.286s1.47,3.286,3.286,3.286s3.286-1.47,3.286-3.286S11.815,3.839,10,3.839 M10,9.589c-1.359,0-2.464-1.105-2.464-2.464S8.641,4.661,10,4.661s2.464,1.105,2.464,2.464S11.359,9.589,10,9.589"></path>
</svg>
<h1 class="px-2 text-sm">Beirut, LB</h1>
</div>
<div class="flex items-center mt-4 text-gray-700">
<svg class="h-6 w-6 fill-current" viewBox="0 0 20 20">
<path d="M16.469,8.924l-2.414,2.413c-0.156,0.156-0.408,0.156-0.564,0c-0.156-0.155-0.156-0.408,0-0.563l2.414-2.414c1.175-1.175,1.175-3.087,0-4.262c-0.57-0.569-1.326-0.883-2.132-0.883s-1.562,0.313-2.132,0.883L9.227,6.511c-1.175,1.175-1.175,3.087,0,4.263c0.288,0.288,0.624,0.511,0.997,0.662c0.204,0.083,0.303,0.315,0.22,0.52c-0.171,0.422-0.643,0.17-0.52,0.22c-0.473-0.191-0.898-0.474-1.262-0.838c-1.487-1.485-1.487-3.904,0-5.391l2.414-2.413c0.72-0.72,1.678-1.117,2.696-1.117s1.976,0.396,2.696,1.117C17.955,5.02,17.955,7.438,16.469,8.924 M10.076,7.825c-0.205-0.083-0.437,0.016-0.52,0.22c-0.083,0.205,0.016,0.437,0.22,0.52c0.374,0.151,0.709,0.374,0.997,0.662c1.176,1.176,1.176,3.088,0,4.263l-2.414,2.413c-0.569,0.569-1.326,0.883-2.131,0.883s-1.562-0.313-2.132-0.883c-1.175-1.175-1.175-3.087,0-4.262L6.51,9.227c0.156-0.155,0.156-0.408,0-0.564c-0.156-0.156-0.408-0.156-0.564,0l-2.414,2.414c-1.487,1.485-1.487,3.904,0,5.391c0.72,0.72,1.678,1.116,2.696,1.116s1.976-0.396,2.696-1.116l2.414-2.413c1.487-1.486,1.487-3.905,0-5.392C10.974,8.298,10.55,8.017,10.076,7.825"></path>
</svg>
<h1 class="px-2 text-sm">http://soundsirius.blog</h1>
</div>
</div>
</div>
Adding flex with justify-content: space-evenly to the container <div /> should provide the desired outcome.
<div class="flex flex-col justify-evenly h-screen">
(...)
</div>
Related
Tailwind - keep header and left/right sidebar sticky on scroll
How do I keep my header, left/right sidebar sticky on scroll (on desktop, not mobile)? It doesn't seem to be working with the fixed or sticky class, I've posted an example here: https://play.tailwindcss.com/Bj68nUJj1C. <!-- Background color split screen for large screens --> <div class="fixed top-0 left-0 h-full w-1/2 bg-white" aria-hidden="true"></div> <div class="fixed top-0 right-0 h-full w-1/2 bg-gray-50" aria-hidden="true"></div> <div class="relative flex min-h-screen flex-col"> <!-- Navbar --> <nav class="flex-shrink-0 bg-indigo-600"> <div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8"> <div class="relative flex h-16 items-center justify-between"> <!-- Logo section --> <div class="flex items-center px-2 lg:px-0 xl:w-64"> <div class="flex-shrink-0"> <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark.svg?color=indigo&shade=300" alt="Workflow" /> </div> </div> <!-- Search section --> <div class="flex flex-1 justify-center lg:justify-end"> <div class="w-full px-2 lg:px-6"> <label for="search" class="sr-only">Search projects</label> <div class="relative text-indigo-200 focus-within:text-gray-400"> <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"> <!-- Heroicon name: mini/magnifying-glass --> <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" /> </svg> </div> <input id="search" name="search" class="block w-full rounded-md border border-transparent bg-indigo-400 bg-opacity-25 py-2 pl-10 pr-3 leading-5 text-indigo-100 placeholder-indigo-200 focus:bg-white focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-0 sm:text-sm" placeholder="Search projects" type="search" /> </div> </div> </div> <div class="flex lg:hidden"> <!-- Mobile menu button --> <button type="button" class="inline-flex items-center justify-center rounded-md bg-indigo-600 p-2 text-indigo-400 hover:bg-indigo-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600" aria-controls="mobile-menu" aria-expanded="false"> <span class="sr-only">Open main menu</span> <!-- Icon when menu is closed. Heroicon name: outline/bars-3-center-left Menu open: "hidden", Menu closed: "block" --> <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5" /> </svg> <!-- Icon when menu is open. Heroicon name: outline/x-mark Menu open: "block", Menu closed: "hidden" --> <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> <!-- Links section --> <div class="hidden lg:block lg:w-80"> <div class="flex items-center justify-end"> <div class="flex"> Documentation Support </div> <!-- Profile dropdown --> <div class="relative ml-4 flex-shrink-0"> <div> <button type="button" class="flex rounded-full bg-indigo-700 text-sm text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-700" id="user-menu-button" aria-expanded="false" aria-haspopup="true"> <span class="sr-only">Open user menu</span> <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&h=256&q=80" alt="" /> </button> </div> <!-- Dropdown menu, show/hide based on menu state. Entering: "transition ease-out duration-100" From: "transform opacity-0 scale-95" To: "transform opacity-100 scale-100" Leaving: "transition ease-in duration-75" From: "transform opacity-100 scale-100" To: "transform opacity-0 scale-95" --> <div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1"> <!-- Active: "bg-gray-100", Not Active: "" --> View Profile Settings Logout </div> </div> </div> </div> </div> </div> </nav> <!-- 3 column wrapper --> <div class="mx-auto w-full max-w-7xl flex-grow lg:flex xl:px-8"> <!-- Left sidebar & main wrapper --> <div class="min-w-0 flex-1 bg-white xl:flex"> <div class="border-b border-gray-200 bg-white xl:w-64 xl:flex-shrink-0 xl:border-b-0 xl:border-r xl:border-gray-200"> <div class="h-full py-6 pl-4 pr-6 sm:pl-6 lg:pl-8 xl:pl-0"> <!-- Start left column area --> <div class="relative h-full" style="min-height: 12rem"> <div class="absolute inset-0 rounded-lg border-2 border-dashed border-gray-200"></div> </div> <!-- End left column area --> </div> </div> <div class="bg-white lg:min-w-0 lg:flex-1"> <div class="h-full py-6 px-4 sm:px-6 lg:px-8"> <!-- Start main area--> <div class="relative h-full" style="min-height: 36rem"> <div class="absolute inset-0 rounded-lg border-2 border-dashed border-gray-200"></div> </div> <!-- End main area --> </div> </div> </div> <div class="bg-gray-50 pr-4 sm:pr-6 lg:flex-shrink-0 lg:border-l lg:border-gray-200 lg:pr-8 xl:pr-0"> <div class="h-full py-6 pl-6 lg:w-80"> <!-- Start right column area --> <div class="relative h-full" style="min-height: 16rem"> <div class="absolute inset-0 rounded-lg border-2 border-dashed border-gray-200"></div> </div> <!-- End right column area --> </div> </div> </div> </div>
You need to use top-X class together with sticky. For navbar sticky top-0 and for sidebar something like sticky top-20 should work. Prefix it with corresponding breakpoint prefix to apply it only for bigger screens.
You can try using grid instead of flex and change your layout a bit to achieve this. <script src="https://cdn.tailwindcss.com"></script> <div class="fixed top-0 left-0 h-full w-1/2 bg-white" aria-hidden="true"></div> <div class="fixed top-0 right-0 h-full w-1/2 bg-gray-50" aria-hidden="true"></div> <div class="relative grid grid-cols-[2rem_1fr_2rem] xl:grid-cols-[minmax(2rem,1fr)_16rem_minmax(200px,calc(80rem-32rem))_16rem_minmax(2rem,1fr)] lg:grid-cols-[2rem_minmax(200px,calc(100%-16rem))_16rem_2rem] min-h-screen"> <!-- Navbar --> <nav class="min-h-[4rem] sticky top-0 z-10 col-[1/-1] row-[1] flex justify-center items-center bg-indigo-600 text-white"> Nav </nav> <aside class="max-h-screen xl:sticky lg:static top-12 col-[2] row-[2] border-b border-gray-200 bg-white xl:border-b-0 xl:border-r xl:border-gray-200"> <div class="h-full py-6 pl-4 pr-6 sm:pl-6 lg:pl-8 xl:pl-0"> <!-- Start left column area --> <div class="relative h-full" style="min-height: 12rem"> <div class="absolute inset-0 rounded-lg border-2 border-dashed border-gray-200 flex justify-center items-center"> Aside </div> </div> <!-- End left column area --> </div> </aside> <main class="bg-white col-[2] row[3] xl:col-[3] xl:row-[2] min-h-[150vh]"> <div class="h-full py-6 px-4 sm:px-6 lg:px-8"> <!-- Start main area--> <div class="relative h-full" style="min-height: 36rem"> <div class="absolute inset-0 rounded-lg border-2 border-dashed border-gray-200 flex justify-center items-center"> Main </div> </div> <!-- End main area --> </div> </main> <aside class="max-h-screen sticky top-12 col-[2] row-[4] xl:col-[4] xl:row-[2] lg:col-[3] lg:row-[2/2_span] bg-gray-50 pr-4 sm:pr-6 lg:border-l lg:border-gray-200 lg:pr-8 xl:pr-0"> <div class="h-full py-6 pl-6"> <!-- Start right column area --> <div class="relative h-full" style="min-height: 16rem"> <div class="absolute inset-0 rounded-lg border-2 border-dashed border-gray-200 flex justify-center items-center"> Aside </div> </div> <!-- End right column area --> </div> </aside> </div>
I try to solve your problem, you can check here
Tailwind - navbar dropdown menu hidden behind hero section (Rails 7)
I am using Tailwindcss for my Rails app, My colleague created navbar with a dropdown menu.
I have now tried to add a Tailwindcss template hero section that was including a navbar (which i commented out in my code below). Now the dropdown menu is hidden behind the hero section. I have tried changing the position from absolute to position relative and giving it a higher z-index value than the hero section without success.
How can I make the dropdowns appear on top of page content? Any help would be greatly appreciated, thank you.
_navbar.html.erb
<nav class="z-20 bg-white border-b border-gray-100 shadow-md">
<div class="max-w-7xl mx-auto p-4 sm:px-6 lg:px-8">
<div class="hidden md:flex-1 md:flex md:items-center md:justify-between relative">
<nav class="flex space-x-10">
<%= link_to t("navigation_bar.home"), root_path, class:"text-base font-medium text-gray-500 hover:text-gray-900" %>
</nav>
<% if user_signed_in? %>
<div class="flex items-center relative">
<button class="p-1 rounded-full text-gray-600 hover:text-gray-100 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-label="Notifications">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<!-- Profile dropdown -->
<div class="relative inline-block text-left dropdown">
<span class="rounded-md shadow-sm">
<button class="inline-flex justify-center px-1 py-1 w-full text-sm font-medium leading-5 text-gray-800 transition duration-150 ease-in-outp-1 rounded-full text-gray-600 hover:text-gray-100 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
type="button" aria-haspopup="true" aria-expanded="true" aria-controls="headlessui-menu-items-117">
<div class="relative w-8 h-8 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-500">
<svg class="absolute w-10 h-10 text-gray-300 -left-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
</svg>
</div>
</button>
</span>
<div class="opacity-0 invisible dropdown-menu transition-all duration-300 transform origin-top-right -translate-y-2 scale-95">
<div class="absolute right-0 w-56 mt-2 origin-top-right bg-gray-100 border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none" aria-labelledby="headlessui-menu-button-1" id="headlessui-menu-items-117" role="menu">
<div class="px-4 py-3">
<li class="text-sm list-none leading-5"><%= t("navigation_bar.signed_in_as" , user_full_name: current_user.full_name) %></li>
<li class="text-sm list-none font-medium leading-5 text-gray-900 truncate"><%= current_user.email %></li>
<div class="py-1">
<a href="javascript:void(0)" tabindex="0" class="text-gray-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left hover:border-b-2 border-gray-400 hover:text-gray-900 text-gray-700 rounded-3xl" role="menuitem" ><%= t("navigation_bar.dashboard") %></a>
<a href="javascript:void(0)" tabindex="1" class="text-gray-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left hover:border-b-2 border-gray-400 hover:text-gray-900 text-gray-700 rounded-3xl" role="menuitem" ><%= t("navigation_bar.settings") %></a>
<%= link_to t("navigation_bar.profile"), profile_path, class: 'text-gray-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left hover:border-b-2 border-gray-400 hover:text-gray-900 text-gray-700 rounded-3xl" role="menuitem' %>
<span role="menuitem" tabindex="-1" class="flex justify-between w-full px-4 py-2 text-sm leading-5 text-left hover:hover:border-b-2 border-gray-400 rounded-3xl text-gray-700 cursor-not-allowed opacity-50" aria-disabled="true">New feature (soon)</span>
<div class="py-1">
<a href="javascript:void(0)" tabindex="3" role="menuitem" >
<%= link_to t("navigation_bar.sign_out"), destroy_user_session_path, method: :delete, class:"text-gray-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left hover:hover:border-b-2 border-gray-400 rounded-3xl" %></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<% else %>
<div class="flex items-center md:ml-12">
<%= link_to t("sign_in"), new_user_session_path, class: "text-base font-medium text-gray-500 hover:text-gray-900" %>
<%= link_to t("sign_up"), register_path, class: "ml-8 inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700" %>
</div>
<% end %>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="md:hidden p-2 space-y-1 sm:px-3" id="mobile-menu">
<div class="pb-2 justify-between">
<%# AVATAR ICON %>
<div class="flex items-center justify-between pl-5 pr-2">
<div>
<div class="flex itmes-center">
<div class="relative w-10 h-10 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600">
<svg class="absolute w-12 h-12 text-gray-400 -left-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
</div>
<div class="flex items-center ml-4">
<% if current_user %>
<div class="text-base font-medium leading-none text-white"><%= current_user.first_name %></div>
<div class="text-sm font-medium leading-none text-gray-400"><%= current_user.email %></div>
<% end %>
</div>
</div>
</div>
<div class="relative" data-controller="dropdown">
<!-- Hamburger menu -->
<button data-action="click->dropdown#toggle" data-dropdown-target="button" type="button" class="rounded-3xl p-1 -mr-4 inline-flex items-center justify-center text-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-400" aria-expanded="false">
<svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="false">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div data-dropdown-target="menu" class="absolute pin-r mt-2 transform shadow transition hover:border-gray-600 hidden right-0">
<div class="block w-80 justify-center bg-gray-800 py-1 px-8 leading-8 divide-y divide-gray-600 rounded-md border-gray-600 overflow-hidden">
<%= link_to t("navigation_bar.home"), root_path, class:"px-1 py-2 justify-center text-white text-decoration-none group flex items-center text-base font-medium hover:text-gray-600 hover:bg-gray-600" %>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<style>
.dropdown:focus-within .dropdown-menu {
opacity:1;
transform: translate(0) scale(1);
visibility: visible;
z-index: 20;
}
</style>
home.html.erb
<!-- This example requires Tailwind CSS v2.0+ -->
<div class="relative bg-white overflow-hidden">
<div class="max-w-7xl mx-auto">
<div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
<svg class="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2" fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
<polygon points="50,0 100,0 50,100 0,100" />
</svg>
<div>
<div class="relative pt-6 px-4 sm:px-6 lg:px-8">
<!-- commented out -->
<%# <nav class="relative flex items-center justify-between sm:h-10 lg:justify-start" aria-label="Global">
<div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
<div class="flex items-center justify-between w-full md:w-auto">
<a href="#">
<span class="sr-only">Workflow</span>
<img alt="Workflow" class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg">
</a>
<div class="-mr-2 flex items-center md:hidden">
<button type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Heroicon name: outline/menu -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
<div class="hidden md:block md:ml-10 md:pr-4 md:space-x-8">
Product
Features
Marketplace
Company
Log in
</div>
</nav> %>
</div>
<!--
Mobile menu, show/hide based on menu open state.
Entering: "duration-150 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
-->
<%# <div class="absolute z-10 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
<div class="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
<div class="px-5 pt-4 flex items-center justify-between">
<div>
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt="">
</div>
<div class="-mr-2">
<button type="button" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span class="sr-only">Close main menu</span>
<!-- Heroicon name: outline/x -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div class="px-2 pt-2 pb-3 space-y-1">
Product
Features
Marketplace
Company
</div>
Log in
</div>
</div> %>
<!-- commented back-->
</div>
<main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
<div class="sm:text-center lg:text-left">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
<span class="block xl:inline"><%= t("home_page.hero.header_1") %></span>
<span class="block text-indigo-600 xl:inline"><%= t("home_page.hero.header_2") %></span>
</h1>
<p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"><%= t("home_page.hero.description") %></p>
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
<div class="rounded-md shadow">
<%= t("home_page.hero.cta_1") %>
</div>
<div class="mt-3 sm:mt-0 sm:ml-3">
<%= t("home_page.hero.cta_2") %>
</div>
</div>
</div>
</main>
</div>
</div>
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://source.unsplash.com/Y5bvRlcCx8k" alt="">
</div>
</div>
{/* Profile dropdown */}
<Menu as="div" className="ml-3 relative z-[100]">
#... elements ....
</Menu>
class z-index will resolve the issue. in twinland CSS you can assign z-index as follows z-[100]
TailwindCSS + Alpine mobile navbar not working
I have everything working with one of the examples found on the website but for some reason I cannot seem to get the mobile navbar to show when clicking. Can someone take a peek and tell me what I'm missing please?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Test</title>
<link rel="stylesheet" href="<%= Routes.static_path(#conn, "/css/app.css") %>"/>
<script defer type="text/javascript" src="<%= Routes.static_path(#conn, "/js/app.js") %>"></script>
</head>
<div>
<nav class="bg-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<%= img_tag(Routes.static_path(#conn, "/images/logo.png")) %>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline">
Dashboard
Team
Projects
Calendar
Reports
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button class="p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-gray-700" aria-label="Notifications">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<div #click.away="open = false" class="ml-3 relative" x-data="{open: false }">
<div>
<button #click="open = !open" class="max-w-xs flex items-center text-sm rounded-full text-white focus:outline-none focus:shadow-solid">
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
<div class="py-1 rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical">
Your Profile
Settings
Sign out
</div>
</div>
</div>
</div>
</div>
<!-- code that is displayed when viewing mobile screens -->
<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="block h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path x-show="open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path x-show="!open" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div :class="{ 'block': open, 'hidden md:hidden': !open }" #click.away="open = false" x-data="{open: false}" x-show="open">
<div class="px-2 pt-2 pb-3 sm:px-3">
Dashboard
Team
Projects
Calendar
Reports
</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="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Tom Cook</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">tom#example.com</div>
</div>
</div>
<div class="mt-3 px-2">
Your Profile
Settings
Sign out
</div>
</div>
</div>
<!-- end mobile screens -->
</nav>
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<h1 class="text-3xl font-bold leading-tight text-gray-900">
Dashboard
</h1>
</div>
</header>
<main>
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<p class="alert alert-info" role="alert"><%= get_flash(#conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(#conn, :error) %></p>
<%= #inner_content %>
</div>
</main>
</div>
</html>
I am working on getting this whole example in codepen to help things out and will update with that as soon as I have it working.
I figured it out. I never registered a state for the navbar and so it didn't fire the click event. The nav tag should be as:
<nav class="bg-gray-900 x-data="{ open: false }">
I've got the mobile header working with the following code, I noticed that open doesn't get toggled on the mobile version so maybe this doesn't event need to be an Alpine.js component.
If this isn't exactly what you were looking for, feel free to leave a comment clarifying the behaviour you're after for the mobile navigation (currently I guess it just display everything on mobile breakpoints).
Note the I've gotten rid of x-show and the :class binding in favour of always applying the md:hidden class since I couldn't find where you wanted to toggle open from.
<div class="md:hidden" #click.away="open = false" x-data="{open: false}">
<div class="px-2 pt-2 pb-3 sm:px-3">
Dashboard
Team
Projects
Calendar
Reports
</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="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Tom Cook</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">tom#example.com</div>
</div>
</div>
<div class="mt-3 px-2">
Your Profile
Settings
Sign out
</div>
</div>
</div>
Above example is viewable/editable in this CodePen.
Problem with stacking of elements in tailwindcss
I have a web page styled with tailwindcss that also uses glide.js to create a carousel element. I have a mobile menu triggered by a hamburger button but the resulting menu renders below the glide.js element. I have tried making elements relative and absolute in multiple combinations and also tried static on the carousel element. I have also tried z indexing the elemnts but I cant get my popup menu to render over the glide.js carousel.
Here is a fiddle which if viewed at 616 px width demonstrates my issue.
JS Fiddle Link
<div x-data="{ open: false, menu: false }" class="mt-4 relative bg-white overflow-hidden">
<div class="relative max-w-screen-xl mx-auto">
<div class="relative z-10 pb-8 bg-blue-100 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-6 xl:pb-8">
<div class="pt-2 px-4 sm:px-6 lg:px-8">
<nav class="relative flex items-center sm:h-10 justify-start">
<div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
<div class="flex items-center justify-between w-full lg:w-auto mt-4">
<div class="-mr-2 items-center lg:hidden">
<button #click="open = true" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<img class="lg:hidden" width="100" height="50" src="{{asset('images/epslogo.png')}}" alt="">
</div>
</div>
<div class="hidden lg:flex lg:items-center lg:block lg:mt-4">
<a href="/" class="font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition duration-150 ease-in-out">
<input width="100" height="50" type="image" src="{{asset('images/EPSnav.png')}}" alt="EPS Logo">
</a>
High Voltage
Low Voltage
EV Charge Points
More...
<div x-show.transition.duration.600ms="menu" #click.away="menu = false" class="z-10 absolute ml-24 top-12 right-0 py-2 bg-white rounded shadow-2xl" >
<a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
href="#">
Maintenance and Inspection
</a>
<a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
href="/design">
Design Services
</a>
<a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
href="#">
Senior Authorised Personnel
</a>
<a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
href="/contact">
Contact Us
</a>
<a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
href="#">
About Us
</a>
</div>
</div>
</nav>
</div>
<div
x-show="open"
x-transition:enter="duration-150 ease-out"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="duration-100 ease-in"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="absolute top-0 inset-x-0 p-2 transition transform origin-top-right z-50"
>
<div class="relative rounded-lg bg-white shadow-xs overflow-hidden">
<div class="px-5 pt-4 flex items-center justify-between">
<div class="-mr-2">
<button #click="open = false" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<img class="ml-2" width="100" height="50" src="{{asset('images/epslogo.png')}}" alt="">
</div>
<div class="relative px-2 pt-2 pb-3">
Home
High Voltage
Low Voltage
EV Charge Points
Maintenance and Inspection
Design Services
Senior Authorised Personnel
Contact Us
</div>
</div>
</div>
<div class="relative mt-6 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-6 lg:mt-8 lg:px-8 xl:mt-10">
<div class="text-center lg:text-left">
<h1 class="text-5xl text-gray-700 font-bold">Electrical Power Solutions</h1>
{{-- <img class="h-32 mx-auto mb-4 lg:mx-0" src="{{asset('images/epslogo.png')}}" alt="EPS Logo">--}}
<h2 class="text-indigo-400 text-4xl">Over {{now()->year - 2005}} years of Experience.</h2>
<p class="mt-2 text-base text-gray-500 sm:mt-4 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-2 md:text-xl lg:mx-0">
Supplying High and Low voltage services to the Energy Sector for over {{now()->year - 2005}} years.
</p>
<div class="mt-6">
<a href="/contact" class="text-center rounded-lg border border-transparent bg-indigo-600 px-1 py-1 text-xl leading-6 font-medium text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition ease-in-out duration-150">
Contact Us
</a>
</div>
</div>
</div>
<svg class="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-blue-200 transform translate-x-1/2" fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="50,0 100,0 50,100 0,100" />
</svg>
</div>
</div>
<div class="hidden lg:block lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="{{asset('images/high-voltage.jpg')}}" alt="" />
</div>
</div>
{{--Carousel Heading with standard nav --}}
<div class="hidden lg:block lg:mt-1 lg:mb-1">
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/hv.jpg' alt="High Voltage Pylons Picture">
</div>
</li>
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/design.jpg' alt="Rolled up design documents">
</div>
</li>
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/rope.jpg' alt="Rope access personnel at work">
</div>
</li>
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/WTS.jpg' alt="Wind turbines at sunset">
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="lg:hidden">
<div class="glide1">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/hv.jpg' alt="High Voltage Pylons Picture">
</div>
</li>
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/design.jpg' alt="Rolled up design documents">
</div>
</li>
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/rope.jpg' alt="Rope access personnel at work">
</div>
</li>
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/WTS.jpg' alt="Wind turbines at sunset">
</div>
</li>
</ul>
</div>
</div>
</div>
Any help is appreciated.
Problem is not with slider, z-index, absolute etc, but in fact that you intentionally putted "overflow-hidden" on menu container. Because of this menu that is bigger than its container is "cutted". To test this you can actually remove all content from below (including glide) and keep only menu (header) - problem will still remain.
So replace this:
<div x-data="{ open: false, menu: false }" class="mt-4 relative bg-white overflow-hidden">
with:
<div x-data="{ open: false, menu: false }" class="mt-4 relative bg-white">
Fiddle: https://jsfiddle.net/39d6qhg5/
More info about overflow:
https://www.w3schools.com/cssref/pr_pos_overflow.asp
https://tailwindcss.com/docs/overflow/
Relative element overlaps earlier absolute element
I'm having trouble positioning elements using tailwind. I currently have a submenu positioned absolute. Beneath this element, I have a search bar, who's parent is positioned relative, and the element itself is positioned absolute. This is so that the search icon can ble displayed in the middle of the input. When the submenu is open, the search bar overlaps the submenu. Image Already tried I've tried positioning the elements in another way, switching between the different positions. I've also tried setting z-indexes to the elements in question. Html <div> <nav> <!-- other navbar code --> <div class="block"> <div class="hidden sm:block"> <a href="#" class="flex items-center font-medium text-base text-gray-500 hover:text-gray-900 sm:mt-0 sm:text-xs sm:block"> <svg class="h-5 mr-2 fill-current h-5 mr-2 fill-current sm:block sm:m-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <!-- path --> </svg> Name </a> </div> <div class="sm:absolute sm:right-0 sm:mr-5 sm:bg-white sm:rounded sm:shadow"> <!-- needs to be absolute to not mess ut rest of navbar --> <div class="border-t border-gray-300 sm:border-none"> <div class="px-5 py-5"> <span class="text-xs uppercase tracking-wider text-gray-500 font-semibold">Daniel Kjellid</span> Action </div> </div> <div class="border-t border-gray-300"> <div class="px-5 py-5"> <span class="text-xs uppercase tracking-wider text-gray-500 font-semibold">Administrator</span> Another action </div> </div> <button class="w-full text-center py-4 text-gray-900 font-medium bg-gray-200 hover:bg-gray-300"> Logg ut </button> </div> </div> </nav> </div> <div class="bg-white px-5 py-3 flex justify-between items-center border-b border-gray-300"> <div class="relative mr-3 w-full"> <!-- needs to be relative to position svg inside input --> <div class="absolute inset-y-0 left-0 flex items-center pl-3"> <svg class="h-6 w-6 fill-current text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <!-- path --> </svg> </div> <input type="text" class="form-input pl-10 py-2 rounded-lg bg-gray-300 text-gray-600 block w-full" placeholder="Søk blant hundrevis av varer"> </div> <button class="open-filter-btn bg-gray-300 py-2 px-4 rounded-lg text-gray-600 flex items-center font-medium" type="button"> <svg class="filter-closed-icn h-5 w-5 fill-current mr-2" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <!-- path --> </svg> <svg class="filter-open-icn h-6 fill-current text-gray-600 hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <!-- path --> </svg> Filter </button> </div>