I want to align the text under the image here is the screenshot of what I am doing.
Help me out here I want the code to be in tailwind css.
Do you mean like this?
<script src="https://cdn.tailwindcss.com"></script>
<div class=" p-8 bg-gray-100">
<div class="w-96 flex justify-start space-x-3 bg-gray-200 h-48 rounded-md p-8">
<div class="space-y-4 text-center">
<div class="w-16 h-16 bg-teal-700 rounded-full"></div>
<h1 class=" px-2 py-0.5 bg-gray-50 border-2 border-gray-300 ">First Name</h1>
</div>
<div class="space-y-4 text-center">
<div class="w-16 h-16 bg-teal-700 rounded-full"></div>
<h1 class=" px-2 py-0.5 bg-gray-50 border-2 border-gray-300 ">SecondName</h1>
</div>
</div>
</div>
You just need to do this. It works for me.
<div class="flex p-10 ">
<div class="mx-5">
<div class="w-20 h-20 ">
<img src="https://comps.gograph.com/penguin-emotional-head-vector-illustration-of-cute-arctic-bird-in-sunglasses-shows-emotion-cool-emoji-smiley-icon-print-chat-communication-penguin-in-flat-cartoon-style-on-blue-background_gg103004116.jpg" className="rounded-full"/>
</div>
<p class="mt-3 p-1 border-2 border-teal-200 ">Zain UI Adideen</p>
</div>
<div class="mx-5">
<div class="w-20 h-20">
<img src="https://comps.gograph.com/penguin-emotional-head-vector-illustration-of-cute-arctic-bird-in-sunglasses-shows-emotion-cool-emoji-smiley-icon-print-chat-communication-penguin-in-flat-cartoon-style-on-blue-background_gg103004116.jpg" className="rounded-full"/>
</div>
<p class="mt-3 p-1 border-2 border-teal-200 ">Akira Ito</p>
</div>
</div>
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">
I am trying to center the rounded full image between the main cover photo and the left column. For some reason I cannot get it to move from the top left corner and I cannot see what I am doing wrong. I am using Tailwind CSS.
<Head :title="profile.name" />
<div class="relative w-full max-h-screen bg-gray-900 flex justify-start items-center rounded-lg">
<div class="relative flex w-full h-48 bg-gray-700">
<img :src="profile.cover_photo_path" class="cover-bg w-full "/>
<div class="absolute inset-0 bottom-0 left-0">
<img :src="profile.profile_photo_path" class="w-48 h-48 rounded-full border-2 border-red-600"/>
</div>
</div>
</div>
<div class="flex flex-row">
<!-- Left Column -->
<div class="bg-gray-900 w-1/3 h-96 z-0">
</div>
<!-- Right Column -->
<div class="bg-gray-900 w-2/3 h-48 z-0">
<div class="flex flex-row justify-between px-2 items-center h-12 border-b border-red-700">
<div class="text-white text-center font-normal"> Feed </div>
<div class="text-white text-center font-normal"> About </div>
<div class="text-white text-center font-normal"> Photos </div>
<div class="text-white text-center font-normal"> Videos </div>
<div class="text-white text-center font-normal"> Events </div>
<div class="text-white text-center font-normal"> Groups </div>
<div class="text-white text-center font-normal"> Pages </div>
<div class="text-white text-center font-normal"> Followers </div>
<div class="text-white text-center font-normal"> Following </div>
</div>
</div>
</div>
</template>
As far as I understood , you want the circle rounded image in the middle of cover and left sidebar vertically and over them.
So I had created this ,please verify if you want. Else I would rather suggest you to attach a screenshot of what you want .
<script src="https://cdn.tailwindcss.com"></script>
<div class="relative flex max-h-screen w-full items-center justify-start rounded-lg bg-gray-900">
<div class="relative flex h-48 w-full bg-gray-700">
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg" class="cover-bg w-full" />
<div class="absolute inset-0 top-1/2 left-10 z-10">
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/pang/IHXoEES.png" class="h-48 w-48 rounded-full border-2 border-red-600" />
</div>
</div>
</div>
<div class="flex flex-row">
<!-- Left Column -->
<div class="z-0 h-96 w-1/3 bg-gray-900"></div>
<!-- Right Column -->
<div class="z-0 h-48 w-2/3 bg-gray-800">
<div class="flex h-12 flex-row items-center justify-between border-b border-red-700 px-2">
<div class="text-center font-normal text-white">Feed</div>
<div class="text-center font-normal text-white">About</div>
<div class="text-center font-normal text-white">Photos</div>
<div class="text-center font-normal text-white">Videos</div>
<div class="text-center font-normal text-white">Events</div>
<div class="text-center font-normal text-white">Groups</div>
<div class="text-center font-normal text-white">Pages</div>
<div class="text-center font-normal text-white">Followers</div>
<div class="text-center font-normal text-white">Following</div>
</div>
</div>
</div>
Hello I'm trying to make responsive websites through tailwind CSS but when I'm dragging the page to small devices the contents are not aligning with the main walls. This is my code-
<div class="navbar flex justify-between items-center p-4">
<div class="hamburger inline-block cursor-pointer md:hidden">
<div class="line h-0.5 w-6 my-1 bg-black"></div>
<div class="line h-0.5 w-6 my-1 bg-black"></div>
<div class="line h-0.5 w-6 my-1 bg-black"></div>
</div>
<div class="logo text-center flex ">
<div>Restaurant</div>
<div
class="nav-links absolute w-fit md:static md:w-auto inset-0 md:flex md:mx-6 md:space-x-6 -translate-x-96 md:translate-x-0">
<div class="links"><a class="link" href="">Services</a></div>
<div class="links"><a class="link" href="">Support</a></div>
<div class="links"><a class="link" href="">Premium</a></div>
</div>
</div>
<div class="link cart text-center md:order-1">Cart</div>
</div>
<div class="slider flex flex-col-reverse justify-around md:flex-row bg-[#ecf0f1]">
<div class="left flex flex-col justify-center items-center md:items-baseline py-12">
<h1 class="text-2xl font-medium md:text-4xl mx-5 text-center">Food on the go</h1>
<p class="text-center md:text-left md:w-3/4 mx-5 my-2">Explore your favourite food and restaurants and
get them delivered at your doorstep.</p>
<button class="bg-black text-white px-5 py-2 my-2 font-bold mx-5 ">Browse</button>
</div>
<div class="right">
<img class="md:w-[50rem]"
src="https://images.pexels.com/photos/1410236/pexels-photo-1410236.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="">
</div>
</div>
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.
Fiddle: https://play.tailwindcss.com/epT13JJxnk
It looks like this:
I need it to look like this:
How do I achieve it?
Fiddle code:
<div id="app" class=" border border-white
h-screen font-sans tracking-normal mt-10">
<nav data-v-5e628c52="" class="pt-2 md:pt-1
pb-1 px-1 mt-0 h-auto
fixed w-full z-20 top-0">
<div data-v-5e628c52="" class="flex flex-wrap items-center justify-between
m-3 p-2 pl-6 ">
<div data-v-5e628c52="" class="flex flex-wrap items-center justify-start"><a data-v-5e628c52="" href="#" class="header-item title-text light-text text-xl router-link-exact-active router-link-active" aria-current="page">Link1 </a><a data-v-5e628c52="" href="#" class="header-item pl-10">Link2 </a><a data-v-5e628c52="" href="#" class="header-item pl-10 router-link-exact-active router-link-active" aria-current="page">Link3 </a><a data-v-5e628c52="" href="#" class="header-item pl-10 router-link-exact-active router-link-active" aria-current="page">Link4 </a><a data-v-5e628c52="" href="#" class="header-item pl-10">Link5 </a></div>
<div data-v-5e628c52="" class="flex flex-wrap items-center justify-end ">
<!----><!---->
<div data-v-5e628c52="">
<div data-v-24cf0f3c="" data-v-5e628c52="">
<div data-v-24cf0f3c="" class=" ">
<div data-v-24cf0f3c="" class="dropdown inline-block relative">
<button data-v-24cf0f3c=""><img data-v-24cf0f3c="" src="/img/some-image.png" class=" rounded-full border
border-gray-100 shadow-sm w-12
"></button>
<ul data-v-24cf0f3c="" class="right-0 dropdown-menu absolute hidden text-gray-800 pt-1">
<li data-v-24cf0f3c="" class=""><a data-v-24cf0f3c="" href="/user/test" class="rounded-t
py-2 px-4 block whitespace-no-wrap">Profile</a></li>
<li data-v-24cf0f3c=""><a data-v-24cf0f3c="" href="#" class="
py-2 px-4 block whitespace-no-wrap">Logout</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<div id="main-content" class=" border border-red flex justify-center
flex-col items-center space-between min-h-screen w-full
mt-12 md:mt-12 pb-24 md:pb-5 p-5">
<div>
<div data-v-e33ade5c="" class=" ">
<div data-v-87eacdd8="" data-v-e33ade5c="" class="w-full shadow-xl rounded-sm
p-10 pb-5 m-10 pt-5 article flex flex-col
content-between flex-1 flex-grow " name="46">
<div data-v-87eacdd8="" class="flex flex-row justify-between">
<div data-v-87eacdd8="" class="cursor-pointer title-text article-title">last article</div>
<div data-v-87eacdd8="" class="article-date">4/22/2021</div>
</div>
<div data-v-87eacdd8="" class="pt-5 article-text ">last article</div>
<div data-v-87eacdd8="" class="flex flex-wrap mt-5 mb-2 ">
<div data-v-09e62cea="" data-v-87eacdd8="" tag="Hashtag" name="last" class="inline-flex mr-2 ">
<div data-v-09e62cea="" class="tag rounded-full p-2 "> last</div>
</div>
<div data-v-09e62cea="" data-v-87eacdd8="" tag="Hashtag" name="yes" class="inline-flex mr-2 ">
<div data-v-09e62cea="" class="tag rounded-full p-2 "> yes</div>
</div>
</div>
<div data-v-87eacdd8="" class=" font-bold light-text "> Comments: 0 </div>
<!---->
</div>
</div>
</div>
<div id="up-button" class=" sticky text-xl cursor-pointer
mt-auto ml-auto
bottom-5 right-5 rounded-lg p-5 "> UP </div>
</div>
<footer></footer>
</div>
EIDT:
I tried to add an extra wrapper with w-full as the answer suggests, but now the child div (gray) is too huge and goes outside the outer div id="app" (yellow). Also the UP button breaks: it's no longer small, but is very wide:
https://play.tailwindcss.com/8XBRUdNaX2
Change items-center to items-stretch on #main-content.
Remove w-full from the item div[name=46]
See example: https://play.tailwindcss.com/TZQHATbdll
Just need to add class to a div. Also, adjust some paddings and you are good to go.
<div id="main-content">
<div class="w-full">
The wrapper div needs a w-full class, too (as #Digvijay already pointed out). Then, some classes of the name="46" element must be removed, especially w-full, which applies a 100% width that is added to the padding defined on the element, adding up to more than 100%.
See the updated example: https://play.tailwindcss.com/1vDd7ToPLt
Remove items-center class from <div id="main-content">
Remove m-10 from <div class="" name="46">
Link