I wanted to add spacing between the Choose Files button and the text on right side. How can I do so by tailwind CSS. I had added the code below .
<script src="https://cdn.tailwindcss.com"></script>
<section class="body-font text-gray-600">
<div class="container mx-auto px-5 py-24">
<div class="mx-auto flex flex-col items-start lg:w-2/3">
<label class="title-font mb-2 text-sm font-medium text-gray-900" for="multiple_files">Upload multiple files</label>
<input class="w-full cursor-pointer rounded-lg border border-gray-300 bg-gray-100 px-4 py-2 text-lg text-gray-600 file:rounded-lg file:border-none file:bg-indigo-600 file:p-2 file:text-white hover:file:cursor-pointer hover:file:bg-indigo-500" id="multiple_files" type="file" multiple="" />
</div>
</div>
</section>
you can add margin-right to file, use this selector file:mr-4
<input class="file:mr-4" id="multiple_files" type="file" multiple="" />
have a look here :
https://play.tailwindcss.com/scMYVnSVjY
Related
Whenever I use Google Chrome's responsive view to see my login form component at different screen sizes, I notice some strange behaviour. Once the viewport shrinks to a certain width, specifically 1024px, it stops shrinking horizontally and instead starts shrinking on both axis at the same fixed rate. This is despite there being ample space in the form still.
I tried setting fixed (non-percentile) values for the top-level to hopefully constrain the height to a specific scale, but this hasn't fixed the issue unfortunately. If anyone could help me to troubleshoot this behaviour I would be very appreciative!
The code is written using the React library and makes use of TailwindCSS classes for styling.
<div className='
w-3/4 xl:w-1/3 h-[26rem]
absolute
top-1/2 left-1/2 xl:left-3/4
-translate-y-1/2 -translate-x-1/2 xl:-translate-x-3/4'>
<div className='
w-full h-full
relative
bg-navWhite
py-12 px-4 sm:px-8
shadow-lg
flex flex-col'>
<h1 className='
font-navigation font-medium text-3xl tracking-tight
text-navGrey
text-center'>
Sign In
</h1>
<p className='
mt-2
font-navigation
text-navGrey text-center
font-light text-base'>
Enter your credentials below, to access your dashboard.
</p>
<form className='
flex flex-col gap-y-4 mt-4'>
<div className='
w-full flex flex-row-reverse
border-b border-b-navGrey/20
focus-within:border-b-dashboardBlue
transition-colors duration-200'>
<input
type="text"
placeholder="Email Address"
value={username}
name='Email signup'
onChange={usernameInput}
className='
p-2 w-full peer
bg-transparent
outline-none focus:ring-0
sm:text-sm'
/>
<span className='
material-symbols-outlined
text-2xl
text-navGrey/50
peer-focus:text-dashboardBlue
transition-colors duration-200
h-full
p-2
select-none'>
mail
</span>
</div>
<div className='
w-full flex flex-row-reverse
border-b border-b-navGrey/20
focus-within:border-b-dashboardBlue
transition-colors duration-200'>
<span
onClick={passwordVisibility}>
<span className='
cursor-pointer select-none
material-symbols-outlined
text-2xl
h-full
p-2'
style={showPassword === true ? styles.active : styles.inactive}>
{showPassword === true ? 'visibility' : 'visibility_off'}
</span>
</span>
<input
type='password'
id='passwordField'
placeholder="Password"
value={password}
name='Email signup'
onChange={passwordInput}
className='
p-2 w-full peer
bg-transparent
outline-none focus:ring-0
sm:text-sm'
/>
<span className='
material-symbols-outlined
text-2xl
text-navGrey/50
peer-focus:text-dashboardBlue
transition-colors duration-200
h-full
p-2
select-none'>
lock
</span>
</div>
<div className="flex justify-between p-2 -mb-2">
<label className='self-end'>
<input type="checkbox" checked={rememberPassword} onChange={() => toggleRemember(!rememberPassword)} className='relative align-middle w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600'/>
<span className="
sm:text-sm
text-navGrey/50
ml-1">
Remember me
</span>
</label>
<span className="
cursor-pointer
sm:text-sm
text-dashboardBlue
no-underline
hover:underline
transition-all duration-200">
Forgot password?
</span>
</div>
<button
className='
w-full p-6 mt-2
relative
bg-dashboardBlue
focus:outline-none focus:ring-2 focus:ring-dashboardBlue focus:ring-offset-2'
onClick={loginAction}>
<div className='relative' style={loading === true ? styles.notLoading : styles.loading}>
<span className='
absolute
top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2
text-white
font-semibold
text-lg
transition-all duration-300'>
Login
</span>
</div>
<Loader visibility={loading === true ? styles.loading : styles.notLoading} />
</button>
</form>
</div>
</div>
I have a problem. I use react and tailwind css. Th modal is relative and the overlay is flex positioned, because I want the main modal to be positioned in the middle of the screen on X axis. Here it comes the problem. The wrapper that contains the options tag renders in a different place than the parent select. I tried fixing it with absolute position and also with relative one. But nothing works...
Because there is not programming logic, I will paste the code.
<div className="modal flex fade fixed top-0 left-0 w-full h-full outline-none overflow-x-hidden overflow-y-auto" id="exampleModalCenteredScrollable" tabIndex="-1" aria-labelledby="exampleModalCenteredScrollable" aria-modal="true" role="dialog">
<div className=" modal-dialog modal-dialog-centered modal-dialog-scrollable relative w-auto pointer-events-none flex-1 p-2 bg-slate-200">
<div className="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding max-w-2xl mx-auto mt-5 rounded-md outline-none text-current">
<div className="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md ">
<h5 className="text-2xl font-bold leading-normal text-gray-700 underline " id="exampleModalCenteredScrollableLabel">
Add new exercice
</h5>
<button type="button" onClick={() => setOpen(!open)}
className="btn-close box-content p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
data-bs-dismiss="modal" aria-label="Close"><AiOutlineCloseCircle color='black' size={30}/></button>
</div>
<div className="modal-body relative p-4">
<p>Look for the exercice you wish to add, and click import. You may add as many exercices you want, however please make sure you will complete them by the end of the day.</p>
<form >
<div className='flex mt-3 flex-col'>
<input required placeholder='Search by word...' className='border border-slate-400 p-1 rounded-md flex-1 max-w-sm my-2'/>
{/* Problem is here!!!! */}
<select className='border border-slate-400 p-1 rounded-md max-w-sm my-2 [&>option]:bg-black'>
<option defaultValue>Slobozel</option>
<option>Slobozel</option>
<option>Slobozel</option>
<option>Slobozel</option>
</select>
</div>
I have a responsiveness issue with the project that I am currently developing
I have a sidebar with two nested divs (the sections that appear "separated" from each other - see preview below) with absolute positioning that are overlapping each other whenever the screen height is lower than the space required to fit all of the elements on screen.
Overlapping Elements
I would like to know how to stop the bottom section from overlapping the top section and make the sidebar's content scrollable from that point (once the "SOUND DETECTION DETAILS" container begins to overlap the "STROBE DURATION" container).
Here's the relevant index.html body section code:
<body class="bg-black">
<div id="sidebar">
<div id="sidebar-container" class="py-1.5 bg-gray-300 w-400px h-full absolute z-1 overflow-x-hidden opacity-100">
<div id="sidebar-logo" class="w-[300px] mx-auto">
<img class="" src="assets\img\logo-V2\logo-horizontal-black.png">
</div>
<hr class="w-[375px] border border-solid border-zinc-700 mx-auto">
<h3 class="text-center py-3 text-xl text-gray-600 font-semibold">STROBE SYNC MODE</h3>
<div id="auto-manual-container" class="w-[330px] ml-35px flex justify-between">
<button id="auto" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-themeOrange selected" onclick="autoMode()">AUTO</button>
<button id="manual" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-gray-700" onclick="manualMode();">MANUAL</button>
</div>
<hr class="w-[375px] border border-solid border-zinc-700 mx-auto">
<div id="auto-mode-container" class=""> <!-- "AM" stands for "Auto Mode" -->
<div id="input-device-container" class="w-[330px] ml-35px">
<h5 class="mt-3 mb-1 font-semibold text-sm text-gray-500">INPUT DEVICE</h5>
<select id="select-input-device" class="w-full h-10 mb-5 flex mx-auto bg-white rounded outline-none font-semibold text-center text-gray-700" required>
<option value="" selected disabled hidden>SELECT DEVICE</option>
<option value="" class="device text-left"> Integrated Player</option>
<option value="" class="device text-left"> Example Device</option>
</select>
</div>
<div id="frequency-range-focus-container" class="w-[330px] ml-35px">
<h5 class="mt-3 mb-1 font-semibold text-sm text-gray-500">FREQUENCY RANGE FOCUS</h5>
<div id="low-mid-high-container" class="w-full flex justify-between">
<button id="low" class="w-[100px] h-6 mb-4 pt-[2px] bg-white rounded font-bold text-base text-themeOrange selected" onclick="low_Btn()">LOW</button>
<button id="mid" class="w-[100px] h-6 mb-4 pt-[2px] bg-white rounded font-bold text-base text-gray-700" onclick="mid_Btn()">MID</button>
<button id="high" class="w-[100px] h-6 mb-4 pt-[2px] bg-white rounded font-bold text-base text-gray-700" onclick="high_Btn()">HIGH</button>
</div>
<button id="master" class="w-full h-12 mb-3 pt-[2px] bg-white rounded font-bold text-base text-gray-700" onclick="master_Btn()">MASTER</button>
</div>
<div id="detection-sensitivity-container" class="w-[330px] ml-35px">
<h5 id="sens-label" class="mt-3 mb-1 font-semibold text-sm text-gray-500"></h5>
<div id="sens-slider-container" class="w-full">
<input type="range" min="0" max="100" value="50" class="sens-slider w-full" id="sens-slider">
<p class="float-left font-regular text-sm text-gray-600">0</p>
<p class="float-right font-regular text-sm text-gray-600">100</p>
</div>
</div>
<br>
<div id="strobe-duration-container" class="w-[330px] ml-35px">
<h5 id="AM-duration-label" class="mt-3 mb-1 font-semibold text-sm text-gray-500"></h5>
<div id="duration-slider-container" class="duration-slider-container">
<input type="range" min="10" max="1000" value="200" class="duration-slider w-full" id="AM-duration-slider">
<p class="float-left font-regular text-sm text-gray-600">10</p>
<p class="float-right font-regular text-sm text-gray-600">1000</p>
</div>
</div>
<br>
<div id="sound-detection-details-container" class="w-[330px] ml-35px absolute bottom-[75px]">
<h5 class="mt-3 mb-1 font-semibold text-sm text-gray-500">SOUND DETECTION DETAILS</h5>
<div id="SDD-container" class="w-full h-40 px-4 bg-white rounded flex flex-col justify-evenly">
<div id="SCT-container" class="w-full">
<h4 class="float-left font-semibold text-base text-gray-600">SOUND COME THROUGH</h4>
<label id="SCT-check-container" class="float-right">
<input type="checkbox" checked disabled> <!-- only check when audio coming trough, change with javascript -->
<span class="SCT-checkmark"></span>
</label>
</div>
<hr>
<div id="tempo-container" class="w-full">
<h4 class="float-left font-semibold text-base text-gray-600">TEMPO:</h4>
<h4 id="bpm" class="float-right font-semibold text-base text-gray-600">150BPM</h4> <!-- change with javascript -->
</div>
<hr>
<div id="audio-meter-container" class="w-full">
<h4 class="float-left font-semibold text-base text-gray-600">AUDIO METER</h4>
<label id="AM-check-container" class="float-right"><!-- in this context "AM" stands for "Audio Meter" -->
<input type="checkbox">
<span class="AM-checkmark"></span>
</label>
</div>
</div>
</div>
<br>
<div id="AM-on-off-container" class="w-[330px] ml-35px flex justify-between absolute bottom-0">
<button id="AM-off" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-themeOrange selected" onclick="AM_turnOff()">OFF</button>
<button id="AM-on" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-gray-700" onclick="AM_turnOn();">ON</button>
</div>
</div>
</div>
</div>
</body>
I am using Tailwind CSS, however, I do understand pure CSS answers as i am able to convert them to Tailwinds fromatting. Thanks!
I have searched for hours trying to find a solution for a problem similar to mine, but with no avail. I have found tutorials with a context similar to mine but the elements' positioning were not of the same type.
I had tried to remove the absolute position of the divs encapsulating sound detection details and also refactored some of the code . Below is the code shared.
<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-black">
<div id="sidebar">
<div id="sidebar-container" class="py-1.5 bg-gray-300 w-400px h-full absolute z-1 overflow-x-hidden opacity-100 overflow-y-scroll flex-col justify-center items-center">
<div id="sidebar-logo" class="w-[300px] mx-auto">
<img class="" src="assets\img\logo-V2\logo-horizontal-black.png">
</div>
<hr class="w-[375px] border border-solid border-zinc-700 mx-auto">
<h3 class="text-center py-3 text-xl text-gray-600 font-semibold">STROBE SYNC MODE</h3>
<div id="auto-manual-container" class="w-[330px] mx-[35px] flex justify-between">
<button id="auto" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-themeOrange selected" onclick="autoMode()">AUTO</button>
<button id="manual" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-gray-700" onclick="manualMode();">MANUAL</button>
</div>
<hr class="w-[375px] border border-solid border-zinc-700 mx-auto">
<!-- "AM" stands for "Auto Mode" -->
<div id="input-device-container" class="w-[330px] mx-[35px]">
<h5 class="mt-3 mb-1 font-semibold text-sm text-gray-500">INPUT DEVICE</h5>
<select id="select-input-device" class="w-full h-10 mb-5 flex mx-auto bg-white rounded outline-none font-semibold text-center text-gray-700" required>
<option value="" selected disabled hidden>SELECT DEVICE</option>
<option value="" class="device text-left"> Integrated Player</option>
<option value="" class="device text-left"> Example Device</option>
</select>
</div>
<div id="frequency-range-focus-container" class="w-[330px] mx-[35px]">
<h5 class="mt-3 mb-1 font-semibold text-sm text-gray-500">FREQUENCY RANGE FOCUS</h5>
<div id="low-mid-high-container" class="w-full flex justify-between">
<button id="low" class="w-[100px] h-6 mb-4 pt-[2px] bg-white rounded font-bold text-base text-themeOrange selected" onclick="low_Btn()">LOW</button>
<button id="mid" class="w-[100px] h-6 mb-4 pt-[2px] bg-white rounded font-bold text-base text-gray-700" onclick="mid_Btn()">MID</button>
<button id="high" class="w-[100px] h-6 mb-4 pt-[2px] bg-white rounded font-bold text-base text-gray-700" onclick="high_Btn()">HIGH</button>
</div>
<button id="master" class="w-full h-12 mb-3 pt-[2px] bg-white rounded font-bold text-base text-gray-700" onclick="master_Btn()">MASTER</button>
</div>
<div id="detection-sensitivity-container" class="w-[330px] mx-[35px]">
<h5 id="sens-label" class="mt-3 mb-1 font-semibold text-sm text-gray-500"></h5>
<div id="sens-slider-container" class="w-full">
<input type="range" min="0" max="100" value="50" class="sens-slider w-full" id="sens-slider">
<p class="float-left font-regular text-sm text-gray-600">0</p>
<p class="float-right font-regular text-sm text-gray-600">100</p>
</div>
</div>
<br>
<div id="strobe-duration-container" class="w-[330px] mx-[35px]">
<h5 id="AM-duration-label" class="mt-3 mb-1 font-semibold text-sm text-gray-500"></h5>
<div id="duration-slider-container" class="duration-slider-container">
<input type="range" min="10" max="1000" value="200" class="duration-slider w-full" id="AM-duration-slider">
<p class="float-left font-regular text-sm text-gray-600">10</p>
<p class="float-right font-regular text-sm text-gray-600">1000</p>
</div>
</div>
<br>
<div id="sound-detection-details-container" class=" w-[330px] mt-28 mx-[35px] bottom-[75px]">
<h5 class="mt-3 mb-1 font-semibold text-sm text-gray-500">SOUND DETECTION DETAILS</h5>
<div id="SDD-container" class="w-full h-40 px-4 bg-white rounded flex flex-col justify-evenly">
<div id="SCT-container" class="w-full">
<h4 class="float-left font-semibold text-base text-gray-600">SOUND COME THROUGH</h4>
<label id="SCT-check-container" class="float-right">
<input type="checkbox" checked disabled> <!-- only check when audio coming trough, change with javascript -->
<span class="SCT-checkmark"></span>
</label>
</div>
<hr>
<div id="tempo-container" class="w-full">
<h4 class="float-left font-semibold text-base text-gray-600">TEMPO:</h4>
<h4 id="bpm" class="float-right font-semibold text-base text-gray-600">150BPM</h4> <!-- change with javascript -->
</div>
<hr>
<div id="audio-meter-container" class="w-full">
<h4 class="float-left font-semibold text-base text-gray-600">AUDIO METER</h4>
<label id="AM-check-container" class="float-right"><!-- in this context "AM" stands for "Audio Meter" -->
<input type="checkbox">
<span class="AM-checkmark"></span>
</label>
</div>
</div>
</div>
<br>
<div id="AM-on-off-container" class=" w-[330px] mx-[35px] flex justify-between bottom-0">
<button id="AM-off" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-themeOrange selected" onclick="AM_turnOff()">OFF</button>
<button id="AM-on" class="w-[150px] h-10 mb-4 bg-white rounded font-bold text-xl text-gray-700" onclick="AM_turnOn();">ON</button>
</div>
</div>
</div>
</body>
Note: Since I don't have the styles defined with id like sidebar, so the sidebar appears in the left side.
ALso you can view here
I am making form in next.js and i am unable to place the form vertically in the center of the screen. I am using one way that allows me to center it but it changes my form original size
the code without center of screen
import React from "react";
function SignUp() {
return (
<div className="h-screen bg-gray-50 pt-5 ">
<form className=" grid grid-cols-1 gap-4 p-9 rounded-xl shadow-xl bg-gray-50 max-w-sm mx-auto ">
<h1 className="text-2xl font-bold text-purple-600 ">
SignUp{" "}
<span className="text-sm font-normal text-gray-400">
to Trading Application
</span>
</h1>
<div>
<input className="input" type="text" placeholder="Company Name..." />
</div>
<div>
<input className="input" type="text" placeholder="Username..." />
</div>
<div>
<input className="input" type="text" placeholder="Email..." />
</div>
<div>
<input className="input" type="text" placeholder="Password..." />
</div>
<div>
<input
className="input"
type="text"
placeholder="Confirm Password..."
/>
</div>
<button className="btn btn-purple mt-3 rounded-full">
Create Account
</button>
</form>
</div>
);
}
export default SignUp;
code with center of screen trick but this trick changes the size of my form
<div className="h-screen bg-gray-50 pt-5 grid grid-cols-1">
<form className="place-self-center grid grid-cols-1 gap-4 p-9 rounded-xl shadow-xl bg-gray-50 max-w-sm mx-auto ">
<h1 className="text-2xl font-bold text-purple-600 ">
SignUp{" "}
<span className="text-sm font-normal text-gray-400">
to Trading Application
</span>
</h1>
<div>
<input className="input" type="text" placeholder="Company Name..." />
</div>
<div>
<input className="input" type="text" placeholder="Username..." />
</div>
<div>
<input className="input" type="text" placeholder="Email..." />
</div>
<div>
<input className="input" type="text" placeholder="Password..." />
</div>
<div>
<input
className="input"
type="text"
placeholder="Confirm Password..."
/>
</div>
<button className="btn btn-purple mt-3 rounded-full">
Create Account
</button>
</form>
</div>
tailwind code for btn, btn-purple & input
#layer components {
.input {
#apply border border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent shadow-md rounded-lg px-3 py-2 w-full font-light
transition duration-300;
}
.btn {
#apply rounded-md py-2 px-3 border-transparent focus:outline-none transition duration-500 uppercase font-medium;
}
.btn-purple {
#apply bg-purple-600 text-white hover:bg-purple-700;
}
}
these are the only line of code i used in my project and nothing more.
I want to vertically center the form without effecting any other changes to my form
i have got the solution of the problem
<div className="h-screen bg-gray-100 p-10 grid grid-cols-1 ">
<div className="place-self-center">
<form className=" grid grid-cols-1 gap-4 p-9 rounded-xl shadow-xl bg-gray-50 max-w-sm mx-auto ">
/* ..... some context ....*/
</form>
</div>
</div>
if we wrap our form into two divs and make parent div(div1) a grid and by using place-self-center class on child div(div2) then the size will not be effected and the context will automatically place in the vertical middle of the screen
<div className="h-screen grid grid-cols-1" >
1
<div className="place-self-center" >
2
<form>
context
</form>
</div>
</div>
I have this input with languages tabs:
I need to make it like this:
My problem with the border when any languages active tab!
my code in English:
<div>
<div class="flex justify-between items-center">
<label class="block font-medium text-sm text-gray-700">
Categroy Name
</label>
<div class="inline-flex items-center text-gray-700 list-none space-x-1">
<li class="px-4 rounded border-r border-t border-l cursor-pointer">
Arabic
</li>
<li class="px-4 rounded border bg-gray-200 cursor-pointer">
English
</li>
</div>
</div>
<input type="text" name="category_title" class="focus:ring-indigo-500 rounded focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300">
</div>
You could make it work by changing the radius to top only (rounded-t), moving your div and tab each -1px down (-mb-px) and adding a white background (bg-white).
This is also the solution of the official tabs component.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div>
<div class="flex justify-between items-center">
<label class="block font-medium text-sm text-gray-700">
Category Name
</label>
<div class="-mb-px inline-flex items-center text-gray-700 list-none space-x-1">
<li class="-mb-px px-4 rounded-t border-r border-t border-l cursor-pointer bg-white">
Arabic
</li>
<li class="px-4 rounded-t border bg-gray-200 cursor-pointer">
English
</li>
</div>
</div>
<input type="text" name="category_title" class="focus:ring-indigo-500 rounded focus:border-indigo-500 block w-full border border-grey-300">
</div>