Hero Banner in React, Tailwind CSS, and Glidejs
When we talk about a 'Hero banner' we're usually refering to the landing page of a website - where, at or near the top of the page there may be a large image with some text overlaid. In fact often there will be more than one image, and after a set period of time the image being displayed will change to one of the others. Usually this occurs with some sort of animation (slide-in, fade-in, etc.), again after a fixed period of time, and in a cyclical fashion. Hence, the 'Hero banner', can contain images that relate to the business, individuals, or individual that the website represents with the overlaying text conveying a message that is in someway relevent to it's location, perhaps including buttons that lead the user through to other content. And again this is usually placed at the top of the landing page. In this post I'll walk through how such a 'Hero banner' can be made using React, Tailwindcss, and the JavaScript library Glidejs.