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
Related
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
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>
)
}
So I'm new to tailwind and i am creating a simple app/layout which has a Navbar, Image Feed and Sidebar component.
So on the left side component it has a grid of images and I want it to be a scrollable.
My issues is overflow-y-auto doesnt work unless I add a fixed height like h-96 in the Image Feed component
Here is the tailwind code example I'm working on:
code snippet
<div class="flex h-screen w-screen bg-blue-400">
<div class="flex flex-auto flex-col">
<div class="flex items-center space-x-3 p-4 text-white">
<div class="flex">
<button class="text-royal-blue h-12 w-12 rounded-full bg-white text-xl"></button>
</div>
<div class="text-2xl">NAVBAR</div>
</div>
<div class="flex flex-row bg-red-200 flex-auto">
<div class="flex flex-auto overflow-y-auto">
<div class="grid w-full grid-cols-2 gap-2">
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
</div>
</div>
<div class="w-1/4 bg-green-300">SIDEBAR</div>
</div>
</div>
</div>
Okay so try this snippet. You need to set height of the image feed container to h-screen and hide the overflow of the top level division.
<div class="flex h-screen w-screen overflow-y-hidden bg-blue-400">
<div class="flex flex-auto flex-col">
<div class="flex items-center space-x-3 p-4 text-white">
<div class="flex">
<button class="text-royal-blue h-12 w-12 rounded-full bg-white text-xl"></button>
</div>
<div class="text-2xl">NAVBAR</div>
</div>
<div class="flex flex-auto flex-row bg-red-200">
<div class="flex h-screen flex-auto overflow-y-auto">
<div class="grid w-full grid-cols-2 gap-2">
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
<div class="flex h-64 w-full items-center justify-center rounded-3xl bg-gray-800 shadow-lg"></div>
</div>
</div>
<div class="w-1/4 bg-green-300">SIDEBAR</div>
</div>
</div>
</div>
I want to turn my entire screen into the grey when my tailwind css modal open in my angular app but the screen remain white after modal open Please anyone can solve this
this is my html code
<button class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Open modal
</button>
<div *ngIf="showModal" class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
<div class="relative w-auto my-6 mx-auto max-w-3xl">
<!--content-->
<div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
<!--header-->
<div class="flex items-start justify-between p-5 border-b border-solid border-blueGray-200 rounded-t">
<h3 class="text-3xl font-semibold">
Modal Title
</h3>
<button class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none" (click)="toggleModal()">
<span class="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
×
</span>
</button>
</div>
<!--body-->
<div class="relative p-6 flex-auto">
<p class="my-4 text-blueGray-500 text-lg leading-relaxed">
I always felt like I could do anything. That’s the main
thing people are controlled by! Thoughts- their perception
of themselves! They're slowed down by their perception of
themselves. If you're taught you can’t do anything, you
won’t do anything. I was taught I could do everything.
</p>
</div>
<!--footer-->
<div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
<button class="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Close
</button>
<button class="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Save Changes
</button>
</div>
</div>
</div>
</div>
This is my typescript code to open modal
showModal:boolean = false;
toggleModal(){
this.showModal = !this.showModal;
}
Here my modal is opening but the entire screen is not turning into the dark mode Please anyone can solve this Thanks in advance
Probably you need to add the specific style for your modal container as backgrop background, like custom style: style="background-color: rgba(0,0,0,0.5);"
In your code it should be look like: <div *ngIf="showModal" style="background-color: rgba(0,0,0,0.5);" class="overflow-x-hidden...
Also, you can add the specific '.backdrop' class to the root styles.css and use it as class:
.backdrop {
background-color: rgba(0,0,0,0.5);
}
in html:
<div *ngIf="showModal" class="backdrop overflow-x-hidden overflow-y-auto...
tailwind screen example with the dark background here
the component template html looks like that:
<button class="bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" (click)="toggleModal()">
Open modal
</button>
<div *ngIf="showModal" class="backdrop overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
//.......the rest code is the same....
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