How to make Tailwind Cards with same height of the title? - tailwind-css

So I am using Tailwind 1.9.6 and I want to make 3 cards with same height and titles of same height. I want to use flexbox and not grid because of the browser support.
I have managed to make the cards of same height regardless of the title length, but I would like the clock icon and the published time to also be always on the same height. Right now, the position of the clock icon and date depend on the title length.
How can that be achieved?
Here is the Codepen: https://codepen.io/vladoapost/pen/LYRYgMd
And the code:
<div class="container mx-auto">
<div class="flex flex-col sm:flex-row justify-between mx-4 md:mx-0 lg:-mx-2 flex-wrap">
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Teneriffa</p>
<a href="http://example.test/2020/11/26/hello-world/">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Hello world!</h3>
</a>
<div class="text-sm flex items-center">
<svg
class="opacity-75 mr-2"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="12"
height="12"
viewBox="0 0 97.16 97.16"
style="enable-background: new 0 0 97.16 97.16;"
xml:space="preserve"
>
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Gran Canaria</p>
<a href="http://example.test/2020/11/26/hello-world/">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
</a>
<div class="text-sm flex items-center">
<svg
class="opacity-75 mr-2"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="12"
height="12"
viewBox="0 0 97.16 97.16"
style="enable-background: new 0 0 97.16 97.16;"
xml:space="preserve"
>
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Fuerteventura</p>
<a href="http://example.test/2020/11/26/hello-world/">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Hello world!</h3>
</a>
<div class="text-sm flex items-center">
<svg
class="opacity-75 mr-2"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="12"
height="12"
viewBox="0 0 97.16 97.16"
style="enable-background: new 0 0 97.16 97.16;"
xml:space="preserve"
>
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
</div>
</div>


I came up with a solution by adding flex flex-col directives to some of your containers (the one containing your image and the card body, and to the card body itself) and flex-1 to the card body (to make it take the entire left space) and to the a wrapping your h3.
I don't know if the written explanation is that clear but check the snippet, it should do a better job!
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="container mx-auto">
<div class="flex flex-col sm:flex-row justify-between mx-4 md:mx-0 lg:-mx-2 flex-wrap">
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10 flex flex-col">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white flex flex-col flex-1">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Teneriffa</p>
<a href="http://example.test/2020/11/26/hello-world/" class="flex-1">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Hello world!</h3>
</a>
<div class="text-sm flex items-center">
<svg class="opacity-75 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="12" height="12" viewBox="0 0 97.16 97.16" style="enable-background: new 0 0 97.16 97.16;" xml:space="preserve">
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10 flex flex-col">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white flex flex-col flex-1">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Gran Canaria</p>
<a href="http://example.test/2020/11/26/hello-world/" class="flex-1">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
</a>
<div class="text-sm flex items-center">
<svg class="opacity-75 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="12" height="12" viewBox="0 0 97.16 97.16" style="enable-background: new 0 0 97.16 97.16;" xml:space="preserve">
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10 flex flex-col">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white flex flex-col flex-1">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Fuerteventura</p>
<a href="http://example.test/2020/11/26/hello-world/" class="flex-1">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Hello world!</h3>
</a>
<div class="text-sm flex items-center">
<svg class="opacity-75 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="12" height="12" viewBox="0 0 97.16 97.16" style="enable-background: new 0 0 97.16 97.16;" xml:space="preserve">
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
</div>
</div>

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]

tailwind responsive design displaying block regardless

I'm currently in the moment learning tailwind. I'm trying to make these three divs inline when full screen but in smaller screen block. Right now, it is block regardless.
<div {{ $attributes->merge(['class' => 'flex flex-col bg-white dark:bg-gray-800 rounded-lg shadow-xl']) }}>
<div class="text-center items-center px-6 py-3 bg-gray-900 rounded-lg rounded-b-none space-x-12 ">
<div class="sm:inline-flex block items-center">
<span class="leading-none text-sm font-semibold mr-2 mt-1 text-white">{{ $post->likes_count }}</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 5" />
</svg>
</div>
<div class="sm:inline-flex block items-center">
<span class="leading-none text-sm font-semibold mr-2 mt-1 text-white">{{ $post->comments_count }}</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" "/>
</svg>
</div>
<div class="sm:inline-flex block items-center">
<span class="leading-none text-sm font-semibold mr-2 mt-1 text-white">{{ $post->reads }}</span>
<svg class="h-6 w-6 text-white" stroke="currentColor" viewBox="0 0 20 20">
<path d=""></path>
</svg>
</div>
</div>
</div>
If I've understood the documentation right, you use unprefixed utilites to target mobile. Which is block currently and then prefixed larger screen which is sm:inline-flex at the moment, but right now, it displays block either way, what I'm doing worng exactly?

One way to do this is by using flex direction on the parent element for these screen sizes:
<div class="text-center items-center justify-center px-6 py-3 bg-gray-900 rounded-lg rounded-b-none space-x-12 flex flex-col md:flex-row">
<div class="w-100 flex">
<span class="leading-none text-sm font-semibold mr-2 mt-1 text-white">{{ $post->likes_count }}</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2 5" />
</svg>
</div>
<div class="w-100 flex">
<span class="leading-none text-sm font-semibold mr-2 mt-1 text-white">{{ $post->comments_count }}</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</svg>
</div>
<div class="w-100 flex">
<span class="leading-none text-sm font-semibold mr-2 mt-1 text-white">{{ $post->reads }}</span>
<svg class="h-6 w-6 text-white" stroke="currentColor" viewBox="0 0 20 20">
<path d=""></path>
</svg>
</div>
</div>
Let me know if this works.

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.

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