I'm trying to create two side-by-side containers in Tailwind CSS, that grow independently.
My problem is that they are growing at the same time, i.e. when I click on a Question, both containers increase their size. I want only to grow the one from the selected question.
I've also tried with flexbox, but the result is the same.
Here's the code
<div class="mt-10 mx-20 grid gap-14 md:grid-cols-2">
<!-- First container (left) -->
<div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
<h1 class="text-xl font-bold py-2">Container 1</h1>
<div>
<details class="pt-6 pb-4">
<summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
Question
</summary>
<span class="pt-2 pr-8">Answer</span>
</details>
</div>
</div>
<!-- Second container (right) -->
<div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
<h1 class="text-xl font-bold py-2">Container 2</h1>
<div>
<details class="pt-6 pb-4">
<summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
Question
</summary>
<span class="pt-2 pr-8">Answer</span>
</details>
</div>
</div>
</div>
Here's the fiddle
Obs: you have to have the screen at medium breakpoint or higher to see
Simply add items-start to the grid container:
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="mt-10 mx-20 grid gap-14 md:grid-cols-2 items-start">
<!-- First container (left) -->
<div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
<h1 class="text-xl font-bold py-2">Container 1</h1>
<div>
<details class="pt-6 pb-4">
<summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
Question
</summary>
<span class="pt-2 pr-8">Answer</span>
</details>
</div>
</div>
<!-- Second container (right) -->
<div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
<h1 class="text-xl font-bold py-2">Container 2</h1>
<div>
<details class="pt-6 pb-4">
<summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
Question
</summary>
<span class="pt-2 pr-8">Answer</span>
</details>
</div>
</div>
</div>
</body>
</html>
Related
I have a Vue3 carousel inside a Single file component
package.json
"vue3-carousel": "^0.1.40"
SFC
import { Carousel, Slide, Navigation } from 'vue3-carousel';
import 'vue3-carousel/dist/carousel.css';
import '#/assets/scss/Carousel.scss';
<Carousel :wrap-around="true" class="box-carousel" :autoplay="2000" :transition="500">
<Slide v-for="slide in slides" :key="slide.id">
<div class="mx-auto w-[85%] md:w-[90%] rounded-lg p-5 bg-blue-secondary-5 h-full dark:bg-blue-secondary-5 dark:text-black-dark-100">
<!-- Box Description -->
<div class="grid grid-cols-5 gap-5 mb-5">
<div class="col-span-1">
<div class="rounded-full h-11 w-11 bg-black-20 flex items-center justify-center">
<p class="uppercase font-bold text-sm">{{slide.title}}</p>
</div>
</div>
<div class="col-span-4 text-left">
<div class="ml-3 md:ml-0">
<p class="font-bold">{{slide.name}}</p>
<p class="text-black-40 text-xs">{{slide.date}}</p>
</div>
</div>
</div>
<!-- End Box Description -->
<!-- Box Comment -->
<div class="text-left mb-8">
<p class="text-sm ">
{{slide.comment.substring(0,130)}}
</p>
</div>
<!-- End Box Comment -->
<!-- Box Actions -->
<div class="grid grid-cols-6 gap-5 absolute bottom-5">
<div class="col-span-2">
<a href="javascript:void(0)" class="flex items-center text-xs md:text-sm relative top-1 text-blue-secondary-100">
<UndoIcon width="10" class="fill-blue-secondary-100 mr-2 hidden md:block" />
Responder
</a>
</div>
<div class="col-span-2">
<a href="javascript:void(0)" class="flex items-center text-xs md:text-sm relative top-1 text-black-40 underline">
Ver contexto
</a>
</div>
<div class="col-span-2">
<p class="text-xs md:text-sm flex items-center justify-end md:justify-start relative top-1">
<span class="h-2 w-2 rounded-full bg-green-primary-100 inline-block mr-5 md:mr-1 relative top-[-1px]"></span>
<span class="hidden md:block">aprovado</span>
</p>
</div>
</div>
<!-- End Box Actions -->
</div>
</Slide>
<template #addons>
<Navigation />
</template>
</Carousel>
But the transition behavior of the slides is not as expected. It is just changing withouth the transition/translate position effect
This is how it is:
Expected effect: (by the way, the carousel sometimes spontaneously display the expected behavior like when after some hot module replacement refresh happens after saving some edit in VSCode and there is a refresh in the vue app like this):
Thanks in advance for any advice!! Happy new year !! 🙂
How do you center a button in tailwind in a div?
I have tried:
justify-center
items-center
mx-auto
content-center
in all cases, the button is stuck on the left hand side.
The h2 and p center no problem.
<div class="container py-10 px-10 mx-0 min-w-full" className="contactdiv">
<h2 class="text-5xl text-white text-center">Contact Us</h2>
<br />
<p class="text-center text-white">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
<button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded items-center">Learn More</button>
</div>
I suggest to use flex flex-col items-center on the container to center children across the y axis.
<div class="container py-10 px-10 mx-0 min-w-full flex flex-col items-center">
<h2 class="text-5xl mb-3 text-black">Contact Us</h2>
<p class="text-black">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
<button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded">Learn More</button>
</div>
Here is the result on Tailwind Play
I used css grid on my solution. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-10 px-10 mx-0 min-w-full grid place-items-center" className="contactdiv">
<h2 class="text-5xl text-black text-center">Contact Us</h2>
<br />
<p class="text-center text-black">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
<button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded items-center">Learn More</button>
</div>
</body>
</html>
Correction - Having encountered this problem multiple times - NONE of the solutions posted work.
Adding flex, flex-col and items-center to the parent component does nothing.
The only thing that works is to wrap the button in tags, only then does the button centre.
Wrap the button in a flex container and justify content to the center. Since the button is the only element in its container
<div class="container py-10 px-10 mx-0 min-w-full">
<h2 class="text-5xl text-white text-center">Contact Us</h2>
<br />
<p class="text-center text-white">Kickstart your career in BioPharma with the Mendeleev Institute right now</p>
<div class="flex justify-center">
<button class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded items-center">Learn More</button>
</div>
</div>
Just use flex flex-col items-center justify-center in the parent div.
<div class="authButtons basis-1/4 border-4 flex flex-col items-center justify-center">
<button class="font-fa text-3xl border-2">Hey!</button>
</div>
You can check it out in this tailwind demo.
I need to add 2 children of a parent element one on the top and another on the bottom. something like this.
and this is the code I have.
<div class=" w-full flex justify-betwen bg-white items-center">
<div class="ml-auto">
<img class="object-cover mr-2 md:mr-4 ml-2 md:ml-4 float-left h-40 lg:w-32 w-14 xs:w-16"
src="../img/Bless.png" alt="" />
</div>
<div class="w-full mx-8">
<div class="text-redfull text-ms xs:text-lg md:text-xl lg:text-2xl xl:text-3xl">
Some text here to top as a title.
</div>
<div
class=" text-gray70 flex justify-between items-center text-xs xs:text-base md:text-base lg:text-lg mb-0">
and this is the date to the bottom Uploaded Auguts 4, 2020
</div>
</div>
</div>
Title should stay at the top.
Date to the bottom.
If anyone knows:)
You can add two divs for Title and Date and add vertical margin to them.
I am not sure whether you want with the text or not so I had implemented for both the cases.
Case 1: With text
<script src="https://cdn.tailwindcss.com"></script>
<div class="justify-betwen flex w-full items-center bg-white">
<div class="ml-auto">
<img class="xs:w-16 float-left mr-2 ml-2 h-40 w-14 object-cover md:mr-4 md:ml-4 lg:w-32" src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_blue.s2014.png" alt="" />
</div>
<div class="mx-8 w-full">
<div class="text-3xl font-semibold text-red-900">Your Title here</div>
<div class="my-3">
<div class="text-ms xs:text-lg text-red-500 md:text-xl lg:text-2xl xl:text-3xl">Some text here to top as a title.</div>
<div class="xs:text-base mb-0 flex items-center justify-between text-xs text-gray-500 md:text-base lg:text-lg">and this is the date to the bottom Uploaded Auguts 4, 2020</div>
</div>
<div class="text-base font-extralight">25 June 2022</div>
</div>
</div>
Case 2: Without Text
<script src="https://cdn.tailwindcss.com"></script>
<div class="justify-betwen flex w-full items-center bg-white">
<div class="ml-auto">
<img class="xs:w-16 float-left mr-2 ml-2 h-40 w-14 object-cover md:mr-4 md:ml-4 lg:w-32" src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_blue.s2014.png" alt="" />
</div>
<div class="mx-8 w-full">
<div class="text-3xl font-semibold text-red-900">Your Title here</div>
<div class="my-12">
</div>
<div class="text-lg font-extralight">25 June 2022</div>
</div>
</div>
I had use an online image, so you can replace it with your image.
If You want more gap, then simply increase the my-12 to more.
I have section areas that I want to have equal elements. One side is just an image while the other side has content. I'm using Tailwind CSS and feel positive I have the correct classes. The section Divs are declared as Flex while the child elements each have a Flex-basis of 0 and a Flex grow of 1. The content div continues to be a little larger than my image div.
<section class="section-one flex flex-col-reverse md:flex-row-reverse">
<div class="basis-0 grow p-6 text-center md:text-left md:flex md:flex-col md:justify-center md:items-center">
<div>
<h2 class="font-fraunces text-4xl mb-4 md:text-left md:max-w-md">Stand our to the right audience</h2>
<p class="font-barlow text-gray-500 text-lg p-4 mb-6 md:max-w-md md:p-0">Using a collaborative formula of designers, researchers, photographers, videographers and copywriters, we'll build and extend your brand in digital places.</p>
<div class="flex flex-col">
Learn More
<span class="bg-rose-300/75 w-32 mx-auto h-4 rounded-full md:m-0"></span>
</div>
</div>
</div>
<div class="basis-0 grow">
<img src="images/desktop/image-stand-out.jpg" alt="" class="w-full" />
</div>
</section>
If you remove your p-6 class and add in the div below it will work.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<section class="section-one flex flex-col-reverse md:flex-row-reverse">
<div class="basis-0 grow remove-this-p-6 text-center md:text-left md:flex md:flex-col md:justify-center md:items-center">
<div class="p-6"> <!-- add here your padding -->
<h2 class="font-fraunces text-4xl mb-4 md:text-left md:max-w-md">Stand our to the right audience</h2>
<p class="font-barlow text-gray-500 text-lg p-4 mb-6 md:max-w-md md:p-0">Using a collaborative formula of designers, researchers, photographers, videographers and copywriters, we'll build and extend your brand in digital places.</p>
<div class="flex flex-col">
Learn More
<span class="bg-rose-300/75 w-32 mx-auto h-4 rounded-full md:m-0"></span>
</div>
</div>
</div>
<div class="basis-0 grow">
<img src="https://via.placeholder.com/500" alt="" class="w-full" />
</div>
</section>
<section class="section-one flex flex-col-reverse md:flex-row-reverse ">
<div class="basis-0 grow">
<img src="https://via.placeholder.com/500" alt="" class="w-full" />
</div>
<div class="basis-0 grow remove-this-p-6 text-center md:text-left md:flex md:flex-col md:justify-center md:items-center">
<div class="p-6"><!-- add here your pading -->
<h2 class="font-fraunces text-4xl mb-4 md:text-left md:max-w-md">Stand our to the right audience</h2>
<p class="font-barlow text-gray-500 text-lg p-4 mb-6 md:max-w-md md:p-0">Using a collaborative formula of designers, researchers, photographers, videographers and copywriters, we'll build and extend your brand in digital places.</p>
<div class="flex flex-col">
Learn More
<span class="bg-rose-300/75 w-32 mx-auto h-4 rounded-full md:m-0"></span>
</div>
</div>
</div>
</section>
By using grid you can achieve this
Here is the best explanation how to use grid system in tailwindcss
I have made code for you please check here: https://play.tailwindcss.com/wldkQ1txrU
So this is the code I am working with:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />
<div class=" h-48 p-3 bg-gray-700">
<div class="h-full w-48 bg-gray-700 border border-gray-300">
<div class="h-6 bg-gray-400 opacity-50 w-full">
Username
</div>
<img class="w-full object-contain" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
</div>
</div>
I am having issues getting the image to constrain to the parent div. What I want to accomplish is to have the user image constrain inside the parent div and not overflow outside the border. The image attached is what it looks like now. I have no idea what I am doing wrong or missing.
make it a flexbox container
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class=" h-48 p-3 bg-gray-700">
<div class="h-full w-48 bg-gray-700 border border-gray-300 flex flex-col">
<div class="h-6 bg-gray-400 opacity-50 w-full">
Username
</div>
<img class="w-full object-contain min-h-0" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
</div>
</div>
OR CSS grid:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class=" h-48 p-3 bg-gray-700">
<div class="h-full w-48 bg-gray-700 border border-gray-300 grid">
<div class="h-6 bg-gray-400 opacity-50 w-full">
Username
</div>
<img class="w-full object-contain min-h-0 h-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
</div>
</div>
Use flex flex-col on parent container and add min-h-0 to image.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />
<div class=" h-48 p-3 bg-gray-700">
<div class="h-full w-48 bg-gray-700 border border-gray-300 flex flex-col">
<div class="h-6 bg-gray-400 opacity-50 w-full">
Username
</div>
<img class="w-full object-contain min-h-0" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330" />
</div>
</div>