I am new to CSS. In one use case I need to apply a CSS class, only when another is not present. <div class="border-solid p-2 bg-white mt-1 h-fit" [ngClass]="SOME_CONDITION ? 'tile-container' : ''" > <div class = 'chart-container'> <app-angualar-component></app-angualar-component> </div>…
I am trying to create a header for my website and I want to place clickable social media logos that can redirect the user to that link. I am pretty new to frontend so from what I understand I have…
i have written this code and i am not able to keep the data array of two different identiy type into one row as a field and i have used this code import React from 'react' import {Form,Field,ErrorMessage,Formik} from 'formik'…
I am trying to build a React, Tailwind, Vite project on github pages. I have deployed projects before and not ran into any issues but I am getting this issue on build - Rollup failed to resolve import "framer-motion" from…
I am trying to create a rotated shape layout using CSS. However, when I rotate the parent <div> with transform: rotate(45deg), the text and icons inside the div also rotate. To counteract this, I attempted to apply an inverse rotation…
enter image description here Please refer above image, I tried to use flex but I can not get the result that I expected. I'm working on tailwind css. I want to be the result like green cards in the image.…
Hello I just tring send to bottom of its parent: <form class="flex flex-col w-full" (submit)="updatePhoto(title, description)"> <div class="w-full block"> <input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Photo's Title" [value]="photo.title" #title> </div> <div class="my-4 w-full">…
i want to add a onclick event to my navbar button but when i add the eventistener everything disappears. here's my code: import React from "react"; import {Bars3Icon} from '@heroicons/react/24/solid' const Navbar = () => { let btn = document.querySelector('icon');…
i want to add a onclick event to my navbar button but when i add the eventistener everything disappears. here's my code: import React from "react"; import {Bars3Icon} from '@heroicons/react/24/solid' const Navbar = () => { let btn = document.querySelector('icon');…
I have an animated background that I would like to display behind some text without having to resort to javascript. The text may overflow beyond the viewport. I want the background div to always be the same height as the…