prevent div from clipping image with minus margin - css

I have a profile card and I want to display the circle image at the top of it and slightly outside
when I give it a minus margin it clips the top of the image off,
This is what I am trying to achieve
But this is what I am getting
is there a way with a tailwind to tell it to overflow? Demo Codepen
<div class="font-sans leading-tight min-h-screen bg-grey-lighter p-8">
<div class="max-w-sm mx-auto bg-white rounded-lg overflow-hidden shadow-lg">
<div class="border-b px-4 pb-6">
<div class="text-center sm:text-left sm:flex mb-4">
<img class="h-32 w-32 rounded-full border-4 border-white -mt-16 mr-4" src="https://randomuser.me/api/portraits/women/21.jpg" alt="">
<div class="py-2">
<h3 class="font-bold text-2xl mb-1">Cait Genevieve</h3>
<div class="inline-flex text-grey-dark sm:flex items-center">
<svg class="h-5 w-5 text-grey mr-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M5.64 16.36a9 9 0 1 1 12.72 0l-5.65 5.66a1 1 0 0 1-1.42 0l-5.65-5.66zm11.31-1.41a7 7 0 1 0-9.9 0L12 19.9l4.95-4.95zM12 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>
New York, NY
</div>
</div>
</div>
<div class="flex">
<button class="flex-1 rounded-full bg-blue text-white antialiased font-bold hover:bg-blue-dark px-4 py-2 mr-2">Follow</button>
<button class="flex-1 rounded-full border-2 border-grey font-semibold text-black px-4 py-2">Message</button>
</div>
</div>
<div class="px-4 py-4">
<div class="flex items-center text-grey-darker mb-4">
<svg class="h-6 w-6 text-grey mr-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm9 11a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v2a1 1 0 0 1-2 0v-2a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v2z"/></svg>
<span><strong class="text-black">12</strong> Followers you know</span>
</div>
<div class="flex">
<div class="flex flex-row-reverse justify-end mr-2">
<img class="border-2 border-white rounded-full h-10 w-10" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
<img class="border-2 border-white rounded-full h-10 w-10 -mr-2" src="https://randomuser.me/api/portraits/women/31.jpg" alt="">
<img class="border-2 border-white rounded-full h-10 w-10 -mr-2" src="https://randomuser.me/api/portraits/men/33.jpg" alt="">
<img class="border-2 border-white rounded-full h-10 w-10 -mr-2" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
<img class="border-2 border-white rounded-full h-10 w-10 -mr-2" src="https://randomuser.me/api/portraits/men/44.jpg" alt="">
<img class="border-2 border-white rounded-full h-10 w-10 -mr-2" src="https://randomuser.me/api/portraits/women/42.jpg" alt="">
</div>
<span class="flex items-center justify-center text-sm text-grey-darker font-semibold border-2 border-grey-light rounded-full h-10 w-10">+3</span>
</div>
</div>
</div>
</div>


The card element you have has a class of overflow-hidden on it. If you remove that then you should be able to see the full image. If you can't change that class for whatever reason then just add the property overflow:visible to the card element and you should be good to go.

Related

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]

Scrolling not working inside div using Tailwind

