I'm using tailwind with cdn, and just copy pasting one of the dropdown lists on flowbite:
<button id="dropdownDefault" data-dropdown-toggle="dropdown" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">Dropdown button <svg class="ml-2 w-4 h-4" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></button>
<!-- Dropdown menu -->
<div id="dropdown" class="z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 block" data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(327px, 70px, 0px);">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
Dashboard
</li>
<li>
Settings
</li>
<li>
Earnings
</li>
<li>
Sign out
</li>
</ul>
</div>
But this is what I'm getting:
Any idea what could be causing this?
you need to include the FlowBite <script> before the end of the body element
also, require the minified stylesheet inside the <head> tag like this :
<head>
<link rel="stylesheet" href="https://unpkg.com/flowbite#1.5.1/dist/flowbite.min.css" />
</head>
<body>
<button id="dropdownDefault" data-dropdown-toggle="dropdown" class="inline-flex items-center rounded-lg bg-blue-700 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
Dropdown busdatton <svg class="ml-2 h-4 w-4" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<!-- Dropdown menu -->
<div id="dropdown" class="z-10 block w-44 divide-y divide-gray-100 rounded bg-white shadow dark:bg-gray-700" data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="bottom" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(327px, 70px, 0px);">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefault">
<li>
Dashboard
</li>
<li>
Settings
</li>
<li>
Earnings
</li>
<li>
Sign out
</li>
</ul>
</div>
<script src="https://unpkg.com/flowbite#1.5.1/dist/flowbite.js"></script>
</body>
Here an example without library, only react and tailwind.
const Sidebar = () => {
const [isOpen, setOpen] = useState(false);
const handleDropDown = () => {
setOpen(!isOpen);
};
return (
<div className="dropdown">
<button
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center"
onClick={handleDropDown}
>
Steps
<svg
className="ml-2 w-4 h-4"
aria-hidden="true"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M19 9l-7 7-7-7"
></path>
</svg>
</button>
<div
id="dropdown"
className={`z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow ${
isOpen ? "block" : "hidden"
}`}
>
<ul className=" z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow ">
<li
>
<a href="#" className="block py-2 px-4 hover:bg-gray-100">
blablabla
</a>
</li>
</ul>
</div>
</div>
);
};
Related
I have built a file upload in html but clicking the html element doesn't show up the upload dialog, have no idea why is it?
<div class="flex flex-col my-1">
<div tabindex="0" class="dropzone cursor-pointer focus-within:ring-2 flex flex-col justify-center items-center text-center rounded-lg w-full mt-4">
<input accept="image/bmp,image/gif,image/heic,image/jpeg,image/png,image/svg+xml,image/webp" type="file" autocomplete="off" tabindex="-1" style="display: none;">
<div class="bg-brand rounded-lg focus:outline-none focus:shadow-none flex w-full p-2 h-full">
<div class="p-8 focus:outline-none focus:shadow-none relative p-3 focus:outline-none focus:shadow-none border-2 border-dashed w-full flex flex-col justify-center items-center rounded-lg text-xs border-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="mb-4" width="36" height="36" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="15" y1="8" x2="15.01" y2="8"></line>
<rect x="4" y="4" width="16" height="16" rx="3"></rect>
<path d="M4 15l4 -4a3 5 0 0 1 3 0l5 5"></path>
<path d="M14 14l1 -1a3 5 0 0 1 3 0l2 2"></path>
</svg>
<span>Drag and drop an image or click to upload</span>
<div aria-hidden="true" class="whitespace-nowrap overflow-hidden text-sm invisible h-0">Drag and drop an image or click to upload</div>
</div>
</div>
</div>
</div>
You can associate a label with an input elsewhere in the code, by assigning an id to the input tag, and referencing that id in the for attribute of the label. Or you can wrap an input tag with the label element, and it will do the same
For eg:
<input id="fileUpload" style="display:none">
...
...
Some Code
...
...
<label for="fileUpload">Upload File</label>
In your case, you can opt for the second option. Instead of wrapping the hidden input element in a div element wrap it in a label element. That will allow you to trigger the input inside the label when any point in the label is clicked.
<div class="flex flex-col my-1">
<!-- Changed this from div to label. Also added a style of cursor:pointer -->
<label tabindex="0" class="dropzone cursor-pointer focus-within:ring-2 flex flex-col justify-center items-center text-center rounded-lg w-full mt-4" style="cursor:pointer">
<input accept="image/bmp,image/gif,image/heic,image/jpeg,image/png,image/svg+xml,image/webp" type="file" autocomplete="off" tabindex="-1" style="display: none;">
<div class="bg-brand rounded-lg focus:outline-none focus:shadow-none flex w-full p-2 h-full">
<div class="p-8 focus:outline-none focus:shadow-none relative p-3 focus:outline-none focus:shadow-none border-2 border-dashed w-full flex flex-col justify-center items-center rounded-lg text-xs border-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="mb-4" width="36" height="36" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="15" y1="8" x2="15.01" y2="8"></line>
<rect x="4" y="4" width="16" height="16" rx="3"></rect>
<path d="M4 15l4 -4a3 5 0 0 1 3 0l5 5"></path>
<path d="M14 14l1 -1a3 5 0 0 1 3 0l2 2"></path>
</svg>
<span>Drag and drop an image or click to upload</span>
<div aria-hidden="true" class="whitespace-nowrap overflow-hidden text-sm invisible h-0">Drag and drop an image or click to upload</div>
</div>
</div>
</label>
</div>
Whenever I click on my #dropDown button, it functions as intended and opens the dropdown menu; however, the click also hits the underneath which is also clickable. I don't want the button click event to also hit the div underneath, as that is not the intended function.
<ul #postCard *ngFor="let post of posts; let i = index" [class.selected]="getSelected() == i || currPost == post" (click)="setSelected(i)" (click)="setPost(post)" id="jobcard" class="postcard menu px-8 py-4 my-4 mx-4 bg-white border-gray border hover:bg-gray-200 rounded-lg shadow-md dark:bg-gray-800">
<li class="menu-title">
<div class="flex flex-row items-stretch justify-between relative">
<h2 class="text-2xl">{{post.title}}</h2>
<div class="flex flex-col right-0 absolute" [style.display]="'block'">
<h2 id="dateofjob" class="text-lg justify-self-end justify-end justify-items-end block">{{post.date_of_job}}</h2>
</div>
</div>
<div class="flex flex-row relative">
<div>
<h2 class="mt-4 text-lg font-light">Description:</h2>
<p>{{post.care_description}}</p>
</div>
<p id="timeofjob" class="font-light justify-self-end justify-end justify-items-end inline right-0 absolute">Start: {{post.start_time}} | End: {{post.end_time}}</p>
</div>
<div class="flex items-center justify-start w-full">
<div class="relative inline-block w-full">
<button #dropDown (click)="toggleDropdown()" class="dropdownbutton mt-2 relative z-10 block p-2 text-gray-700 bg-white border border-transparent rounded-md dark:text-white focus:border-blue-500 focus:ring-opacity-40 dark:focus:ring-opacity-40 focus:ring-blue-300 dark:focus:ring-blue-400 focus:ring dark:bg-gray-800 focus:outline-none">
<svg class="w-5 h-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<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" />
</svg>
</button>
<div *ngIf="shown" class="absolute left-0 z-20 w-full py-2 mt-2 bg-white rounded-md shadow-xl dark:bg-gray-800">
<h2 class="block px-4 py-3 text-gray-800">Your Application: </h2><a class="block px-4 py-3 text-sm text-gray-800 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"> {{post.applications[0].message}} </a>
</div>
</div>
</div>
</li>
</ul>
It's happening because the event are bubbling, both the clicks on the button and the div get registered. We can tell our function to stop further propagation of the current event by using event.stopPropagation()
In your, capture the $event in your function as a parameter HTML
<button #dropDown (click)="toggleDropdown($event)" class="dropdownbutton mt-2 relative z-10 block p-2 text-gray-700 bg-white border border-transparent rounded-md dark:text-white focus:border-blue-500 focus:ring-opacity-40 dark:focus:ring-opacity-40 focus:ring-blue-300 dark:focus:ring-blue-400 focus:ring dark:bg-gray-800 focus:outline-none">
<svg class="w-5 h-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<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" />
</svg>
</button>
and then in your .ts component, use that event to stop further bubbling of events, so that the div click won't be called:
toggleDropdown($event: Event):void {
$event.stopPropagation();
}
try using stopPropagation in the click function.
check out this link for more details:
https://www.freecodecamp.org/news/a-simplified-explanation-of-event-propagation-in-javascript-f9de7961a06e/
I have created the following responsive navigation bar with Tailwind and have a problem with the dropdown button ("Folgen") which shows the content always somewhere else on the x-axis than the button (depending on the window width).
How could I make sure that the dropdown always stays within the browser window (no overflow outside of the window) and stay close to the button depending on the browser width?
<nav class="bg-blue-800 shadow-lg sticky top-0 z-50 h-[3.75rem]">
<div class="max-w-6xl mx-auto px-4 h-[3.75rem]">
<div class="flex justify-between h-[3.75rem]">
<div class="flex space-x-7">
<div>
<!-- Website Logo -->
<a class="flex items-center py-4 px-2 text-white font-bold text-lg" href="<?= $site->url() ?>"><?= $site->title()->html() ?></a>
</a>
</div>
<!-- Primary Navbar items -->
<div class="hidden md:flex items-center space-x-1">
<?php foreach ($site->children()->listed() as $item): ?>
<a class="py-4 px-2 text-white font-semibold hover:text-white-500 hover:bg-blue-500 transition duration-300" <?php e($item->isOpen(), 'aria-current ') ?> href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
<?php endforeach ?>
</div>
</div>
<!-- This is a search component -->
<ul class="flex items-center ml-auto space-x-1">
<div class="md:flex hidden items-center ml-auto bg-blue-800 space-x-1 pr-4">
<form method="post" action="<?= page('search')->url() ?>">
<div class="relative text-gray-600 focus-within:text-gray-800">
<span class="absolute inset-y-0 left-0 flex items-center pl-2">
<button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</button>
</span>
<input type="search" name="q" class="py-2 text-sm text-gray-900 bg-white rounded-md pl-10 focus:outline-none focus:bg-white focus:text-gray-900" placeholder="Suche..." value="<?php echo (!empty($query)) ? esc($query) : '' ?>" autocomplete="off">
</div>
</form>
</div>
<!-- Language selector -->
<?php foreach($kirby->languages()->not($kirby->language()) as $language): ?>
<?php if ($page->translation($language->code())->exists()): ?>
<?= svg('assets/icons/OOjs_UI_icon_language-ltr-invert.svg') ?>
<li <?php e($kirby->language() == $language, ' class="active text-white"') ?>>
<a href="<?= $page->url($language->code()) ?>" hreflang="<?php echo $language->code() ?>" class="text-white">
<?= html($language->name()) ?>
</a>
</li>
<?php endif ?>
<?php endforeach ?>
</ul>
<!-- Social Navbar items -->
<div class="group hidden md:flex">
<button
class="outline-none focus:outline-none px-3 py-1 bg-blue-800 text-white rounded-sm flex items-center min-w-32"
>
<span class="pr-1 font-semibold flex-1">Folgen</span>
<span>
<svg
class="fill-current h-4 w-4 transform group-hover:-rotate-180
transition duration-150 ease-in-out"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
/>
</svg>
</span>
</button>
<ul
class="bg-gray-200 inline-flex transform scale-0 group-hover:scale-100 absolute transition duration-150 ease-in-out origin-top top-full right-0 left-auto"
>
<li class="items-center inline-flex py-2"><?php snippet('social') ?></li>
</ul>
</div>
<!-- Mobile menu button -->
<div class="md:hidden flex ml-4 items-center">
<button class="outline-none mobile-menu-button" aria-label="Navigation icon">
<svg class=" w-7 h-7 text-white hover:text-blue-500 "
x-show="!showMenu"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- mobile menu -->
<div class="hidden mobile-menu text-center bg-blue-600">
<ul class="inline-block">
<?php foreach ($site->children()->listed() as $item): ?>
<li><a class="block px-2 py-4 text-white hover:bg-blue-500 transition duration-300" <?php e($item->isOpen(), 'aria-current ') ?> href="<?= $item->url() ?>"><?= $item->title()->html() ?></a></li>
<?php endforeach ?>
<div class="inline-flex px-2 py-4">
<form method="post" action="<?= page('search')->url() ?>">
<div class="relative text-gray-600 focus-within:text-gray-800">
<span class="absolute inset-y-0 left-0 flex items-center pl-2">
<button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</button>
</span>
<input type="search" name="q" class="py-2 text-sm text-gray-900 bg-white rounded-md pl-10 focus:outline-none focus:bg-white focus:text-gray-900" placeholder="Suche..." value="<?php echo (!empty($query)) ? esc($query) : '' ?>">
</div>
</form>
</div>
<div class="inline-flex px-2 py-4 text-white filter invert"><?php snippet('social') ?></div>
</ul>
</div>
<script>
const btn = document.querySelector("button.mobile-menu-button");
const menu = document.querySelector(".mobile-menu");
btn.addEventListener("click", () => {
menu.classList.toggle("hidden");
});
</script>
</nav>
You can find a working example over here.
You can add relative class on the container which contains the button and the dropdown. Your dropdown, which has the right-0 class, will then be positioned on the right edge of the container instead of the browser window like it is now. Working example here.
I have a navbar and sidebar component in my nextjs app.
In my index component I'm using useState to show and hide sidebar on mobile device.
It works perfectly fine but I want to add animation when user clicks on hamburger menu, the sidebar should be animated left to right and when clicked on close icon it should go back to right to left. FYI I am using tailwind css.
Here's the code:
indexjs file:
export default function Home() {
const [sidebar, setSidebar] = useState(false);
return(
<>
<Navbar sidebar={sidebar} setSidebar={setSidebar} />
{sidebar ? (
<div className={sidebar ? "transform-x-0" : "transform-x-full"}>
<Sidebar sidebar={sidebar} setSidebar={setSidebar} />
</div>
) : null}
</>
)
Navbar.js:
const Navbar = ({ sidebar, setSidebar }) => {
return (
<div>
<header className="px-4 max-w-desktop mx-auto text-blacklight">
<nav
className="
flex
lg:flex-row
items-center
flex-auto
justify-between
lg:mx-auto
md:py-6
py-4
relative
navigation
"
id="navigation"
>
<div className="flex flex-row items-center">
<img src="./assets/logo.svg" alt="fab systems" />
<h2 className="text-lg font-extrabold flex-none ml-1 leading-none">
FAB <br />
SYSTEMS
</h2>
</div>
<ul
className="
lg:flex lg:flex-row
flex-col
max-w-full
lg:w-2/3
mt-4
lg:mt-0
hidden
lg:items-center
justify-between
flex-none
"
>
<li className="menu-links">
Features
</li>
<li className="menu-links">
Pricing
</li>
<li className="menu-links">
Customer Results
</li>
<li className="menu-links">
About
</li>
<li className="menu-links">
Blog
</li>
<li className="menu-links">
Support
</li>
<div className="flex flex-col">
<li
className="
menu-links
bg-dark-blue
py-2
rounded-full
text-white
font-semibold
px-4
"
>
Free Demo
</li>
<p className="absolute right-0 w-screen text-right bottom-0 text-sm">
or call sales
<a href="https://twitter.com/" className="text-blue">
+91 982-488-5838
</a>
</p>
</div>
</ul>
<div className="lg:hidden">
<svg
className="w-8 h-8 lg:hidden"
id="hamburger"
onClick={() => setSidebar(true)}
fill="none"
stroke="#354650"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
></path>
</svg>
</div>
</nav>
</header>
</div>
);
};
export default Navbar;
Sidebar.js:
import React from "react";
const Sidebar = ({ sidebar, setSidebar }) => {
const hideSidebar = () => {
setSidebar(!sidebar);
};
return (
<div
className="
overflow-x-hidden
min-h-screen
absolute
z-50
bg-dark-green
lg:px-12
px-4
md:py-6
py-4
transform
left-0
w-screen
transition
duration-300
top-0
"
id="mobile-nav"
>
<div className="flex flex-row justify-between items-center">
<div>
<img src="./assets/logo.svg" alt="fab systems" />
</div>
<svg
className="w-8 h-8 lg:hidden mr-2"
id="close"
onClick={hideSidebar}
fill="none"
stroke="#FFFFFF"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</div>
<ul className="text-xl text-white my-4">
<li className="menu-links py-4 border-gray-600 border-b-2">
Features
</li>
<li className="menu-links py-4 border-gray-600 border-b-2">
Pricing
</li>
<li className="menu-links py-4 border-gray-600 border-b-2">
Customer Results
</li>
<li className="menu-links py-4 border-gray-600 border-b-2">
About
</li>
<li className="menu-links py-4 border-gray-600 border-b-2">
Blog
</li>
<li className="menu-links py-4 border-gray-600 border-b-2">
Support
</li>
<li className="menu-links py-4">
Free Demo
</li>
</ul>
<div className="relative py-1 w-screen flex flex-row pr-4">
<input
type="email"
className="
p-2
px-3
border-gray-400
rounded-tl rounded-bl
border
text-sm
relative
max-w-full
w-full
"
placeholder="Enter your phone"
/>
<button
className="
py-2
text-white
rounded-tr-full rounded-br-full
bg-dark-blue
text-sm
px-4
mr-4
sm:w-1/4
w-1/2
border border-blue-600
-ml-2
"
>
Try Free Demo
</button>
</div>
</div>
);
};
export default Sidebar;
Can you try this?
<div className={`sidebar ${sidebar ? "transform-x-0" : "transform-x-full"}`}>
And give .sidebar transition ?
I'm using Tailwind framework to build a Dropdown component.
I'm trying to extend the div of the dropdown with the contents of it. As the e-mail gets bigger, the wider the dropdown should be. If I remove the absolute of the dropdown, the hole menu goes somewhere else.
This is my HTML:
<html>
<head>
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="relative inline-block text-left">
<div>
<span class="rounded-md shadow-sm">
<button
type="button"
class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
>
Options
<svg
class="-mr-1 ml-2 h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
>
<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"
/>
</svg>
</button>
</span>
</div>
<div class="origin-top-left absolute left-0 mt-2 w-auto max-w-xs rounded-md shadow-lg">
<div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<div class="flex items-center px-4 py-2 text-sm text-gray-700 cursor-default rounded-t-md" role="menuitem">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="ml-2">
<p>Tom Cook</p>
<p class="font-bold truncate">tom#example.com</p>
</div>
</div>
<div class="border-t border-gray-200"></div>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
Your Profile
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
Settings
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-b-md" role="menuitem">
Sign out
</a>
</div>
</div>
</div>
</body>
</html>
Thanks.
I'm not familiar with tailwind, but by checking the default styles it assigns in the inspector I determined that the problem is caused by images (img tags) having a default max-width: 100% assigned to them, which makes the layout calculation confusing in this case, since it's container does not have a given width.
This can be solved by adding the max-w-none class to the image to disable this rule like this:
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full max-w-none" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
One way is to use the CSS-property width: max-content;, like below (I added an id to the relevant drop down for easier reading).
#my-drop-down .origin-top-left {
width: max-content;
}
<html>
<head>
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="relative inline-block text-left" id="my-drop-down">
<div>
<span class="rounded-md shadow-sm">
<button
type="button"
class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150"
>
Options
<svg
class="-mr-1 ml-2 h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
>
<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"
/>
</svg>
</button>
</span>
</div>
<div class="origin-top-left absolute left-0 mt-2 w-auto max-w-xs rounded-md shadow-lg">
<div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<div class="flex items-center px-4 py-2 text-sm text-gray-700 cursor-default rounded-t-md" role="menuitem">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</div>
<div class="ml-2">
<p>Tom Cook</p>
<p class="font-bold truncate">tom#example.com</p>
</div>
</div>
<div class="border-t border-gray-200"></div>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
Your Profile
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
Settings
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-b-md" role="menuitem">
Sign out
</a>
</div>
</div>
</div>
</body>
</html>