I’m working on a grid layout that displays recent articles. Each article has an image and a short description. I want the image to be taller than the content text block, and still maintain responsiveness across different screen sizes.

I built myself a little weekly forecast app for an exercise and I’m using TailwindCSS. On medium sized screens and larger, I have the layout pretty much how I’d like it (still tweaking). There are two columns, day-time weather data on the left, night-time weather data on the right. Each row is one day. Vertical scrolling should be fine for desktop.

I have the following situation
enter image description here

I’m using Tailwind and setting up a left panel with a right hand sidepanel. The left hand panel is dynamic and can have content added to it that expands it vertically. The right hand sidepanel is longer than the height of a screen, and should be sticky so that it never fully leaves the screen.

I would like to have 3 columns with the same height in tailwind.

How to add CSS animations such that the placeholder text of input field appear as if it is being typed ?
I did this but it is not showing:

I know I can add gradient colors like this:

I have this simple property, I am trying to set to a div

Here’s the view of my component:

I have class=”hover:[&:not(.ng-invalid)]:border-gray-500″, which adds gray color to input border only when .ng-invalid class is not attached to that input while hovering over it.