I have set max width to max-w-screen-2xl but the navbar is ignoring that and going outside the max width value. I have set max-w-screen-2xl for other sections and they are just workingfine. How to fix this?
<div className='flex items-center justify-center max-w-screen-2xl mx-auto'>
<div className="navbar nav-container bg-base-100 max-w-[90%] w-[90%] fixed top-3 z-50 px-8 py-6">
<div className="navbar-start">
<div className="dropdown">
<label tabIndex={0} className="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
</label>
</div>
<button onClick={()=>navigate('/')} className="btn btn-sm btn-ghost normal-case text-xl">daisyUi</button>
</div>
<div className="navbar-center hidden lg:flex">
<ul className="menu menu-horizontal p-0">
<li><a>Item 1</a></li>
<li><a>Item 3</a></li>
</ul>
</div>
<div className="navbar-end">
<button onClick={()=>navigate('/register')} className="btn btn-sm">Register</button>
</div>
</div>
</div>
after the percentage number, you need to determine the value from which to calculate the percentage. at this code
'''
max-w-[90%] w-[90%]
'''
Related
Is there a way to create a tailwind css alert like the Alert in material-ui:
<Alert severity="error">This is an error alert — check it out!</Alert>
You can use this alert div.
<div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" role="alert">
<p class="font-bold">Be Warned</p>
<p>This is an error alert — check it out!</p>
</div>
<div class="text-center py-4 lg:px-4">
<div class="p-2 bg-red-400 items-center text-red-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert">
<span class="flex rounded-full bg-red-500 uppercase px-2 py-1 text-xs font-bold mr-3">Alert</span>
<span class="font-semibold mr-2 text-left flex-auto">Make Sure To Follow Our Instagram Account</span>
<svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" />
</svg>
</div>
</div>
You can get more snippet on the official tailwinds website
I have everything working with one of the examples found on the website but for some reason I cannot seem to get the mobile navbar to show when clicking. Can someone take a peek and tell me what I'm missing please?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Test</title>
<link rel="stylesheet" href="<%= Routes.static_path(#conn, "/css/app.css") %>"/>
<script defer type="text/javascript" src="<%= Routes.static_path(#conn, "/js/app.js") %>"></script>
</head>
<div>
<nav class="bg-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<%= img_tag(Routes.static_path(#conn, "/images/logo.png")) %>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline">
Dashboard
Team
Projects
Calendar
Reports
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button class="p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-gray-700" 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>
<div #click.away="open = false" class="ml-3 relative" x-data="{open: false }">
<div>
<button #click="open = !open" class="max-w-xs flex items-center text-sm rounded-full text-white focus:outline-none focus:shadow-solid">
<img class="h-8 w-8 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="" />
</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg">
<div class="py-1 rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical">
Your Profile
Settings
Sign out
</div>
</div>
</div>
</div>
</div>
<!-- code that is displayed when viewing mobile screens -->
<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="block h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path x-show="open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path x-show="!open" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div :class="{ 'block': open, 'hidden md:hidden': !open }" #click.away="open = false" x-data="{open: false}" x-show="open">
<div class="px-2 pt-2 pb-3 sm:px-3">
Dashboard
Team
Projects
Calendar
Reports
</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="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-3">
<div class="text-base font-medium leading-none text-white">Tom Cook</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">tom#example.com</div>
</div>
</div>
<div class="mt-3 px-2">
Your Profile
Settings
Sign out
</div>
</div>
</div>
<!-- end mobile screens -->
</nav>
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<h1 class="text-3xl font-bold leading-tight text-gray-900">
Dashboard
</h1>
</div>
</header>
<main>
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<p class="alert alert-info" role="alert"><%= get_flash(#conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(#conn, :error) %></p>
<%= #inner_content %>
</div>
</main>
</div>
</html>
I am working on getting this whole example in codepen to help things out and will update with that as soon as I have it working.
I figured it out. I never registered a state for the navbar and so it didn't fire the click event. The nav tag should be as:
<nav class="bg-gray-900 x-data="{ open: false }">
I've got the mobile header working with the following code, I noticed that open doesn't get toggled on the mobile version so maybe this doesn't event need to be an Alpine.js component.
If this isn't exactly what you were looking for, feel free to leave a comment clarifying the behaviour you're after for the mobile navigation (currently I guess it just display everything on mobile breakpoints).
Note the I've gotten rid of x-show and the :class binding in favour of always applying the md:hidden class since I couldn't find where you wanted to toggle open from.
<div class="md:hidden" #click.away="open = false" x-data="{open: false}">
<div class="px-2 pt-2 pb-3 sm:px-3">
Dashboard
Team
Projects
Calendar
Reports
</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="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-3">
<div class="text-base font-medium leading-none text-white">Tom Cook</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">tom#example.com</div>
</div>
</div>
<div class="mt-3 px-2">
Your Profile
Settings
Sign out
</div>
</div>
</div>
Above example is viewable/editable in this CodePen.
I have a web page styled with tailwindcss that also uses glide.js to create a carousel element. I have a mobile menu triggered by a hamburger button but the resulting menu renders below the glide.js element. I have tried making elements relative and absolute in multiple combinations and also tried static on the carousel element. I have also tried z indexing the elemnts but I cant get my popup menu to render over the glide.js carousel.
Here is a fiddle which if viewed at 616 px width demonstrates my issue.
JS Fiddle Link
<div x-data="{ open: false, menu: false }" class="mt-4 relative bg-white overflow-hidden">
<div class="relative max-w-screen-xl mx-auto">
<div class="relative z-10 pb-8 bg-blue-100 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-6 xl:pb-8">
<div class="pt-2 px-4 sm:px-6 lg:px-8">
<nav class="relative flex items-center sm:h-10 justify-start">
<div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
<div class="flex items-center justify-between w-full lg:w-auto mt-4">
<div class="-mr-2 items-center lg:hidden">
<button #click="open = true" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
<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="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<img class="lg:hidden" width="100" height="50" src="{{asset('images/epslogo.png')}}" alt="">
</div>
</div>
<div class="hidden lg:flex lg:items-center lg:block lg:mt-4">
<a href="/" class="font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition duration-150 ease-in-out">
<input width="100" height="50" type="image" src="{{asset('images/EPSnav.png')}}" alt="EPS Logo">
</a>
High Voltage
Low Voltage
EV Charge Points
More...
<div x-show.transition.duration.600ms="menu" #click.away="menu = false" class="z-10 absolute ml-24 top-12 right-0 py-2 bg-white rounded shadow-2xl" >
<a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
href="#">
Maintenance and Inspection
</a>
<a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
href="/design">
Design Services
</a>
<a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
href="#">
Senior Authorised Personnel
</a>
<a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
href="/contact">
Contact Us
</a>
<a class="block px-4 py-2 text-gray-700 hover:text-white hover:bg-gray-700"
href="#">
About Us
</a>
</div>
</div>
</nav>
</div>
<div
x-show="open"
x-transition:enter="duration-150 ease-out"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="duration-100 ease-in"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="absolute top-0 inset-x-0 p-2 transition transform origin-top-right z-50"
>
<div class="relative rounded-lg bg-white shadow-xs overflow-hidden">
<div class="px-5 pt-4 flex items-center justify-between">
<div class="-mr-2">
<button #click="open = false" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
<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="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<img class="ml-2" width="100" height="50" src="{{asset('images/epslogo.png')}}" alt="">
</div>
<div class="relative px-2 pt-2 pb-3">
Home
High Voltage
Low Voltage
EV Charge Points
Maintenance and Inspection
Design Services
Senior Authorised Personnel
Contact Us
</div>
</div>
</div>
<div class="relative mt-6 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-6 lg:mt-8 lg:px-8 xl:mt-10">
<div class="text-center lg:text-left">
<h1 class="text-5xl text-gray-700 font-bold">Electrical Power Solutions</h1>
{{-- <img class="h-32 mx-auto mb-4 lg:mx-0" src="{{asset('images/epslogo.png')}}" alt="EPS Logo">--}}
<h2 class="text-indigo-400 text-4xl">Over {{now()->year - 2005}} years of Experience.</h2>
<p class="mt-2 text-base text-gray-500 sm:mt-4 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-2 md:text-xl lg:mx-0">
Supplying High and Low voltage services to the Energy Sector for over {{now()->year - 2005}} years.
</p>
<div class="mt-6">
<a href="/contact" class="text-center rounded-lg border border-transparent bg-indigo-600 px-1 py-1 text-xl leading-6 font-medium text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition ease-in-out duration-150">
Contact Us
</a>
</div>
</div>
</div>
<svg class="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-blue-200 transform translate-x-1/2" fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="50,0 100,0 50,100 0,100" />
</svg>
</div>
</div>
<div class="hidden lg:block 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="{{asset('images/high-voltage.jpg')}}" alt="" />
</div>
</div>
{{--Carousel Heading with standard nav --}}
<div class="hidden lg:block lg:mt-1 lg:mb-1">
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/hv.jpg' alt="High Voltage Pylons Picture">
</div>
</li>
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/design.jpg' alt="Rolled up design documents">
</div>
</li>
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/rope.jpg' alt="Rope access personnel at work">
</div>
</li>
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/WTS.jpg' alt="Wind turbines at sunset">
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="lg:hidden">
<div class="glide1">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/hv.jpg' alt="High Voltage Pylons Picture">
</div>
</li>
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/design.jpg' alt="Rolled up design documents">
</div>
</li>
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/rope.jpg' alt="Rope access personnel at work">
</div>
</li>
<li class="glide__slide">
<div class="block w-full text-white text-5xl text-center">
<img class="object-cover" src='/images/WTS.jpg' alt="Wind turbines at sunset">
</div>
</li>
</ul>
</div>
</div>
</div>
Any help is appreciated.
Problem is not with slider, z-index, absolute etc, but in fact that you intentionally putted "overflow-hidden" on menu container. Because of this menu that is bigger than its container is "cutted". To test this you can actually remove all content from below (including glide) and keep only menu (header) - problem will still remain.
So replace this:
<div x-data="{ open: false, menu: false }" class="mt-4 relative bg-white overflow-hidden">
with:
<div x-data="{ open: false, menu: false }" class="mt-4 relative bg-white">
Fiddle: https://jsfiddle.net/39d6qhg5/
More info about overflow:
https://www.w3schools.com/cssref/pr_pos_overflow.asp
https://tailwindcss.com/docs/overflow/
This question already has answers here:
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 3 years ago.
I have a html page with only one div that has a particular class:
<div class="article-page__wrapper article-page__article-content article-page--has-main-img">
Here is my selector which should only pick out one element under that div due to the nth-child attribute being 1.
.article-page__article-content :nth-child(1) {
background-color: red;
}
However, this is selecting numerous divs to give a red background.
Can anyone say why? Thanks!
Here's a sample of more html on the page, beneath the div with class article-page__article-content, where different divs have been reddened.
<div class="article-page__wrapper article-page__article-content article-page--has-main-img">
<div class="article-page__main-img-container">
<figure>
<img alt="2018." class="header-image" height="504" src="/media/images/30971178767_6a71936765_k.max-760x504.jpg" width="756">
<figcaption>
<div class="rich-text">wall, 2018.</div> | <div class="rich-text">Protection</div>
</figcaption>
</figure>
</div>
<div class="article-page__left-sidebar">
<div class="sidebar sidebar--share-article">
<h1 class="sidebar__heading">Share this</h1>
<ul class="sidebar__share-options-list">
<li>
<div class="icon-container">
<a href="https://twitter.com/intent/tweet?text=handout&url=http%3A//0.0.0.0%3A5000/en/handout/" aria-haspopup="false">
<svg role="img" class="icon icon-twitter" viewBox="0 0 50 50" width="50px" height="50px">
<title>Share on Twitter</title>
<use xlink:href="#icon-twitter" class="icon-style"></use>
</svg>
</a>
</div>
</li>
<li>
<div class="icon-container">
<a href="https://www.facebook.com/sharer.php?u=http%3A//0.0.0.0%3A5000/en/handout/" data-service="facebook" aria-haspopup="false">
<svg role="img" class="icon icon-facebook" viewBox="0 0 50 50" width="50px" height="50px">
<title>Share on Facebook</title>
<use xlink:href="#icon-facebook"></use>
</svg>
</a>
</div>
</li>
<li>
<div class="icon-container">
<a href="https://wa.me/?text=http%3A//0.0.0.0%3A5000/en/handout/?source=wa&medium=ar" data-service="whatsapp" aria-haspopup="false">
<svg role="img" class="icon icon-whatsapp" viewBox="-8 -8 50 50"" width="50px" height="50px">
<title>Share on WhatsApp</title>
<use xlink:href="#icon-whatsapp"></use>
</svg>
</a>
</div>
</li>
<li>
<div class="icon-container">
<a href="mailto:?&subject=handout&body=http%3A//0.0.0.0%3A5000/en/handout/" aria-haspopup="false">
<svg role="img" class="icon icon-email" viewBox="0 0 50 50" width="50px" height="50px">
<title>Share via email</title>
<use xlink:href="#icon-email"></use>
</svg>
</a>
</div>
</li>
<li>
<div class="icon-container">
<a href="#" class="share-link" aria-haspopup="false">
<svg role="img" class="icon icon-link" viewBox="0 0 50 50" width="50px" height="50px">
<title>Share link</title>
<use xlink:href="#icon-link"></use>
</svg>
</a>
</div>
</li>
</ul>
<span class="confirmation-text">URL copied to clipboard</span>
</div>
</div>
<div class="article-page__right-sidebar">
<div class="sidebar sidebar--newsletter">
<h1 class="sidebar__heading">Read more!</h1>
<p>Get our weekly email</p>
<div class="sidebar__form-container">
<form method="post" class="mailing-list__form" id="newsletter-signup" action="/api/newsetter-subscribe/">
<input type="hidden" name="list_id" value="17" id="newsletter-list_id">
<div class="single textinput sidebar__fieldset">
<label for="newsletter-email" class="is-required invisible-content">Enter your email address</label>
<input class="sidebar--newsletter__input" type="email" placeholder="Email address" name="newsletter-email" id="newsletter-email" />
<input class="sidebar--newsletter__input" type="text" placeholder="First name" name="newsletter-first-name" id="newsletter-first-name" />
<input class="sidebar--newsletter__input" type="text" placeholder="Last name" name="newsletter-last-name" id="newsletter-last-name" />
</div>
<div class="buttons sidebar__fieldset">
<button type="submit" class="btn">Submit</button>
</div>
</form>
</div>
</div>
</div>
<div class="article-page__rich-text">
<div class="rich-text"><p>Devil detail goes right here.</p><p>Have it love it get it right.</p><p></p><p>Good! Great.</p></div>
</div>
<div class="article-page__rich-text">
<div class="rich-text"><p>More text here.</p><p>Have it love it get it right.</p><p></p><p>Good! Great.</p></div>
</div>
I'm having trouble positioning elements using tailwind. I currently have a submenu positioned absolute. Beneath this element, I have a search bar, who's parent is positioned relative, and the element itself is positioned absolute. This is so that the search icon can ble displayed in the middle of the input.
When the submenu is open, the search bar overlaps the submenu.
Image
Already tried
I've tried positioning the elements in another way, switching between the different positions. I've also tried setting z-indexes to the elements in question.
Html
<div>
<nav>
<!-- other navbar code -->
<div class="block">
<div class="hidden sm:block">
<a href="#" class="flex items-center font-medium text-base text-gray-500 hover:text-gray-900 sm:mt-0 sm:text-xs sm:block">
<svg class="h-5 mr-2 fill-current h-5 mr-2 fill-current sm:block sm:m-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<!-- path -->
</svg>
Name
</a>
</div>
<div class="sm:absolute sm:right-0 sm:mr-5 sm:bg-white sm:rounded sm:shadow"> <!-- needs to be absolute to not mess ut rest of navbar -->
<div class="border-t border-gray-300 sm:border-none">
<div class="px-5 py-5">
<span class="text-xs uppercase tracking-wider text-gray-500 font-semibold">Daniel Kjellid</span>
Action
</div>
</div>
<div class="border-t border-gray-300">
<div class="px-5 py-5">
<span class="text-xs uppercase tracking-wider text-gray-500 font-semibold">Administrator</span>
Another action
</div>
</div>
<button class="w-full text-center py-4 text-gray-900 font-medium bg-gray-200 hover:bg-gray-300">
Logg ut
</button>
</div>
</div>
</nav>
</div>
<div class="bg-white px-5 py-3 flex justify-between items-center border-b border-gray-300">
<div class="relative mr-3 w-full"> <!-- needs to be relative to position svg inside input -->
<div class="absolute inset-y-0 left-0 flex items-center pl-3">
<svg class="h-6 w-6 fill-current text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<!-- path -->
</svg>
</div>
<input type="text" class="form-input pl-10 py-2 rounded-lg bg-gray-300 text-gray-600 block w-full" placeholder="Søk blant hundrevis av varer">
</div>
<button class="open-filter-btn bg-gray-300 py-2 px-4 rounded-lg text-gray-600 flex items-center font-medium" type="button">
<svg class="filter-closed-icn h-5 w-5 fill-current mr-2" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- path -->
</svg>
<svg class="filter-open-icn h-6 fill-current text-gray-600 hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<!-- path -->
</svg>
Filter
</button>
</div>