Just a quick question for CSS tailwind
I want the letters in the boxes to be centered within the box, can someone show me what to change to make this ?
At the moment the text in the box are left aligned but the problem is that
className={` md:px-[30px] ease-in duration-100 bg-gray-900 transition-colors ${
fixed
? "fixed w-full h-20 shadow-md z-[100] bg-gray-900 shadow-gray-900 border-b-2 border-[black]"
: " w-full h-20 z-[100] "
} `}
>
<div className="flex text-white justify-between items-center w-full h-full pl-[10px] px-2 2xl:px-16 ">
<div className="relative w-[65px] h-[65px] ">
<Image
fill
src="/projects/logo.jpeg"
className="absolute object-fill rounded-full "
/>
</div>
<div>
<ul
className={` ${
fixed ? "hidden md:flex text-white" : " hidden md:flex"
} md:hidden lg:flex`}
>
<Link href="/#intro" prefetch={false}>
<li className="ml-10 text-small uppercase hover-border-b">
Home
</li>
</Link>
If possible can you also tell me how to unhide the box layout (the lines that form the box) please
There are two ways to do this. The first example you can use text-align: center and padding-top properties. If you calc() 1/2 the height of your element minus 1em, that will center the text top and bottom.
text-align: center;
padding-top: calc(50px - 1em);
However, this will not ensure the text is centered vertically if the size of your element changes in the future. A simpler and more robust method is to set your element to display: flex with justify-content and align-items set to center.
#yourDiv {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid blue;
}
<div id="yourDiv">Your text</div>
As for the rounded border, that appears to be a CSS class - you may want to search through your code for any border properties that are set on the element or pseudo-elements.
Related
Trying to implement a mobile menu display and hide on screen resize using a react component an external style file and tailwind to close a mobile nave when a button is clicked
In the process of trying to implement a react and tailwind version of the nav menu in the below github link which was done using tailwind and CSS
https://github.com/bradtraversy/tailwind-course-projects/blob/main/website-projects/shortly/js/script.js
The webpage looks something like the below URL
https://tailwindfromscratch.com/website-projects/shortly/index.html
Basically by trying to implement a react version of the function "navToggle"
Please advise me on how I can toggle the class state by using the Boolean state value. If true, to add the class name to the className property in the component file or changes to make in the class file or both
Thanks
Here's my code below
Main component
import React, {useState} from 'react';
import mainLogo from '../../../public/assets/images/logo.png';
import {NavLink} from "#remix-run/react";
const Header = () => {
const [menuIsOpen, setMenuIsOpen] = useState("false");
// Toggle Mobile Menu
const navToggle= () => {
setMenuIsOpen(!menuIsOpen);
};
return (
<>
{/*Nav Container*/}
<nav className="relative container mx-auto p-6">
{/*Flex Container For All Items*/}
<div className="flex items-center justify-between">
{/*Flex Container For Logo/Menu*/}
<div className="flex items-center space-x-20">
{/*Logo*/}
<NavLink className='d-lg-none' to='/'>
<img src={mainLogo} alt='Logo' />
</NavLink>
{/*Left Menu*/}
<div className="hidden space-x-8 font-bold lg:flex">
<NavLink to='/' className="text-grayishViolet hover:text-veryDarkViolet">
Home
</NavLink>
<NavLink to='/about' className="text-grayishViolet hover:text-veryDarkViolet">
About
</NavLink>
<NavLink to='/services' className="text-grayishViolet hover:text-veryDarkViolet">
Products & Businesses
</NavLink>
<NavLink to='/contacts' className="text-grayishViolet hover:text-veryDarkViolet">
Contact us
</NavLink>
</div>
</div>
{/*Right Buttons Menu*/}
<div
className="hidden items-center space-x-6 font-bold text-grayishViolet lg:flex"
>
<div className='header-mail d-xl-block d-none'>
Email: xxx#xxxxxxxxxxxxx.xxx
</div>
</div>
{/*Hamburger Button*/}
<button
onClick={navToggle}
name="menu-btn"
id="menu-btn"
className="block hamburger lg:hidden focus:outline-none"
type="button"
>
<span className="hamburger-top"></span>
<span className="hamburger-middle"></span>
<span className="hamburger-bottom"></span>
</button>
</div>
{/*Mobile Menu*/}
<div
id="menu"
className="absolute hidden p-6 rounded-lg bg-darkViolet left-6 right-6 top-20 z-100"
>
<div
className="flex flex-col items-center justify-center w-full space-y-6 font-bold text-white rounded-sm"
>
<NavLink to='/' className="w-full text-center">Home</NavLink>
<NavLink to='/about' className="w-full text-center">About</NavLink>
<NavLink to='/services' className="w-full text-center">Services</NavLink>
<NavLink to='/contacts' className="w-full text-center">Contact us</NavLink>
</div>
</div>
</nav>
</>
);
};
export default Header;
Style file
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
.hamburger {
cursor: pointer;
width: 24px;
height: 24px;
transition: all 0.25s;
position: relative;
}
.hamburger-top,
.hamburger-middle,
.hamburger-bottom {
content: '';
position: absolute;
width: 24px;
height: 3px;
top: 0;
left: 0;
background: #9c9aa6;
transform: rotate(0);
transition: all 0.5s;
}
.hamburger-middle {
transform: translateY(7px);
}
.hamburger-bottom {
transform: translateY(14px);
}
.open {
transform: rotate(90deg);
transform: translateY(0px);
}
.open .hamburger-top {
transform: rotate(45deg) translateY(6px) translateX(6px);
}
.open .hamburger-middle {
display: none;
}
.open .hamburger-bottom {
transform: rotate(-45deg) translateY(6px) translateX(-6px);
}
remove the hidden class from the menu div and use the menuIsOpen as a condition to display the menu
{/*Mobile Menu*/}
{ menuIsOpen && (
<div
id="menu"
className="absolute p-6 rounded-lg bg-darkViolet left-6 right-6 top-20 z-100"
>
<div
className="flex flex-col items-center justify-center w-full space-y-6 font-bold text-white rounded-sm"
>
<NavLink to='/' className="w-full text-center">Home</NavLink>
<NavLink to='/about' className="w-full text-center">About</NavLink>
<NavLink to='/services' className="w-full text-center">Services</NavLink>
<NavLink to='/contacts' className="w-full text-center">Contact us</NavLink>
</div>
</div>
)
}
I have made a dropdown menu and want to make it an ease down transition. Can somebody help?
The dropdown property marks the total dropdown div.
The dropdown-content property marks the hidden content
Here's my css properties:
.dropdown {
position: relative;
display: inline-block;
transition: all 0.5s ease;
}
.dropdown-content {
display: none;
position: relative;
min-width: 160px;
z-index: 1;
clear:both;
width:100%;
overflow: hidden;
text-align: center;
transition: height .4s ease;
}
.dropdown:hover .dropdown-content {display: block; transition-property: dropdown-content; transition-duration:0.4s;}
Here's my associated javascript code:
<div className="flex-1 w-full xs:max-w-none sm:w-full sm:min-w-155 dark:bg-nft-black-3 bg-white rounded-2xl p-4 m-4 sm:my-2 sm:mx-2 cursor-pointer shadow-md dropdown dropbtn">
...
</div>
<div className='flex flex-row w-full justify-center items-center dropdown-content'>
<div className='flex w-2/3 pt-2 pb-4 pr-2 text-sm'>
{proposal.description}
</div>
{proposal.deadline.getTime() > Date.now() && !proposal.executed ? (
<div className='flex w-full'>
<div className='flex flex-row'>
<PostCardButton
btnName={`Vote Yes`}
classStyles={"rounded-xl sm-text-sm"}
handleClick={() => voteOnProposal(proposalId, "YAY")}
/>
</div>
<div className='px-5'>
<PostCardButton
btnName={"Vote No"}
classStyles={"rounded-xl px-7 sm:text-sm"}
handleClick={() => voteOnProposal(proposalId, "NAY")}
/>
</div>
</div>
) : proposal.deadline.getTime() < Date.now() && !proposal.executed ? (
<div className='flex flex-row w-full'>
<PostCardButton
btnName={`Execute Proposal`}
classStyles={"rounded-xl"}
handleClick={() => executeProposal(proposalId)}
/>
</div>
) : (
<div className='flex w-full font-semibold text-lg'>
Executed
</div>
)}
</div>
</div>
If you're achieving the animation by transitioning height property, then the problem is: you are not changing it in the css classes.
.dropdown-content {
height: 0px;
overflow: hidden;
transition: height 0.4s ease;
}
.dropdown:hover .dropdown-content {
height: 360px;
}
Also, dropdown-content is not an animatable CSS property. So, transition-property: dropdown-content; cannot be used here.
If the height of your content is not constant, then you should use javascript to find it and then change it.
Using height: max-content; will not work.
The easiest way to do this would be to calculate the complete height of dropdown content in both cases [proposal.deadline.getTime() > Date.now() and vice versa] and add them in the css.
I have a carousel which has next and previous buttons as well as clickable indicator "blobs" to show which image is currently visible. It's built using only CSS and radio inputs with labels. (see https://tailwind-elements.com/docs/standard/components/carousel/ for my starting point).
document.querySelectorAll('.carousel').forEach((carousel) => {
animate_carousel(carousel);
carousel.querySelectorAll("input[type='radio']").forEach((input) => {
input.addEventListener('change', function() {
animate_carousel(carousel);
});
});
});
function animate_carousel(carousel) {
setTimeout(function() {
let radio = carousel.querySelector('input[type="radio"]:checked');
let next = carousel.querySelector('label.control-' + parseInt(radio.dataset.index, 10) + '.next');
carousel.querySelector('input#' + next.getAttribute('for')).click();
animate_carousel(carousel);
}, 5000, carousel);
}
.carousel-open:checked+.carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
-webkit-transition: opacity 0.6s ease;
transition: opacity 0.6s ease;
}
[id^="carousel-"][id$="-0"]:checked~.control-0,
[id^="carousel-"][id$="-1"]:checked~.control-1,
[id^="carousel-"][id$="-2"]:checked~.control-2 {
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 4px;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
.carousel-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
[id^="carousel-"][id$="-0"]:checked~.control-0~.carousel-indicators li:nth-child(1) .carousel-bullet,
[id^="carousel-"][id$="-1"]:checked~.control-1~.carousel-indicators li:nth-child(2) .carousel-bullet,
[id^="carousel-"][id$="-2"]:checked~.control-2~.carousel-indicators li:nth-child(3) .carousel-bullet {
color: #2b6cb0;
/*Set to match the Tailwind colour you want the active one to be */
}
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="carousel relative rounded-lg relative overflow-hidden shadow-xl border-4 bg-white border-white my-4">
<div class="carousel-inner relative overflow-hidden rounded-b-md rounded-t-sm w-full">
<input class="carousel-open" data-index="0" type="radio" id="carousel-1-0" name="carousel-1" aria-hidden="true" hidden="">
<div class="carousel-item absolute opacity-0 bg-center bg-no-repeat h-0 bg-cover" style="padding-bottom: 33.33%; background-image: url(https://mdbootstrap.com/img/new/slides/054.jpg);"></div>
<label for="carousel-1-1" class="control-0 w-8 h-8 ml-2 sm:ml-3 md:ml-4 lg:ml-5 md:ml-10 absolute cursor-pointer hidden font-bold rounded-full leading-tight text-center z-10 inset-y-0 left-0 my-auto flex justify-center content-center">
<
</label>
<label for="carousel-1-1" class="next control-0 w-8 h-8 mr-2 sm:mr-3 md:mr-4 lg:mr-5 absolute cursor-pointer hidden rounded-full leading-tight text-center z-10 inset-y-0 right-0 my-auto">
>
</label>
<input class="carousel-open" data-index="1" type="radio" id="carousel-1-1" name="carousel-1" aria-hidden="true" hidden="" checked="checked">
<div class="carousel-item absolute opacity-0 bg-center bg-no-repeat h-0 bg-cover" style="padding-bottom: 33.33%; background-image: url(https://mdbootstrap.com/img/new/slides/043.jpg);"></div>
<label for="carousel-1-0" class="control-1 w-8 h-8 ml-2 sm:ml-3 md:ml-4 lg:ml-5 md:ml-10 absolute cursor-pointer hidden font-bold rounded-full leading-tight text-center z-10 inset-y-0 left-0 my-auto flex justify-center content-center">
<
</label>
<label for="carousel-1-0" class="next control-1 w-8 h-8 mr-2 sm:mr-3 md:mr-4 lg:mr-5 absolute cursor-pointer hidden rounded-full leading-tight text-center z-10 inset-y-0 right-0 my-auto">
>
</label>
<ol class="carousel-indicators">
<li class="inline-block">
<label for="carousel-1-0" class="carousel-bullet cursor-pointer text-xs block text-white hover:text-blue-700 opacity-75">
•
</label>
</li>
<li class="inline-block">
<label for="carousel-1-1" class="carousel-bullet cursor-pointer text-xs block text-white hover:text-blue-700 opacity-75">
•
</label>
</li>
</ol>
</div>
</div>
I'm trying to make this automatically scroll through the images every 5 seconds. This works unless I click the buttons to manually navigate through the images. Then it returns the following error.
Uncaught DOMException: Failed to execute 'removeNamedItem' on
'NamedNodeMap': No item with name 'checked' was found.
I'm not sure why I'm getting this error though as there does appear to be a checked input.
This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
Closed 1 year ago.
I have two divs on left and right. Second div contains lots of dynamic data, so height cannot be fixed. Then, how to make first div's height same as second div?
<div style="width: 100%;">
<div class="first">
Left Div
</div>
<div class="second">
<h5> hello </h5>
<h5> hello </h5>
<h5> hello </h5>
</div>
</div>
.first{
width: 50%;
float: left;
background: yellow;
}
.second{
margin-left: 50%;
background: grey;
}
CSS Flexible Box Layout
.d-flex {
display: flex;
}
.first, .second {
flex: 1 1 auto;
}
.first {
background-color: yellow;
}
.second {
background-color: grey;
}
<div class="d-flex">
<div class="first">
Left Div
</div>
<div class="second">
<h5> hello </h5>
<h5> hello </h5>
<h5> hello </h5>
</div>
</div>
You just need to apply flex property to your divs
.first {
flex: 1;
background: yellow;
}
.second {
flex: 1;
background: grey;
}
<div style="width: 100%;display:flex;">
<div class="first">Left Div </div>
<div class="second">
<h5> hello </h5>
<h5> hello </h5>
<h5> hello </h5>
</div>
</div>
The hard way is by using JavaScript. Try something like:
document.querySelector('.first').style.height = document.querySelector('.second').clientHeight + 'px';
The problem with this code is that you need to apply it every time the screen resized.
Second solution is by using "flex" instead of "float"
.first {
width: 50%;
background: yellow;
}
.second {
width: 50%;
background: grey;
}
.parent {
display: flex;
}
<div class="parent" style="width: 100%;">
<div class="first">
Left Div
</div>
<div class="second">
<h5> hello </h5>
<h5> hello </h5>
<h5> hello </h5>
</div>
</div>
Or using "flex" instead of width.
I created a website using CSS and Bootstrap. I structured it to be pretty simple and I created some custom container layouts.
To create this I website I used z-index in different places, for the background and for the container. In order to create a hierarchy.
However the rendering of the container doesn't seem to follow the assigned z-index. When I scroll to the bottom of the page and stay there for a while (move mouse randomly etc.) and I scroll back up, the main container of the page disappears.
This is the container css:
.show-portfolio .container {
z-index: 5;
background-color: var(--blog-container-color);
margin: 0 auto;
margin-bottom: 0rem;
padding: 2rem 1rem;
position: relative;
/* border-radius: 20px; */
box-shadow: 0 0 1px rgba(var(--blog-shadow-color), 0.175),
0 0 40px rgba(var(--blog-shadow-color), 0.55),
inset 0 0 6px rgba(var(--blog-shadow-color), 0.9);
border: 5px solid var(--secondary-color);
border-top: 30px solid var(--background-color);
}
And this is the background:
.bg-img-repeat {
background-image: url("/img/background_pattern.jpg");
background-repeat: repeat;
background-size: 35px;
z-index: 0;
position:fixed;
width: 100%;
height: 100%;
}
And this is the container html:
<div class="showcase-image-top mt-5 pt-1">
<div class="title-text text-uppercase"> what is <br> kneehat games </div>
</div>
<section class="show-portfolio justify-content-center align-items-center">
<div class="container">
<div class="para">
Hi, <span class="strong"> my name is Nihat</span>, I'm a Computer Scientist and I develop games for fun.
I use <span class="strong"> Kneehat Games </span> as a platform to publish games for iOS and Android and eventually also other stores.
Thanks for visiting my page and I hope you like the games.
<section>
<div class="row justify-content-center align-items-center mt-3">
<div class="col-12 col-sm-10">
<div class="thanks-email-card thanks-email-font text-center mb-4 align-items-center d-flex justify-content-center">
<i class="fas fa-envelope"></i> kneehatgames#gmail.com
</div>
</div>
</div>
</section>
<div class="footnote"> <i class="fas fa-question-circle"></i> Why Kneehat? I came up with this name because it pronounces almost like my name and it is a combination
of two english words: knee and hat.</div>
</div>
</div>
</section>
As we can see in the image below, the container is actually still placed in the same spot but not rendered anymore. This makes me wonder why the container disappears even if the index is still the same.
The container comes back up if I resize the window or deselect any property in the css class.
The website is: kneehatgames
Here is an image showing the problem