When I setup this middle div on a page, the situation is like this.
Top Bar should be sticky and not move
Middle should scroll as new content arrives or if user scrolls up or down
Bottom Bar should remain sticky
I end up with a number of issues and when I fix one, another breaks. Also, at times depending on how I have the CSS setup, the top or bottom bars will overlap onto the right sidebar and I cannot figure out why. I know the code below seems crazy, but I did this to give someone the ability to actually work with what I see. the actual code is controlled by JavaScript so it isnt this painful normally.
I really cannot stress enough I am a backend guy and I have been at this for 3 days now going crazy trying to learn this on my own.
<div class="flex-1 flex overflow-hidden">
<div class="w-full">
<div class="sm:hidden">
<label for="tabs" class="sr-only">Select a tab</label>
<select id="tabs" name="tabs" class="block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-300">
<option>Smoking & Cigars</option>
<option>Darkroom</option>
<option>Humiliation</option>
<option>Financial Domination</option>
</select>
</div>
<div class="hidden sm:block sticky top-0 z-10">
<div class="border-b border-gray-200">
<nav class="-mb-px flex dark:bg-gray-900" aria-label="Tabs">
Smoking & Cigars
Darkroom
Humiliation
Financial Domination
</nav>
</div>
</div>
<section class="bg-white dark:bg-gray-800 min-w-0 flex-1 h-auto flex flex-col lg:order-last">
<div>
<ul class="divide-y divide-gray-200">
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
<section aria-labelledby="chat-footer" class="h-auto w-full sticky shadow-2xl bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-900 border-l dark:border-gray-800 border-gray-200 bottom-0 min-w-full flex-1 flex flex-col lg:order-last">
<div>
<span class="pl-10 pt-2 relative z-0 inline-flex shadow-sm rounded-md">
<button type="button" class="relative inline-flex items-center px-3 py-1 rounded-l-md border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 dark:text-gray-50 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"> YouTube </button>
<button type="button" class="-ml-px relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"></path>
</svg>
</button>
<div class="relative inline-block text-left">
<div>
<button id="headlessui-menu-button-1" type="button" aria-haspopup="true" class="-ml-px relative inline-flex items-center px-3 py-2 rounded-r-md border border-gray-300 bg-white dark:bg-gray-900 dark:border-gray-800 dark:hover:bg-gray-600 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"> Send Option
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="-mr-1 ml-2 h-5 w-5">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<!---->
</div>
</span>
<div class="pr-10 pl-10 pb-5 h-full mt-1 flex rounded-md shadow-sm">
<div class="relative flex items-stretch flex-grow focus-within:z-10">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 w-5 text-gray-400">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</div>
<input type="text" name="email" id="email" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full rounded-none rounded-l-md pl-10 sm:text-sm border-gray-300" placeholder="Type your message...">
</div>
<button id="switchTheme" class="-ml-px bg-indigo-700 relative inline-flex items-center space-x-2 px-4 py-1 border border-gray-300 text-sm font-medium rounded-r-md text-gray-700 bg-transparent hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 w-5 text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span class="text-gray-50">Send</span>
</button>
</div>
</div>
</section>
</div>
</div>
<!-- User List (hidden on smaller screens) -->
<aside class="w-80 bg-gray-100 shadow-2xl border-l border-gray-200 dark:border-gray-800 overflow-y-auto lg:block">
<div class="sticky top-0 bg-white z-10">
<!--User List Filter -->
<div class="sticky top-0 bg-white z-10">
<nav class="relative z-0 shadow flex divide-x divide-gray-200 dark:divide-gray-800" aria-label="UserLists">
<a href="#" class="text-gray-900 dark:text-gray-50 group relative min-w-0 flex-1 overflow-hidden bg-white dark:bg-gray-900 py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 dark:hover:bg-gray-700 dark:hover:text-gray-50 focus:z-10" aria-current="page">
<span>All</span>
<span aria-hidden="true" class="bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5"></span>
</a>
<a href="#" class="text-gray-500 hover:text-gray-700 hover:dark:text-gray-50 group relative min-w-0 flex-1 overflow-hidden bg-white dark:bg-gray-900 py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 dark:hover:bg-gray-700 dark:hover:text-gray-50 focus:z-10">
<span>Watching</span>
<span aria-hidden="true" class="bg-transparent absolute inset-x-0 bottom-0 h-0.5"></span>
</a>
</nav>
</div>
<div class="">
<span class="relative z-0 inline-flex justify-evenly w-full shadow-sm rounded-md">
<button type="button" class="relative inline-flex items-center px-6 py-2 border border-gray-300 bg-indigo-600 dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-50 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-5 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-5 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-5 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-6 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
</svg>
</button>
</span>
</div>
</div>
<!--User List Users -->
<ul class="flex-1 divide-y divide-gray-200 dark:divide-gray-800 overflow-y-auto dark:bg-gray-900">
<li>
<div class="relative group py-6 px-5 flex items-center">
<a href="#" class="-m-1 flex-1 block p-1">
<div class="absolute inset-0 group-hover:bg-gray-50" aria-hidden="true"></div>
<div class="flex-1 flex items-center min-w-0 relative">
<span class="flex-shrink-0 inline-block relative">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<span class="bg-green-400 absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white" aria-hidden="true"></span>
</span>
<div class="ml-4 truncate">
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">Leslie Alexander</p>
<p class="text-sm text-gray-500 truncate">lesliealexander</p>
</div>
</div>
</a>
<div class="ml-2 flex-shrink-0 relative inline-block text-left">
<button id="headlessui-menu-button-35" type="button" aria-haspopup="true" class="group relative w-14 h-8 bg-white rounded-full inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">Open options menu</span>
<span class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center h-full w-full rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-400 dark:text-gray-300 dark:hover:text-gray-400 group-hover:text-gray-500">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
</svg>
</span>
</button>
<!---->
</div>
</div>
</li>
</ul>
</aside>
</div>```

At the very top of the code is a "overflow-hidden" which causes all child divs not to scroll. Once I changed that to scroll and made sure the top and bottom were set to sticky, it worked fine.

css not scrolling horizontally

I'm using tailwind css to style it.
It is implemented by watching yutube at the following url.
At about 29 minutes and 30 seconds into the video, I apply overflow-x-auto to the div tag to make it scroll horizontally. I also applied overflow-x-auto in the same way, but it doesn't scroll horizontally.
https://www.youtube.com/watch?v=u2jiRjyUbwA&t=176s
export default function Home() {
const categories = [
`Woman's Running Shoes`,
`Everyday Sneakers`,
`Slip-Ons`,
`High Tops`,
`Boat Shoes`,
`Flats`,
`Whether Repellent Shoes`,
`Woman's Running Shoes`,
];
return (
<div>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="px-4 py-1 bg-lime-800 text-white">
<p className="text-xs font-midium text-center">
We're raising prices on all products by $1 today in support of the
planet.{" "}
<a href="#" className="underline">
Learn More
</a>
</p>
</div>
<header className="px-4 py-4 flex item-center justify-between bg-white">
<div className="absolute inset-0 shadow-lg opacity-50" />
<div className="flex">
<button className="h-8 w-8">
<svg
class="w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
<div className="flex">Logo</div>
<div className="flex">
<button className="h-8 w-8">
<svg
class="w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>
</button>
</div>
</header>
<main>
<div className="flex items-center justify-between px-8 py-4">
<div>
<div className="text-xs font-medium text-gray-900 space-x-1">
<a href="#" className="underline">
Home
</a>
<span>/</span>
</div>
<div className="">Women's Shoes</div>
</div>
<div className="flex">
<button className="h-6 w-6">
<svg
className="transform rotate-90"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 2 0 0 010-3.464V4a1 1 0 011-1z"></path>
</svg>
</button>
</div>
</div>
<div className="bg-gray-100 px-8 py-3 overflow-x-auto">
<div className="text-sm flex space-x-4">
{categories.map((category) => (
<a href="#" className="text-gray-400 whitespace-nowrap">
{category}
</a>
))}
</div>
</div>
</main>
</div>
);
}

You have an element with absolute on top of everything (first child of the <header> element).
<div className="absolute inset-0 shadow-lg opacity-50" />
Removing the element (or absolute) will allow you to interact with the scrollbar.

How do I make my design fit the viewport?

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>

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>

Resources