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.
Related
hello community im creating an app using tailwindcss avelte to upload pdf and images using pdfjs and canvas. when im uploading image the absolute element not covering the bottom side of the page
enter image description here
my code is
<div class="absolute w-4/6 justify-center flex items-end mx-auto z-10 bottom-0 inset-x-0">
<div class=" border-2 border-gray-100 flex px- py-4 w-full mx-auto bg-gray-200 xl:flex-nowrap rounded-lg flex-wrap">
<div class="container px-4 mx-auto flex items-center md:flex-row flex-col sm:right-0">
<div class=" flex w-full pr-0 text-center md:mb-0 md:w-auto md:pr-10 md:text-left">
<h1 class="title-font text-2xl font-bold text-red-600 md:text-2xl">Please verify document details before proceed</h1>
</div>
<div class="mx-auto flex flex-shrink-0 items-center space-x-6 md:ml-auto md:mr-0">
<button class=" inline-flex items-center rounded-lg border border-red-600 text-red-600 py-2 px-8 hover:bg-red-600 hover:text-white disabled:cursor-not-allowed disabled:bg-red-200" on:click={releaseDoc} id="release">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
<span class="title-font ml-2 font-bold text-base">Release</span>
</button>
<button type="button" class="inline-flex items-center rounded-lg border border-green-900 text-green-900 py-2 px-8 hover:bg-green-900 hover:text-white focus:outline-none" id="confirm">
{#if load}
<svg role="status" class="mr-4 h-5 w-5 animate-spin rounded-full border-4 border-white border-r-green-900" viewBox="0 0 24 24" />
{:else}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 ">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"
/>
</svg>
{/if}
<span class="title-font ml-2 font-bold text-base">Confirm</span>
</button>
<button class="inline-flex items-center rounded-lg border border-green-900 text-green-900 py-2 px-8 hover:bg-green-900 hover:text-white focus:outline-none" style="display: none" on:click={getsignature} id="sign">
{#if load}
<svg role="status" class="mr-4 h-5 w-5 animate-spin rounded-full border-4 border-white border-r-green-900" viewBox="0 0 24 24" />
{:else}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
</svg>
{/if}
<span class="title-font ml-2 font-bold text-base">Sign_ID</span>
</button>
<button class="inline-flex items-center rounded-lg border border-green-900 text-green-900 py-2 px-8 hover:bg-green-900 hover:text-white focus:outline-none" style="display: none" id="publish" on:click|once={disablerelease} on:click={publishdoc}>
{#if load}
<svg role="status" class="mr-3 h-5 w-5 animate-spin rounded-full border-4 border-white border-r-green-900" viewBox="0 0 24 24" />
{:else}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 019 9v.375M10.125 2.25A3.375 3.375 0 0113.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 013.375 3.375M9 15l2.25 2.25L15 12" />
</svg>
{/if}
<span class="title-font ml-2 font-bold text-base">Submit</span>
</button>
</div>
</div>
</div>
</div>
if you want this element to cover the whole width you must replace w-4/6 with w-full in first line.
This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
Closed 4 months ago.
This post was edited and submitted for review 4 months ago and failed to reopen the post:
Original close reason(s) were not resolved
I'm using flex in tailwind CSS to design the above section. I have placed a background image of React logo in this section. I've tried to change the opacity of the background image through the "opacity-25" class of tailwind but it changes the opacity of the whole section.
Please suggest me a feasible solution for this problem.
Note: Linear gradient isn't applicable here as it will be applied to the whole footer and affect the entire background. I just want to change the opacity of React Logo. I'm using custom classes for "basis". Here "basis-40%" means 40% width of the column.
<div class="flex">
<!-- First col -->
<div class="flex flex-col basis-40% border-solid border-green-900">
<div class="flex">
<img class="w-32 h-22" src="https://cdn.dribbble.com/users/7338576/screenshots/15684153/media/a52985d53636f23a01bed622925099c3.jpg?compress=1&resize=400x300">
<div class="ml-12 flex flex-col">
<div class="flex items-center">
<svg class="w-6 h-6 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z" clip-rule="evenodd" />
</svg>
<p class="text-phone-number-color text-lg font-bold tracking-27">0330 057 9957</p>
</div>
<p class="text-email-color my-3 text-lg font-semibold tracking-27">info#aidhumanity.co.uk</p>
<div class="flex">
<svg class="w-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z" clip-rule="evenodd" />
</svg>
<svg class="w-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z" clip-rule="evenodd" />
</svg>
<svg class="w-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z" clip-rule="evenodd" />
</svg>
<svg class="w-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z" clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
<p class="text-footer-links-color text-base font-medium leading-26 tracking-24 mt-12">Aid Humanity is proud to be a non-profit organization that passes 100% of our donations to charitable causes around the world.</p>
</div>
<!-- Second column -->
<div class="flex flex-col basis-10% border-solid border-orange-900 ml-28">
<span class="mb-3 font-semibold text-sm tracking-21">ABOUT US</span>
<div class="text-footer-links-color flex flex-col text-base font-medium leading-30 tracking-24">
<a class="link link-hover">Our Story</a>
<a class="link link-hover mt-1">Marketing</a>
<a class="link link-hover mt-1">Blog</a>
<a class="link link-hover mt-1">Zakat</a>
<a class="link link-hover mt-1 ">Get Involved</a>
<a class="link link-hover mt-1">Contact</a>
<a class="link link-hover mt-1 btn-primary">Donate</a>
</div>
</div>
<!-- Third column -->
<div class="flex flex-col basis-20% border-solidborder-2 border-orange-900 ml-28">
<span class="mb-3 text-link-heading-color font-semibold text-sm tracking-21">APPEALS</span>
<div class="text-footer-links-color flex flex-col text-base font-medium leading-30 tracking-24">
<a class="link link-hover mt-1">Build a Mosque</a>
<a class="link link-hover mt-1">Disaster & Emergency</a>
<a class="link link-hover mt-1">Appeals</a>
<a class="link link-hover mt-1">Water For All</a>
<a class="link link-hover mt-1">Sponsor an Orphan</a>
<a class="link link-hover mt-1">Hunger Appeal</a>
</div>
</div>
<!-- Fourth colmn -->
<div class="flex flex-col basis-10% border-solid border-yellow-900 ml-12">
<span class="mb-3 text-link-heading-color font-semibold text-sm tracking-21">NEWSLETTER</span>
<span class="label-text font-bold text-lg leading-28 tracking-45">Subscribe to the free newsletter and stay up-to date</span>
<div class="flex justify-center mt-5">
<div class="mb-3 xl:w-96">
<div class="input-group relative flex flex-wrap items-stretch w-full mb-4">
<input type="search" class="form-control relative min-w-0 block px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded-lg transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" placeholder="Your email" aria-label="Search" aria-describedby="button-addon2">
<button class="btn px-3 ml-2 py-2.5 bg-sky-400 text-white font-medium text-xs leading-tight uppercase rounded-lg shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out flex items-center" type="button" id="button-addon2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
And my tailwind.config.js looks like:
/** #type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
"footer-links-color": "#8892AC",
"footer-background": "#102558",
"phone-number-color": "#00ADE9",
"email-color": "#FFC100",
"link-heading-color": "#FFFFFF"
},
fontFamily: {
"montserrat": "Montserrat"
},
lineHeight: {
'30': '30px',
'28': '28px',
'26': '26px',
},
letterSpacing: {
'06': '-.06',
'6': '-.6',
'9': '-.9',
'21': '-.21px',
'24': '-.24px',
'27': '-.27px',
'45': '-.45px',
},
flexBasis: {
'10%': '10%',
'15%': '15%',
'20%': '20%',
'30%': '30%',
'35%': '35%',
'40%': '40%',
'50%': '50%',
'60%': '60%',
'70%': '70%',
}
},
},
plugins: [],
}
Although I have never used the tailwind class library, I suspect the css to override the opacity can be done the same way overriding any other value in css can be achieved. Define the selector class at a higher level in the initialization sequence, specify the property and new value and tell the interpreter that it is an important change.
The key takeaway here is the reserved word important which is applied after the new value. This is done by writing a space !important at the end of hte line. More about how !important works can be found at the following website:
https://developer.mozilla.org/en-US/docs/Web/CSS/important
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]
Is it possible to set the height and width of an element and have it shrink when the parent height is smaller than the child height?
I have a reusable icon button component and i want it to have a specific height and width as it is a square.
But when used inside an input element i want it to shrink so it will only use the available space/height of the input element.
Here is a little demo of it.
svg {
width: 1em;
height: 1em;
}
<script src="https://cdn.tailwindcss.com"></script>
<div class="bg-green-200 h-screen p-4 flex flex-col gap-4 items-start">
<button class="inline-flex items-center border border-transparent justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 p-2 text-2xl max-h-16 h-full w-16 bg-white hover:bg-green-50 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
<div class="mt-1 rounded border-2 border-transparent focus-within:ring-green-500 focus-within:border-green-500 bg-white flex items-center gap-1 p-4 text-lg h-16">
<input id="downshift-1-input" aria-autocomplete="list" aria-controls="downshift-1-menu" aria-labelledby="downshift-1-label" autocomplete="off" class="block w-full focus:outline-none" value="" />
<div class="flex items-center justify-center children:any-h-full h-full text-2xl">
<div class="flex items-center gap-1 text-gray-400">
<button class="inline-flex items-center border border-transparent justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 p-2 text-2xl max-h-16 h-full w-16 bg-white hover:bg-green-50 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button
><span
><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"></path></svg
></span>
</div>
</div>
</div>
</div>
I managed to get it to work for the height, but now the width is the problem when i use it in the input element. I tried setting it with max-width, but didn't succeed and i'm a little stuck right now.
Thanks in advance!!
You can use the new css property "aspect-ratio", and set it to "1/1" , it will maintain proportional dimensions while the elements width or height changes depending on its container.
check css-tricks for more details.
To expand on existing answers, you're setting a fixed width on it, but you need to think about the dimensions of this element in terms of aspect ratio, which in your case is 1:1. One way to define it is using Tailwind's utilities for the aspect-ratio property. You need to make sure to propagate h-full all the way to your element so that finally setting h-full on that element has any effect.
The actual changes you need to make is:
add h-full to the Flex container that's wrapping the 2nd close button, this will give effect to the h-full on that button
remove w-16 from both close buttons, because you want the width to depend on the height
instead add aspect-square, which will make width the same as height
If aspect-ratio's browser support isn't acceptable to you, the alternative is to use the padding hack provided by the #tailwindcss/aspect-ratio plugin.
Instead of using fixed values, you could use "100%" for height and width and use fixed pixel values for max-height and max-width. That way the child won't get larger than the parent, but also not larger than the max-values define.
Thanks to the input of Ala Mouhamed and silvenon i managed to get it to work by using aspect-ratio and a fixed height. When using it inside the input field i just pass h-auto to the icon button and override the fixed height. This way it will adjust to the height of the input -> Tailwind Play Demo
svg {
width: 1em;
height: 1em;
}
<script src="https://cdn.tailwindcss.com"></script>
<div class="bg-green-200 h-screen p-4 space-y-4">
<button class="inline-flex items-center border border-transparent justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 p-2 text-2xl h-16 aspect-square bg-white hover:bg-green-50 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
<div class="mt-1 rounded border-2 border-transparent focus-within:ring-green-500 focus-within:border-green-500 bg-white flex items-center gap-1 p-4 text-lg h-16">
<input id="downshift-1-input" aria-autocomplete="list" aria-controls="downshift-1-menu" aria-labelledby="downshift-1-label" autocomplete="off" class="block w-full focus:outline-none" value="" />
<div class="flex items-center justify-center children:any-h-full h-full text-2xl">
<div class="flex items-center gap-1 text-gray-400">
<button class="inline-flex items-center border border-transparent justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 p-2 text-2xl h-16 h-auto aspect-square bg-white hover:bg-green-50 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button
><span
><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"></path></svg
></span>
</div>
</div>
</div>
</div>
</div>
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.