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
Related
I have three divs in a grid. the height automatically adjusts to the written content. however, if one div contains too much text, the other two are enlarged incorrectly. I have already tried h-max, h-full and everything else.
Actually, the div in the middle of one of these blocks should be enlarged so that it is always flush at the bottom.
for further information please refer to the picture
<div class="grid grid-cols-6 gap-4">
<div class="bg-green shadow overflow-hidden sm:rounded-lg col-span-2">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-3 font-medium text-gray-100">24 Hours challenge</h3>
</div>
<div class="bg-gray-50 px-4 py-5 text-center">
<a class="text-md font-bold text-gray-500">Ask a stranger if they would like to hear a poem you made. Then improvise a poem if they say yes</a>
</div>
<div class="bg-gray-100 px-4 py-1 text-center">
<a class="text-sm font-medium text-gray-500">06:12:53 left</a>
</div>
</div>
<div class="bg-green shadow overflow-hidden sm:rounded-lg col-span-2">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-3 font-medium text-gray-100">3 Days challenge</h3>
</div>
<div class="bg-gray-50 px-4 py-5 text-center">
<a class="text-md font-bold text-gray-500">Act as if you know a stranger</a>
</div>
<div class="bg-gray-100 px-4 py-1 text-center">
<a class="text-sm font-medium text-gray-500">30:07:00 left</a>
</div>
</div>
<div class="bg-green shadow overflow-hidden sm:rounded-lg col-span-2">
<div class="px-4 py-5 sm:px-6">
<h3 class="text-lg leading-3 font-medium text-gray-100">Weekly challenge</h3>
</div>
<div class="bg-gray-50 px-4 py-5 text-center">
<a class="text-md font-bold text-gray-500">Sing a song in public</a>
</div>
<div class="bg-gray-100 px-4 py-1 text-center">
<a class="text-sm font-medium text-gray-500">54:06:43 left</a>
</div>
</div>
</div>
flex-grow is the answer thx to Ihar
<div class="bg-gray-50 px-4 py-5 text-center flex-grow">
So, I am using tailwind and I am trying to darken the background image that loads for this header. The purpose of this is I want to make sure the text is readable regardless of what someone picks for a background image.
<div :style="{ backgroundImage: `url(${profile.cover_photo_path})` }" class="bg-center bg-cover h-48 w-full grid grid-cols-9 text-white shadow-2xl rounded-xl p-2">
<div class="col-span-2 mx-auto my-auto">
<img :src="profile.profile_photo_path" class="rounded-full h-36 w-36 border-4 border-red-700" />
</div>
<div class="pl-4 md:pl-0 col-span-2 grid content-center">
<div class="text-lg font-logo uppercase">
{{profile.name}}
</div>
<div class="text-sm font-light">
{{profile.user_city}}, {{profile.user_region}}, {{profile.user_country}}
</div>
<div class="text-sm font-light">
{{calculateAge}} years old
</div>
</div>
<div class="col-span-3 grid content-end">
</div>
<div class="text-lg uppercase col-span-1 grid content-end justify-end">
<div class="mx-auto">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600">
<PlusIcon class="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Follow
</button>
</div>
</div>
<div class="text-lg uppercase col-span-1 grid content-end justify-center">
<div class="mx-auto">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600">
<MailIcon class="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Message
</button>
</div>
</div>
</div>
```
I am open to other ideas but in my head it would be an opacity that would fix this. If you have another idea that would be more effective for this header/cover please let me know.
The best way to do this is to take an absolute image and control it as you want.
Like this: Tailwind Play Link
I had masked a div of the same dimensions but of black color behind your header and made the opacity of the header to 0.7.
I had added div by this
<div class="h-48 w-full bg-black absolute"></div>
And added class absolute z-10 opacity-70 to put the header div in front of black div.
Also instead of using :style="{ backgroundImage: url(path-name) }" you can use bg-[url(path-name)] like I had used.
You can see the complete code here
<script src="https://cdn.tailwindcss.com"></script>
<div class="absolute z-10 grid h-48 w-full grid-cols-9 rounded-xl bg-[url(http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg)] bg-cover bg-center p-2 text-white opacity-60 shadow-2xl">
<div class="col-span-2 mx-auto my-auto">
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/IHXoEES.png" class="h-36 w-36 rounded-full border-4 border-pink-200" />
</div>
<div class="col-span-2 grid content-center pl-4 md:pl-0">
<div class="font-logo text-lg uppercase">{{profile.name}}</div>
<div class="text-sm font-light">{{profile.user_city}}, {{profile.user_region}}, {{profile.user_country}}</div>
<div class="text-sm font-light">{{calculateAge}} years old</div>
</div>
<div class="col-span-3 grid content-end"></div>
<div class="col-span-1 grid content-end justify-end text-lg uppercase">
<div class="mx-auto">
<button type="button" class="inline-flex items-center rounded-md border border-transparent bg-red-700 px-3 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2">
<PlusIcon class="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Follow
</button>
</div>
</div>
<div class="col-span-1 grid content-end justify-center text-lg uppercase">
<div class="mx-auto">
<button type="button" class="inline-flex items-center rounded-md border border-transparent bg-red-700 px-3 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2">
<MailIcon class="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
Message
</button>
</div>
</div>
</div>
<div class="absolute h-48 w-full bg-black"></div>
Ignore the warning and see in full view
The card is not going under the navbar, however, the navbar is fixed.
Code for card:
<div class="w-full flex justify-center no-wrap">
<div class="bg-white p-8 rounded-lg shadow-lg relative hover:shadow-2xl transition duration-500">
<h1 class="text-sm text-gray-400 font-semibold mb-1"><%= #question.question_asked_on %>.</h1>
<h1 class="text-2xl text-gray-800 font-semibold mb-3"><%= #question.title %>.</h1>
<div class="w-full">
<p class="text-gray-600 leading-6 tracking-normal">
<%= #question.body %>
</p>
</div>
<button class="py-2 px-4 mt-8 bg-indigo-600 text-white rounded-md shadow-xl">Learn More</button>
</div>
</div>
</div>
Code for navbar
<nav class="bg-indigo-700 fixed inset-x-0">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between">
<div class="flex space-x-7">
<div>
if you remove relative from the card it should go under the navbar.
I'm using Tailwind CSS in VueJS and I have a little issue with my DIVs. I'm not used to CSS frameworks and I never encountered this problem before.
Problem : https://i.ibb.co/XWbdsxT/screenshot.png
As you can see on this screenshot, the red div goes beyond the bottom of the page (which is normal). I would like the dark-gray one and the light-gray one to strech and follow the red to the very bottom.
I tried :
Add h-full or/and h-screen classes to the gray divs
Add h-full or and h-screen classes to the body and/or html
Add these classes to the main parent div (the one where the grays are wrapped)
It doesn't seem to have any effect. Am I doing this wrong ? Here is the code :
<template>
<div class="hello">
<div class="flex flex-row">
<div class="w-1/5 h-screen bg-darkgray"></div>
<div class="w-4/5 h-screen bg-gray-200">
<div class="w-full h-16">
<div>
<div class="bg-white flex items-center shadow-xl">
<input class="w-full py-4 px-6 text-gray-700 leading-tight focus:outline-none" id="search" type="text" placeholder="Search an article">
<div class="p-4 flex flex-column">
<div class="border-r-2 w-16">
<button class="text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
<img src="../assets/search_icon.png"/>
</button>
</div>
<div class="flex flex-column">
<button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
<img src="../assets/notifications.png"/>
</button>
<button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
<img src="../assets/user.png"/>
</button>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="flex flex-row w-11/12 h-16 mt-20 m-auto justify-between">
<p class="text-3xl font-bold">Dashboard</p>
<button class="bg-orange hover:bg-darkgray text-white font-bold h-12 px-4 rounded-xl justify-end" type="button">
<span class="mr-2">+</span> Create an article
</button>
</div>
<div class="flex flex-row w-11/12 h-16 mt-4 m-auto bg-white rounded-t-2xl justify-between">
<div class="ml-6 mt-5">
<a class="text-orange font-bold">HIGHLIGHTS ARTICLES</a>
</div>
<div class="flex justify-end ml-6 mt-5 mr-6 space-x-4">
<div id="1" class="selected cursor-pointer"><a class="item-selected font-bold">Recently updated</a></div>
<div id="2" class="cursor-pointer"><a class="item font-bold">Recently seen</a></div>
<div id="3" class="cursor-pointer"><a class="item font-bold">Created by me</a></div>
</div>
</div>
<div class="flex w-11/12 h-5xl mt-0.5 bg-red-500 m-auto rounded-b-2xl"></div>
</div>
</div>
</div>
</div>
</template>
Please don't pay attention to the fact that this is not responsive. It is not supposed to be.
Try this,
your Dashboard content area needed overflow:hidden. check this doc
<div class="flex flex-row w-full h-screen">
<div class="w-1/5 max-h-full bg-gray-800 text-white p-6">Sidebar</div>
<div class="flex flex-col w-full max-h-full bg-gray-200">
<div class="flex flex-row w-full bg-white items-center shadow-xl">
<input class="w-full py-4 px-6 text-gray-700 leading-tight focus:outline-none" id="search" type="text" placeholder="Search an article" />
<div class="flex p-4 flex-column">
<div class="border-r-2 w-16">
<button class="text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
<img src="../assets/search_icon.png" />
</button>
</div>
<div class="flex flex-column">
<button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
<img src="../assets/notifications.png" />
</button>
<button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
<img src="../assets/user.png" />
</button>
</div>
</div>
</div>
<div class="flex flex-col max-w-full m-6 h-full rounded-b-2xl overflow-hidden">
<div class="flex flex-row w-full my-6 m-auto justify-between">
<p class="text-3xl font-bold">Dashboard</p>
<button class="bg-yellow-500 hover:bg-darkgray text-white font-bold h-12 px-4 rounded-xl justify-end" type="button"><span class="mr-2">+</span> Create an article</button>
</div>
<div class="flex flex-row w-full bg-white rounded-t-2xl justify-between px-6 py-6 h-16">
<a class="text-orange font-bold">HIGHLIGHTS ARTICLES</a>
<div class="flex justify-end space-x-4">
<div id="1" class="selected cursor-pointer"><a class="item-selected font-bold">Recently updated</a></div>
<div id="2" class="cursor-pointer"><a class="item font-bold">Recently seen</a></div>
<div id="3" class="cursor-pointer"><a class="item font-bold">Created by me</a></div>
</div>
</div>
<div class="flex w-full mt-0.5 bg-red-500 rounded-b-2xl max-h-full p-6">Test Doc</div>
</div>
</div>
</div>
Check on Tailwind Play
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>