Auto-stretch tailwind body to adapt to other div - tailwind-css

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

Related

How to stop two nested divs with absolute positioning from overlapping each other?

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

darken background image (Opacity?)

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

How to center vertically and horizontaly a div with Tailwind CSS

I'm learning Tailwind CSS and I'm having this problem. I did this:
My div with its buttons
And I would like to center it vertically, but when I use flex, this happens:
See here
This is my code:
export default function Home() {
return (
<div className="bg-white max-w-lg mx-auto p-8 md:p-12 my-10 rounded-lg shadow-2xl">
<div>
<h2 className="text-2xl font-bold text-center">¿Who are you?</h2>
</div>
<div className="mt-5">
<button className="bg-indigo-600 rounded-sm w-full p-3 text-white uppercase font-bold hover:bg-indigo-700 cursor-pointer transition-color">Admin</button>
</div>
<div className="mt-5">
<button className="bg-indigo-600 rounded-sm w-full p-3 text-white uppercase font-bold hover:bg-indigo-700 cursor-pointer transition-color">Client</button>
</div>
</div>
)
}
Use a div wrapper and add flex class to it like this
Your code
export default function Home() {
return (
<div className="flex justify-center flex-col m-auto h-screen">
<div className="bg-white w-1/3 mx-auto p-8 md:p-12 my-10 rounded-lg shadow-2xl">
<div>
<h2 className="text-2xl font-bold text-center">¿Who are you?</h2>
</div>
<div className="mt-5">
<button className="bg-indigo-600 rounded-sm w-full p-3 text-white uppercase font-bold hover:bg-indigo-700 cursor-pointer transition-color">Admin</button>
</div>
<div className="mt-5">
<button className="bg-indigo-600 rounded-sm w-full p-3 text-white uppercase font-bold hover:bg-indigo-700 cursor-pointer transition-color">Client</button>
</div>
</div>
</div>
)
}
Live Demo
https://play.tailwindcss.com/inCNN5fhkb
Thank you for your answers, I did it in this way:
export default function Home() {
return (
<div className="flex justify-center flex-col m-auto h-screen">
<div className="bg-white w-1/4 mx-auto p-8 my-12 rounded-lg shadow-2xl">
<div>
<h2 className="text-2xl font-bold text-center">¿Who are you?</h2>
</div>
<div className="mt-5">
<Link href='/admin/index.js'>
<button className="bg-indigo-600 rounded-sm w-full p-3 text-white uppercase font-bold hover:bg-indigo-700 cursor-pointer transition-color">Admin</button>
</Link>
</div>
<div className="mt-5">
<Link href='/client/index.js'>
<button className="bg-indigo-600 rounded-sm w-full p-3 text-white uppercase font-bold hover:bg-indigo-700 cursor-pointer transition-color">Client</button>
</Link>
</div>
</div>
</div>
)
}

Border and Spacing in Tailwind

I'm having a difficulty in making the border radius on the line below the text and I also have a problem on how to put a spacing between the text and the bottom line.
This is my expected output
Expected Output -> https://ibb.co/RSKytWm
Codepen -> Codepen
code
<div class="
min-h-screen
flex
items-center
justify-center
py-4
px-4
sm:px-6
lg:px-6
bg-black
">
<div class="max-w-lg w-full space-y-8">
<div class="flex flex-col w-full px-4 py-4 sm:px-6 md:px-8">
<div class="flex flex-row justify-center">
<button class="
inline-flex
items-end
justify-center
h-20
w-28
text-white
font-regular
border-b-4 border-white
rounded-3xl
">
Personal Details
</button>
<button class="
inline-flex
items-end
justify-center
h-20
w-28
text-white
font-regular
border-b-4 border-white
rounded-3xl
mr-10
ml-10
">
Contact Details
</button>
<button class="
inline-flex
items-end
justify-center
h-20
w-28
text-white
font-regular
border-b-4 border-white
rounded-3xl
">
Other Details
</button>
</div>
</div>
</div>
</div>
Update:
After a long discussion with the OP, the OP has noticed that the upper side is not curved (I didn't notice anyway), as below:
Even adding rounded-t-sm won't solve it, since this is not possible to solve because we are adding bottom-border to the button, the only way to solve is to remove the bottom-border and add <hr> and style it to look like line.
Updated code:
<div class="min-h-screen flex items-center justify-center py-4 px-4 sm:px-6 lg:px-6 bg-black">
<div class="max-w-lg w-full space-y-8">
<div class="flex flex-col w-full px-4 py-4 sm:px-6 md:px-8">
<div class="flex flex-row justify-center">
<button class="inline-flex flex-col items-end justify-center h-50 w-50 rounded-sm text-white font-regular">
Personal Details
<hr class="w-full border-white rounded-md border-2 mt-2" />
</button>
<button class="inline-flex flex-col items-end justify-center h-50 w-50 rounded-sm text-white font-regular mr-10 ml-10">
Contact Details
<hr class="w-full border-white rounded-md border-2 mt-2" />
</button>
<button class="inline-flex flex-col items-end justify-center h-50 w-50 rounded-sm text-white font-regular">
Other Details
<hr class="w-full border-white rounded-md border-2 mt-2" />
</button>
</div>
</div>
</div>
</div>
Updated result:
Playground
Old answer
Not sure what is the difficulty that you have in adding border-radius, try adding rounded-sm and it will work.
If you want to add some space between the text and line, try adding some padding on the button, I think that py-2 will fit your needs.
Code:
<div class="min-h-screen flex items-center justify-center py-4 px-4 sm:px-6 lg:px-6 bg-black">
<div class="max-w-lg w-full space-y-8">
<div class="flex flex-col w-full px-4 py-4 sm:px-6 md:px-8">
<div class="flex flex-row justify-center">
<button class="inline-flex items-end justify-center h-50 w-50 py-2 rounded-sm text-white font-regular border-b-4 border-white">
Personal Details
</button>
<button class="inline-flex items-end justify-center h-50 w-50 py-2 rounded-sm text-white font-regular border-b-4 border-white mr-10 ml-10">
Contact Details
</button>
<button class="inline-flex items-end justify-center h-50 w-50 py-2 rounded-sm text-white font-regular border-b-4 border-white">
Other Details
</button>
</div>
</div>
</div>
</div>
Result:
Playground

Tailwind CSS Card Not going under the navbar

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.

Resources