I'm trying to create a home page where there are 6 buttons and when a user pass the cursor hover them they shrink and a text expand from the center of each button. I managed to get this: body {…
I'm experiencing unexpected behavior with HTML, CSS, and JS... I'm building an interface where it receives a number in each input, but the "pisca" class, which does the magic of receiving one element per input and passes it to the…
How to create html list with a custom starting point and a order as I would apply sub-list like in the snippet below (but hide number of the outer list nd align test as default in outer list). The result…
Before After (Note:1.Using grid and flex 2. Don't mind the language (Vietnamese) 3. This is my first time asking for help in Stackoverflow 4. If you have some "language" problems in the code , please contact below) I'm having a…
I want to create a background shadow that appear like the green one bellow on attached screen shot.. how can i achieve it with CSS? the screen shot here originate from https://nodejs.org/en `
My goal is to split a div into 2 equal parts. The problem is that when one part require wider width, the other part give in. Note: the VerylongtextVerylongtextVerylongtext is intentionally wrapped with <div> to simulate wrapped by a button.…
I'm new to React, and am trying to center an <Image /> component within a larger <View />, per below: import { Image, View } from 'react-native'; <View style={{ width: 48, height: 48, alignSelf: "center", justifyContent: "center", alignItems: "center", position:…
I have the following HTML structure:: <header style="width: 100%; position: fixed; left: 0; z-index:1;"> <nav style="position: relative;"> <button style="width: 20px; height: 4px;"> Open nav </button> <ul style="width: 100vw; min-height: 100vh; position: absolute; top: 100%; left: 0; z-index: -1;"> <!-- Some…
I'm encountering an issue in my React application where I'm rendering a table with dynamic rows using components. However, the rows are being treated as separate elements instead of components within the table body. Despite generating the rows dynamically using…
I am trying to convert the below code to cva.. {items.map((item, index) => { const isActive = item.key === SOMETHING; return ( <div key={index} className={clsx( `cursor-pointer`, { "text-white": isActive && variant === "inverted", "text-stone-950": isActive && variant === "default", "text-[#9b9b9b]":…