Tailwind css grid layout - css

I am trying tailwind css for my mini project to achieve below layout with grid.
My expectations
What I have achieved
Below is my code
<div id="main" class="container grid grid-row-3 grid-flow-col gap-1">
<div class="bg-blue-500 row-span-3">
<img class="object-cover w-full h-full" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
</div>
<div class="bg-blue-500 row-span-2">
<img class="object-cover w-full h-full" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
</div>
<div class="bg-blue-300">
<img class="object-cover w-full h-full" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
</div>
</div>


To attain your design guide goals, you can use flex system classes easily as the following code
<div class="flex flex-col p-3">
<div class="flex">
<div class="m-1">
<img class="" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
</div>
<div class="m-1">
<img class="" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
</div>
<div class="m-1">
<img class="" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
</div>
<div class="m-1">
<img class="" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
</div>
</div>
<div class="flex">
<div class="flex grow m-1">
<img class="w-full" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
</div>
<div class="flex flex-col m-1 basis-1/4 ">
<div class="m-1">
<img class="" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
</div>
<div class="m-1">
<img class="" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;">
</div>
</div>
</div>
</div>
Make sure that your small images dimensions to be square for more proper display. Enjoy!


Layout created tailwind css 3 Grid system
<div id="main" class="container grid grid-cols-4 grid-rows-3 gap-2">
<div class="bg-blue-500">
<img class="object-cover w-full h-full" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
</div>
<div class="bg-blue-500">
<img class="object-cover w-full h-full" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
</div>
<div class="bg-blue-500">
<img class="object-cover w-full h-full" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
</div>
<div class="bg-blue-500">
<img class="object-cover w-full h-full" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
</div>
<div class="bg-blue-500 col-span-3 row-span-2">
<img class="object-cover w-full h-full" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
</div>
<div class="bg-blue-500">
<img class="object-cover w-full h-full" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
</div>
<div class="bg-blue-500">
<img class="object-cover w-full h-full" src="https://cdn.shopify.com/s/files/1/0574/6937/0528/files/banner_1.jpg?v=1643371619;" />
</div>
</div>

Related

Center profile photo between top cover and left column

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>

Responsiveness in tailwind

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>

How to auto resize the content inside a div in tailwind?

My code is currently like this :
<div class="container h-auto">
<div class="flex border-8 border-red-900 w-56 h-auto">
<img class="h-autho w-auto" src="https://i.picsum.photos/id/238/200/200.jpg?hmac=O4Jc6lqHVfaKVzLf8bWssNTbWzQoaRUC0TDXod9xDdM" />
<img class="h-autho w-auto" src=" https://i.picsum.photos/id/65/200/200.jpg?hmac=pZrTO_F80X2VYUVpgorpj6xM_WABGhjIXYieK__8B50" />
</div>
</div>
which the images have exceeded the width of the div. I would like the images to auto reduce their size depending on the content inside the div so that they always fit the div. Is it possible?

I made three suggestions for you.
The first two are more specifically exactly for 2 images. Making them the same size with grid-cols-2 respectively w-1/2
The last one works with any number of images, flex-grow applied to all childs of a flex container makes them all the same width.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="container h-auto mb-4">
<div class="grid grid-cols-2 border-8 border-red-900 w-56 h-auto">
<img class="h-auto w-full" src="https://i.picsum.photos/id/238/200/200.jpg?hmac=O4Jc6lqHVfaKVzLf8bWssNTbWzQoaRUC0TDXod9xDdM" />
<img class="h-auto w-full" src=" https://i.picsum.photos/id/65/200/200.jpg?hmac=pZrTO_F80X2VYUVpgorpj6xM_WABGhjIXYieK__8B50" />
</div>
</div>
<div class="container h-auto mb-4">
<div class="flex border-8 border-red-900 w-56 h-auto">
<img class="w-1/2" src="https://i.picsum.photos/id/238/200/200.jpg?hmac=O4Jc6lqHVfaKVzLf8bWssNTbWzQoaRUC0TDXod9xDdM" />
<img class="w-1/2" src=" https://i.picsum.photos/id/65/200/200.jpg?hmac=pZrTO_F80X2VYUVpgorpj6xM_WABGhjIXYieK__8B50" />
</div>
</div>
<div class="container h-auto mb-4">
<div class="flex border-8 border-red-900 w-56 h-auto">
<div class="flex-grow">
<img class="w-full" src="https://i.picsum.photos/id/238/200/200.jpg?hmac=O4Jc6lqHVfaKVzLf8bWssNTbWzQoaRUC0TDXod9xDdM" />
</div>
<div class="flex-grow">
<img class="w-full" src=" https://i.picsum.photos/id/65/200/200.jpg?hmac=pZrTO_F80X2VYUVpgorpj6xM_WABGhjIXYieK__8B50" />
</div>
</div>
</div>

How to make a triangle shape with Tailwind?

<div class="">
<div class="w-16 h-16 border-b-30 border-l-30 border-solid border-black">
<div class="h-16 w-16 border-t-30 border-r-30 bg-transparent"></div>
</div>
</div>
how to make a triangle with tailwindCss without plugin ??

You may try using transform:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="w-16 overflow-hidden inline-block">
<div class=" h-11 w-11 bg-black rotate-45 transform origin-bottom-left"></div>
</div>
<div class="w-16 overflow-hidden inline-block">
<div class=" h-11 w-11 bg-black -rotate-45 transform origin-top-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black -rotate-45 transform origin-top-right"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black rotate-45 transform origin-top-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black -rotate-45 transform origin-bottom-right"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black rotate-45 transform origin-bottom-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black -rotate-45 transform origin-top-left"></div>
</div>
<div class="w-11 overflow-hidden inline-block">
<div class=" h-16 bg-black rotate-45 transform origin-top-right"></div>
</div>

