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.
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>
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>
I'm trying to vertically center the div with a white border onto the div with a green background. Colors just for show. I cannot figure out why justify-center and items-center do not work. I know I can use margin to achieve what I want but I know there's a better way. I have tried referencing this SO post but have had no luck:Reference Post
Also, if there is a better solution to implement what I want I'm all ears.
My code:
<div class="flex flex-col min-h-screen bg-coolGray-900">
<div class="w-screen justify-center items-center h-screen bg-green-500 ">
<div class="text-center text-white border-2 ">
<h1 class="mb-10 text-6xl font-bold font-lato">Message Here</h1>
<h2 class="mb-8 text-2xl font-semibold font-lato">More Detailed Message Here</h2>
<button class="mx-auto btn btn-learn">Learn More</button>
</div>
</div>
</div>
You haven't displayed your container class as flex, this is why your justifies aren't working.
Add the class flex to your bg-green-500 class.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<section>
<div class="flex flex-col min-h-screen bg-coolGray-900">
<div class="flex w-screen justify-center items-center h-screen bg-green-500 ">
<div class="text-center text-white border-2 w-screen">
<h1 class="mb-10 text-6xl font-bold font-lato">Message Here</h1>
<h2 class="mb-8 text-2xl font-semibold font-lato">More Detailed Message Here</h2>
<button class="mx-auto btn btn-learn">Learn More</button>
</div>
</div>
</div>
</section>
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