What is the best way to eliminate the border around the input beneath the li element

I am trying to create a language tab input like this:

https://i.sstatic.net/N0h2o.png

But I want it to look like this:

https://i.sstatic.net/QmnSr.png

However, I am facing an issue with the border when any language tab is active!

Here is my code in English:

<div>
    <div class="flex justify-between items-center">
        <label class="block font-medium text-sm text-gray-700">
            Category 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>
csstailwind-css

Answer №1

To achieve the desired outcome, adjust the radius to top only (rounded-t), shift your div and tab each -1px downwards (-mb-px), and introduce a white background (bg-white).

This approach mirrors the solution offered in 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to connect css file to ejs views in nodejs

Currently, I am tackling a beginner node.js server project. While I have successfully managed to render dynamic HTML using ejs templates, I seem to be facing difficulties when it comes to linking CSS styling to these templates. In an effort to address thi ...

cssnode.jsexpressejs

Detecting collisions with other objects in HTML/CSS/JavaScript while animating objects

Does anyone know how to create a dynamic character using css, html, and javascript, and detect collisions with other elements? Any suggestions or guidance would be greatly appreciated. ...

javascriptcsshtmlgraphicsjquery-animate

Creating a dropdown menu with a blur effect using CSS

I attempted to match the opacity and blur effect of my dropdown menu with that of my navbar. While the opacity adjustment worked correctly, the blur effect did not apply as expected. I've heard that I need to utilize a pseudo-class to achieve this, b ...

cssdropdownnavbarbootstrap-5blur

Utilizing Selenium to extract data from a table and displaying the results

I am looking to scrape tables from a specific website, but I am new to automation with Selenium. Here is the code snippet that I have come up with after doing some research: from selenium.webdriver import Firefox from selenium.webdriver.common.by import By ...

pythonhtmlcssseleniumpycharm

In Internet Explorer 11, border-radius creates a separation between elements

There is an issue with whitespace appearing around elements that have a border-radius larger than 0, but this only occurs in Internet Explorer. If using border-top-left-radius: 20px; and border-top-right-radius: 20px;: https://i.sstatic.net/MAKsx.png *W ...

htmlcsstwitter-bootstrap-3internet-explorer-11

My page is experiencing delays due to setInterval

Currently, I am delving into the world of Chrome Extension development and am faced with a roadblock in replacing elements on a live chat page. While most of my tasks are running smoothly, the one thing causing issues is the setInterval option that trigger ...

javascriptjqueryhtmlcss

Utilize jQuery to dynamically add a CSS class to a button

When using jQuery to create dynamic buttons, is there a way to add a CSS class to the button during creation without needing an extra line of JavaScript to add the class afterwards? Below is a example code snippet: $.each(data, function (index, value) { ...

jqueryhtmlcss

What could be causing the tooltip to malfunction in jQuery?

The tooltip is not appearing as expected, only the title is displaying in the browser. What can be done to fix this? Below is the code snippet: HTML Code: <form action="/validate.php" method="post" id="myform"> <table width="100%" border="1"> ...

jqueryhtmlcss

Tips for eliminating additional white space within a bootstrap row

I'm having trouble removing the extra space on my website while using Bootstrap 5. I've tried various Bootstrap classes like pr-0, mr-0, p-auto, m-auto but none of them seem to work. I also attempted using CSS margin-right: 0; but that didn' ...

javascriptphpcssbootstrap-5

Ensuring that a nested div adjusts responsively within a static parent container

I am working on a project that involves HTML, CSS, and JS code. Here is the structure of my code: HTML: <div id="blockcart-wrapper"> <div class="blockcart cart-preview"> <div class="header"> <a rel="nofollow" href="#"> ...

htmlcss

Having issues with column offsetting in Bootstrap v4.0.0-beta

While using Bootstrap 4 Beta (Bootstrap v4.0.0-beta), I encountered an issue with offsetting columns. Previously, I used offset-md-* and it worked fine. However, this feature has been removed in BS4 Beta as per the documentation. The new method suggested i ...

csstwitter-bootstrapbootstrap-4

Is there a way to switch out the WordPress page title for an image instead?

I am trying to change up the appearance of my WordPress site by replacing the text on page titles with images. Working on a child theme locally, I need to customize each page individually as they will have different images. The current state is as follows ...

csswordpressimageparent-child

Crafting a responsible table design with the help of grid layout techniques

Is there a way to create a table that can adjust its rows and columns based on the container width or when resized? https://i.sstatic.net/xeZjl.png https://i.sstatic.net/kdpJC.png I attempted to use grid-gap in the background, but it resulted in empty red ...

htmlcss

Maintaining the placement of an element in a fixed position while adding a border

Currently, I am in the process of developing an interactive online picture framing tool. My aim is to allow users to customize an image by selecting different border, mount, and frame sizes. These customizations will be reflected in real-time by adding cor ...

jquerycssposition

D3.js: Difficulty fitting the chart within my bootstrap div

Currently, I'm encountering a problem where the "card" component from Bootstrap is not adjusting responsively with my d3.chart. The screenshot below displays the outcome: https://i.sstatic.net/2MhBx.png Chart Code const sample = [ { languag ...

javascripthtmlcssd3.jsbootstrap-4

CSS - image does not adhere to max-height when placed in a fluid container - link to jsFiddle

For instance: http://jsfiddle.net/vjqjv/7/ I am facing an issue with an image inside a container (refer to #slider-section in the jsFiddle) that has a fluid height and a set max-height. I have defined max-height and max-width for my image as 100% (check ...

imagecss

What is the best way to ensure a consistent spacing between two flex items?

I am working on a project to enhance my knowledge by rebuilding Facebook. One of the new concepts I am learning is Flexbox. When you resize the login page of Facebook, you'll notice that the Navigation shrinks but the logo and login inputs remain sta ...

htmlcssflexbox

Is there a way to adjust the transparency of specific text when clicking on a different div?

How can I display a line of text when the "Contact Us" button is clicked on a practice website, similar to this: https://i.sstatic.net/MgbYQ.png I have set the current opacity of the submit message to 0 so it is hidden, but is there a way to change its o ...

jquerycss

Creating a simulated dropdown menu using only CSS

I was able to create a select menu using only CSS, following some code I found. However, I am now facing an issue with overlaying divs. Whenever I hover or click on the "select menu", all the divs below it move down. I've attempted to adjust the z-i ...

htmlcssdrop-down-menu

Restoring styles back to the default CSS settings

I am currently working on creating visualizations using D3, and one challenge that I have encountered is the need to define a lot of styles within my code instead of in my CSS where I would prefer them to be. This necessity arises mainly to support transi ...

javascriptcssd3.js