You can also try using borders
tailwind playground
<!-- down -->
<div class="border-solid border-t-black border-t-8 border-x-transparent border-x-8 border-b-0"></div>
<!-- up -->
<div class="border-solid border-b-black border-b-8 border-x-transparent border-x-8 border-t-0"></div>
<!-- left -->
<div class="border-solid border-r-black border-r-8 border-y-transparent border-y-8 border-l-0"></div>
<!-- right -->
<div class="border-solid border-l-black border-l-8 border-y-transparent border-y-8 border-r-0"></div>

Maybe you want to use the triangle for tooltip. (such search got me here):
<div class="group relative mt-4 ml-4 inline-block">
<button type="button" class="rounded-md border border-neutral-600 px-1">...</button>
<!-- container for triangle and the menu ↓-->
<div class="invisible absolute left-0 -mt-[2px] flex flex-col group-focus-within:visible group-active:visible">
<div class="ml-2 -mb-[1px] inline-block overflow-hidden"> <!-- ← triangle container -->
<!-- triangle ↓ -->
<div class="h-3 w-3 origin-bottom-left rotate-45 transform border border-neutral-500 bg-neutral-100"></div>
</div>
<!-- menu ↓ -->
<div class="flex min-w-max flex-col rounded-md border border-neutral-500 bg-neutral-100 px-2 py-1">
<div class="cursor-pointer hover:underline">Do amazing stuff</div>
<div class="cursor-pointer hover:underline">Go back</div>
</div>
</div>
</div>
Demo on play.tailwindcss.com
Based on:
#temani-afif answer
https://github.com/tesar-tech/BlazorAndTailwind/blob/master/Articles/DropdownMenu/README.md

By pseudo-element (small triangle):
<script src="https://cdn.tailwindcss.com"></script>
<div>small triangle:</div>
<div class="flex gap-x-1">
<div class="before:content-['▴']"></div>
<div class="before:content-['▾']"></div>
<div class="before:content-['◂']"></div>
<div class="before:content-['▸']"></div>
</div>
By pseudo-element (normal triangle):
<script src="https://cdn.tailwindcss.com"></script>
<div>normal triangle:</div>
<div class="flex gap-x-1">
<div class="before:content-['▲']"></div>
<div class="before:content-['▼']"></div>
<div class="before:content-['◀']"></div>
<div class="before:content-['▶']"></div>
</div>
By border:
<script src="https://cdn.tailwindcss.com"></script>
<div>triangle by border</div>
<div class="flex gap-x-3">
<div class="w-0 h-0 border-8 border-solid border-transparent border-b-black"></div>
<div class="w-0 h-0 border-8 border-solid border-transparent border-t-black"></div>
<div class="w-0 h-0 border-8 border-solid border-transparent border-r-black"></div>
<div class="w-0 h-0 border-8 border-solid border-transparent border-l-black"></div>
</div>
By border (simplify):
<script src="https://cdn.tailwindcss.com"></script>
<div>triangle by border (simplify)</div>
<style type="text/tailwindcss">
#layer components { .triangle { #apply w-0 h-0 border-8 border-solid border-transparent } }
</style>
<div class="flex gap-x-3">
<div class="triangle border-b-black"></div>
<div class="triangle border-t-black"></div>
<div class="triangle border-r-black"></div>
<div class="triangle border-l-black"></div>
</div>

How can I make this boxes to have the same width?

How can I make these two boxes (I'll have them more) to have same width as the widest one using tailwindcss only classes?
<head>
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet"/>
</head>
<body>
<div class="flex flex-wrap">
<div class="max-w-xs border">
<div class="flex flex-col items-center pt-6 pb-6 px-10">
<p class="font-bold text-xl mb-5">Company1</p>
<img class="h-16 mb-5" src="https://via.placeholder.com/150" />
<p class="mb-2 text-center font-bold">Junior Ruby on Rails Developer</p>
<p class="text-sm">11500 - 17750 (B2B)</p>
</div>
</div>
<div class="max-w-xs border">
<div class="flex flex-col items-center pt-6 pb-6 px-10">
<p class="font-bold text-xl mb-5">Company2</p>
<img class="h-16 mb-5" src="https://via.placeholder.com/150" />
<p class="mb-2 text-center font-bold">Ruby on Rails Developer</p>
<p class="text-sm">11500 - 17750 (B2B)</p>
</div>
</div>
</div>
</body>
<div class="flex flex-wrap">
<div class="max-w-xs border">
<div class="flex flex-col items-center pt-6 pb-6 px-10">
<p class="font-bold text-xl mb-5">Company1</p>
<img class="h-16 mb-5" src="https://via.placeholder.com/150" />
<p class="mb-2 text-center font-bold">Junior Ruby on Rails Developer</p>
<p class="text-sm">11500 - 17750 (B2B)</p>
</div>
</div>
<div class="max-w-xs border">
<div class="flex flex-col items-center pt-6 pb-6 px-10">
<p class="font-bold text-xl mb-5">Company2</p>
<img class="h-16 mb-5" src="https://via.placeholder.com/150" />
<p class="mb-2 text-center font-bold">Ruby on Rails Developer</p>
<p class="text-sm">11500 - 17750 (B2B)</p>
</div>
</div>
</div>

Add class flex-1 to your divs <div class="max-w-xs border">.
// git diff
- <div class="max-w-xs border">
+ <div class="max-w-xs border flex-1">

Resources