A
Anonymous

Accommodation Options Section - Copy this Html, Tailwind Component to your project

Goal:-Create-a-section-on-the-website-dedicated-to-accommodation-options.-The-section-should-be-visually-appealing-and-functional,-providing-users-with-easy-access-to-information-about-the-rooms.-▎Design-and-Functionality-Requirements:-1.-Section-Structure:-•-The-section-should-contain-2-rows-with-4-columns-in-each-row,-totaling-8-cards.-•-Each-card-should-represent-a-separate-room.-2.-Room-Card:-•-Room-Photo:-•-Initially-displays-the-main-photo-of-the-room.-•-On-hover,-the-photo-should-change-to-a-second-image-(e.g.,-a-view-from-the-window-or-another-perspective-of-the-room).-•-Title:-•-The-card-title-should-include-the-room-name-(e.g.,-"Standard-Room,"-"Suite,"-etc.).-•-Room-Features:-•-Room-area-(in-square-meters).-•-Maximum-number-of-people-that-can-be-accommodated-in-the-room.-•-Price:-•-Display-the-room-price-in-rubles-(e.g.,-"from-5000-rub.").-•-Booking-Button:-•-The-button-should-be-clearly-labeled-and-stand-out-against-the-card-background,-with-the-text-"Book-Now."-•-Clicking-the-button-should-trigger-an-action-(e.g.,-opening-a-modal-for-booking-or-redirecting-to-a-booking-page).-3.-Card-Styling:-•-Use-Tailwind-CSS-styles-to-create-a-modern-and-clean-design.-•-Cards-should-have-padding,-shadows,-and-rounded-corners-for-improved-visual-appeal.-•-The-color-palette-should-match-the-overall-style-of-the-website-and-be-pleasant-to-the-eye.-•-All-text-elements-should-be-readable-and-have-good-contrast-with-the-card-background.-4.-Responsiveness:-•-The-section-should-be-responsive-and-display-correctly-on-various-devices-(mobile-phones,-tablets,-desktops).-•-When-the-screen-width-decreases,-the-cards-should-rearrange-into-one-or-two-columns-to-ensure-comfortable-information-viewing.-5.-Interactivity:-•-On-hover-over-the-card,-there-should-be-a-smooth-transition-for-changing-the-photo-(CSS-transitions-can-be-used).-•-The-booking-button-should-have-a-hover-effect-(e.g.,-background-color-change-or-shadow-effect).-▎Additional-Requirements:-•-Ensure-easy-content-editing-for-the-cards-(e.g.,-through-a-CMS-or-static-file).-•-Include-comments-in-the-code-to-facilitate-further-support-and-development-of-the-section.-▎Expected-Result:-As-a-result-of-this-task,-a-website-section-with-room-cards-should-be-created-that-attracts-users'-attention-and-provides-necessary-information-about-accommodation-options-in-a-convenient-format.

Prompt
Component Preview

About

Accommodation Options Section - Showcases 8 room cards with images, features, and prices, professionally built with HTML and Tailwind. Book now! Download instantly!

Share

Last updated 1 month ago