A
Anonymous

Create a Responsive Webpage with Tailwind and React

Create a responsive webpage. Their will a simple but responsive navbar at the top. In the navbar their will at left side logo img. Its width will 9vh. The navbar color will light gray and navbar height will 8vh. The logo and the items will in align item center. the all items will in center of the navbar. After logo in center their list items will 'Home, About, Products, Articles'. In small device like mobile the navbar will collapse in hamburger manu which click the items will show with animation and it contain no glass effect in mobile it contain solid color. The list items will contain a rounded border with no background and when we hover on them the hole rounded border with text will fill up In the logo their will animation effect at hover. In items their will a special hover effect that when we hover on them the items fill up with a new color. They will not contain a background color fill up they will contain text color fillup. The list items will bold and when hover the color will come from end to top in hover and at dishover it will go from top to end with animation. Both hover and dishover contain animation. In the end their will Youtube and Facebook Icon. After the navbar their will a banner contain a background image. The background image width will 80vh. When we scroll down minimum text will come on the background image which will in center and use unique font family. The background image brightness will only 40% and the text brightenss will 100%. The text will 'Inspire With Our Content' After that heading their will a About Us and Buy Product button. Both contain different animation and one contain background color and other contain border but transparent background. After the banner their will a beautiful section of our video in which their will cards contain borders and glowing animations very bold hover glowing animations. In line their will two cards and total their will 6 cards. Each card contain a image at top and A bold heading after the image and descrption and watch now button with hover animation and icon. After the cards their will a video with video player. It will 92% width of the page and when click on video player the video open in pop up and other thing in background will blur. The video will automatically start after clicking. Then the video section their will footer which contain quick links of Home About Products and @talhamalikofficial. The navbar will sticky at top and contain glass effect in scroll. The hole page will responsive.

Prompt
Component Preview

About

Build a fully responsive, animated webpage featuring a sticky tailwind navbar, engaging banner, interactive video section, and footer with quick links, all optimized for mobile and desktop.

Share

Last updated 1 month ago