I created a footer that I wanted to #include to other webpages. As such, I created #section('content'), then at the bottom #include('footer') then #endsection. Now this works only on my contact page which is showing the footer. But is not working on my home or blog pages. Below I will include the code I'm working on Laravel 7, using blade, tailwindcss, html/css. I tried multiple things like moving around #include, or #extends or #yeild but couldn't figure this out. Any help or direction would be appreciated.
When I inspect the homepage, for instance, the footer is being passed through but is mixed in with the navbar. When I inspect the contact page its placed where it should be at the bottom of the page. This has me stumped.
FOOTER
#extends('layout')
<footer>
<div class="flex justify-center bottom-0 bg-gray-800 h-18 pt-4 pb-4 static w-full">
<a href="https://paolotrulli.com" class="text-white hover:text-blue-800 m-2"><img class="h-10 w-10"
src="/images/global.svg"></a>
<a href="https://twitter.com/p_trulli" class="text-white hover:text-lue-800 m-2"><img class="h-10 w-10"
src="/images/twitter-black.svg"></a>
<a href="https://github.com/PT-83" class="text-white hover:text-blue-800 m-2"><img class="h-10 w-10"
src="/images/github.svg"></a>
<p class="text-white pt-4">Copyright 2020, Paolo Trulli</p>
</div>
</footer>
#yield('footer')
LAYOUT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.0.1/dist/alpine.js" defer></script>
<title>#yield('title')</title>
</head>
<html>
<body>
<div class="absolute inset-x-0 top-0">
<nav x-data="{ open: false }" #keydown.window.escape="open = false" class="bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center h-24">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/images/startup.svg" alt="icon" />
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline">
<a href="/home"
class="px-4 py-2 rounded-md text-lg font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
<a href="/contact"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
<a href="/blog"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
<a href="po"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
<a href="#"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button #click="open = !open"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div :class="{'block': open, 'hidden': !open}" class="hidden md:hidden">
<div class="px-2 pt-2 pb-3 sm:px-3">
<a href="/home"
class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
<a href="/contact"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
<a href="/blog"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
<a href="#"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
<a href="#"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="/images/0.jpeg" alt="My Picture" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Paolo Trulli</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">paolo.g.trulli#gmail.com</div>
</div>
</div>
</div>
</nav>
#yield('content')
</body>
</html>
CONTACT PAGE
#extends('layout')
#section('title', 'Contact')
#section('content')
<div class="bg-gray-700 text-center text-lg full-screen pt-6">
<h1 class="pb-8 text-white text-xl">Contact</h1>
<form action="/contact" method="POST">
<div class="justify-center relative">
<label>
<input class="border-2 border-gray-800 border-black h-10 w-1/4" type='text' placeholder="Name"
autocomplete="off">
</label>
</div>
<div class="justify-center pt-4">
<label>
<input class="border-2 border-gray-800 h-10 w-1/4" type="text" placeholder="Email" autocomplete="off">
</label>
</div>
<div class="justify-center pt-4">
<label>
<input class="border-2 border-gray-800 h-20 w-1/4" type="text" placeholder="Type Text Here"
autocomplete="off">
</label>
</div>
#csrf
<div class="text-center pt-6">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded justify-center">
Submit</button>
<h3 class="pt-6 text-white">I will not SPAM you and your data is Safe!</h3>
<div class="bg-cover content-center flex justify-center min-h-50">
<img src="/images/contact.svg" alt="background image">
</div>
</div>
</form>
#include('footer')
#endsection
HOME PAGE
#extends('layout')
#section('title', 'Home')
#section('content')
<main>
<div class="bg-gray-700 text-center text-gray-200 tracking-wider leading-loose h-full">
<h1 class="pt-6 pb-6 text-lg font-semibold">
A Website Built and Designed By Me!
</h1>
<img class="container-sm mx-auto border-2 border-gray-800" src="/images/0.jpeg">
<p class="pt-6 text-base capitalize font-semibold">
Who am I you ask?
</p>
<div class="inline-flex">
<p class="flex-1"></p>
<p class="flex-1 text-center pt-3 text-justify">
I am a father of two, a husband of one, and someone who loves to build things. I tend to find
something I enjoy
get obsessed with it, and ditch if for something new. Rinsing and Repeating the process. My latest
obsession, in
case you didn't notice, creating this website by programming it myself. I have been diving deep into the
world
of coding, although it takes time to learn, and the many frustrating issues along the way, I can say for
certain
I love to learn and build.
</p>
<p class="flex-1"></p>
</div>
<p class="text-center pt-6 capitalize font-semibold">
So what will this site be or provide?</p>
<div class="inline-flex pt-3">
<p class="flex-1"></p>
<p class="flex-1 text-justify">
I plan to blog about
various topics that interest me. Topics will be random, interesting, and makes me curious. Also, I will
use
this site to showcase a portfolio of work I complete, beginning with this website and adding projects as
I
go.
</p>
<p class="flex-1"></p>
</div>
</div>
</div>
</main>
#include('footer')
#endsection
Lastly BLOG PAGE
#extends('layout')
#section('title', 'Blog')
#section('content')
<main>
<div class="bg-gray-700 text-center text-gray-700 h-screen text-lg">
<h3 class='text-gray-300 pt-6 text capitalize'>A place where I create posts on random things that interest me
</h3>
<div class="pt-6">
<form action="/blog" method="post">
</div>
<label class=""></label>
<input type="text" name="title" autocomplete="off">
#csrf
<div class="text-center pt-6">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded justify-center">
Add Blog Post</button>
</div>
</form>
<p style="color: red">#error('title') {{ $message }} #enderror</p>
<ul>
#forelse ($blogs as $blog)
<li>{{ $blog->title }}</li>
#empty
<li>
<h3 class="text-center pt-4 text-red-500">No Blog Posts Yet</h3>
</li>
#endforelse
</ul>
</div>
</div>
</main>
#include('footer')
#endsection
Simply, improper html tags. Lesson learned to ensure open and close tags are equal. Because I was short </div> tags my code was suffering and not working as it should.
Credit goes to #kerbholz
Related
Using tailwind, I am trying to get the "footer" to the bottom of the page. Nothing I do seems to get it where it needs to be. I am wondering if fresh eyes can help me here.
<template>
<Head title="Log in" />
<div class="min-h-screen flex bg-gray-900">
<div class="w-1/2 flex-1 flex flex-col justify-center">
<div class="mx-auto w-full max-w-sm lg:w-96">
<div>
<div class="tracking-wider uppercase flex justify-center text-4xl md:mt-0 md:order-1 font-logo">
<div class="text-white">REALKINK</div><div class="text-red-600">MEN</div>
</div>
<div class="mt-6 relative">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t border-gray-700" />
</div>
<div class="relative flex justify-center text-sm">
</div>
</div>
<h2 class="flex justify-center mt-6 text-xl font-extrabold text-gray-300">Sign in to your account</h2>
</div>
<div class="mt-8">
<div class="mt-6">
<form action="#" method="POST" class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-300"> Email address </label>
<div class="mt-1">
<input id="email" name="email" type="email" autocomplete="email" required="" class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm" />
</div>
</div>
<div class="space-y-1">
<label for="password" class="block text-sm font-medium text-gray-300"> Password </label>
<div class="mt-1">
<input id="password" name="password" type="password" autocomplete="current-password" required="" class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm" />
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded" />
<label for="remember-me" class="ml-2 block text-sm text-gray-300"> Remember me </label>
</div>
<div class="text-sm">
Forgot your password?
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">Sign in</button>
</div>
</form>
</div>
</div>
</div>
<div class="sticky bottom-0 font-logo md:h-10 bg-gray-100 dark:bg-gray-900">
<div class="max-w-7xl mx-auto py-2 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
<div class="text-sm flex justify-center space-x-6 md:order-2">
<a href="/terms-of-service" class="text-gray-500 hover:text-red-700">
<span class="sr-only">Terms</span>
Terms
</a>
<a href="/privacy-policy" class="text-gray-500 hover:text-red-700">
<span class="sr-only">Privacy</span>
Privacy
</a>
<a href="#" class="text-gray-500 hover:text-red-700">
<span class="sr-only">Support</span>
Support
</a>
</div>
<div class="mt-2 md:mt-0 md:order-1">
<p class="text-center text-xs text-gray-500">© 2022 Real Kink LLC. All rights reserved.</p>
</div>
</div>
</div>
</div>
<div class="hidden lg:block relative w-0 flex-1">
<img class="absolute inset-0 h-full w-full object-cover" src="https://64.media.tumblr.com/7395cca2c3ec57278b71a63e3221d36a/482bae774b0fde2f-91/s2048x3072/a10ae44d666d4f8a0adec40b9f0030748c6f8745.jpg" alt="" />
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import { Head, Link } from '#inertiajs/inertia-vue3';
export default defineComponent({
components: {
Head,
Link,
},
props: {
canResetPassword: Boolean,
status: String
},
data() {
return {
form: this.$inertia.form({
email: '',
password: '',
remember: false
})
}
},
methods: {
submit() {
this.form
.transform(data => ({
... data,
remember: this.form.remember ? 'on' : ''
}))
.post(this.route('login'), {
onFinish: () => this.form.reset('password'),
})
}
}
})
</script>
I have put ALL the code here just to keep it clear and simple without any variables of issues. Again, I am just trying to get the footer to the bottom of the left column. Any help would be very appreciated!
I'm using tailwindcss inn reactjs which has div element divided into two parts, one is 9-12 and the second is 3-12. The 9-12 part is overlapping navbar one element and I'm able to click that element, but the 3-12 part overlaps 3 elements i.e. Experinece, Projet and Contact in navbar, which is not clickable.
Here's the code for navbar section:
<nav className="bg-gray-900 fixed w-full">
<div className="max-w-7xl mx-auto px-8">
<div className="flex items-center justify-between h-24">
<div className="w-full justify-between flex items-center">
<a className="flex-shrink-0" href="/">
<img
className="h-20 w-20 mt-4"
src={logo}
alt="Pradeep Anand"
/>
</a>
<div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4">
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
About
</a>
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-delay="100"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
Experience
</a>
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-delay="200"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
Project
</a>
<a
className="text-gray-300 hover:text-pink-600 dark:hover:text-white px-3 py-2 text-sm font-medium duration-300"
data-aos="fade-down"
data-aos-delay="300"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
href="/#"
>
Contact
</a>
</div>
</div>
</div>
<div className="block">
<div className="ml-4 flex items-center md:ml-6"></div>
</div>
<div className="-mr-2 flex md:hidden">
<button className="text-gray-800 dark:text-white hover:text-gray-300 inline-flex items-center justify-center p-2 rounded-md focus:outline-none">
<svg
width="20"
height="20"
fill="currentColor"
className="h-8 w-8"
viewBox="0 0 1792 1792"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"></path>
</svg>
</button>
</div>
</div>
</div>
</nav>
Here's the code for another component:
<div className="flex px-48 flex-wrap">
<div className="w-9/12 pt-32 pb-10">
<h2
className="text-2xl text-pink-600 intro"
data-aos="fade-up"
data-aos-delay="300"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
>
Hi, my name is
</h2>
<br />
<h1
className="text-8xl"
data-aos="fade-up"
data-aos-delay="500"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
>
Pradeep
<br />
Anand
</h1>
<div
className="w-16 h-2 bg-pink-800 mt-3"
data-aos="fade-right"
data-aos-delay="300"
data-aos-anchor-placement="top-bottom"
/>
<button
className="my-28 px-6 py-4 transition ease-in duration-200 uppercase rounded-md hover:bg-pink-800 hover:bg-opacity-30 hover:text-white border-2 border-pink-900 focus:outline-none"
data-aos="fade-up"
data-aos-delay="500"
data-aos-duration="1000"
data-aos-anchor-placement="top-bottom"
>
Get In Touch
</button>
</div>
<div
className="w-3/12 pt-48"
data-aos="fade-left"
data-aos-delay="800"
data-aos-duration="1000"
data-aos-anchor-placement="top-center"
>
<h3 className="text-sm text-pink-800 font-bold intro">
Introduction
</h3>
<h4 className="text-4xl py-4">
Software Developer by Profession. Web Dev by passion.
</h4>
<p>I'm a software engineer from India. I make things for web.</p>
</div>
</div>
please provide z-index to the nav bar to avoid this . since it has position fixed property
instead of the "..." in the end of the title in mobile view how do I get to break the line so that the entire title is visible.
i have tried applying span but it doesn't work either. please help.
<div class="bg-indigo-700 px-4 py-5 border-b rounded-t sm:px-6">
<h3 class="text-lg leading-6 font-medium text-white">
Choose the clip you want and download.
</h3>
</div>
<div class="bg-white shadow overflow-hidden sm:rounded-md">
<ul class="divide-y divide-gray-200">
{%for links in url_dict:%}
<li>
<a class="block hover:bg-gray-50">
<div class="px-4 py-4 sm:px-6">
<div class="flex items-center justify-between">
<!-------------------------------------------TITLE OF THE VIDEO--------------------------->
<h3 class="text-sm font-thin text-gray-700 truncate">
<a href='{{links}}'>{{url_dict[links][0]}}</a>
</h3>
<!----------------------------------------DOWNLOAD BUTTON---------------------------------->
<div class="ml-2 flex-shrink-0 flex">
<p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 hover:bg-green-200 text-green-800 hover:text-green-700">
Download
</p>
</div>
</div>
<div class="mt-2 sm:flex sm:justify-between">
<div class="sm:flex">
<p class="flex items-center text-sm font-light text-gray-500">
length: {{url_dict[links][1]}}
</p>
</div>
</div>
</div>
</a>
</li>
{% endfor %}
</ul>
<button type="button" class="inline-flex items-center m-4 px-4 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
View more
</button>
</div>
You need to remove the truncate class from the <h3> element in the mobile view.
Use md: to indicate that truncate class is applicable only on medium and large screens
<!-------------------------------------------TITLE OF THE VIDEO--------------------------->
<h3 class="text-sm font-thin text-gray-700 md:truncate">
<a href='{{links}}'>{{url_dict[links][0]}}</a>
</h3>
I am creating a form that will be fixed to the top of a page. However, when I implement position: fixed to the parent div of the form, the search bar and buttons do not work. Here is the code:
<div className="fixed flex xl:pl-64 md:pl-2 sm:pl-2 p-4 w-2/4 bg-red-600 top-0 w-full ">
<h1 className="text-2xl text-white float-left"> Customer Search </h1>
<input className="border-2 border-gray-300 bg-white h-10 px-5 pr-16 rounded-lg text-sm focus:outline-none"
name="search"
placeholder="Search for..."
type="text"/>
<div className="text-white py-2 px-4 rounded border-2 border-red-100"> search </div>
<div className="text-white py-2 px-4 rounded border-2 border-red-100"> filter </div>
<div className="text-white py-2 px-4 rounded border-2 border-red-100"> clear </div>
</div>
Now, I did it in JSFiddle and the buttons do work. So now I am wondering, what could be wrong with my code? When I remove fixed, the search bar and buttons work just fine.
Welp, I fixed it. Much simpler than anticipated. I just added z-10 to the header. I guess it was being overlapped by some non-viewable thing.
<div style={{'height': '900px'}} className="w-full flex">
<div className="fixed xl:pl-64 md:pl-2 sm:pl-2 p-4 w-full bg-red-600 sm:pb-4 z-10">
<h1 className="text-4xl text-white pl-4 z-50"> Users </h1>
<p className="pt-2 pl-4">
<input className="w-3/4 rounded h-8 border-gray-400 border-2" type="text" placeholder="Search.." name="search"/>
<button className="text-white fa-lg pl-4" type="submit"><FontAwesomeIcon icon={faSearch}/></button>
<button className="ml-6 py-2 px-5 bg-gray-400 shadow z-50">Add User</button>
</p>
</div>
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>