A
Anonymous

Outstride U I - Copy this React, Tailwind Component to your project

Top Section: Inquiry Boxes This section consists of three black rectangular cards, each with similar styling but different content. Card 1: "Ask ANY Question" Text at the top: "Ask ANY Question" in bold white text. Text input field: A grey box for user input, presumably for asking a question. Submit button: A dark grey rectangular button at the bottom of the card with the text "SUBMIT" in bold white, centered. Card 2: "Wanna connect to a coach?" Text at the top: "Wanna connect to a coach?" in bold white text. Input field: A grey box, same as in the first card. Submit button: Same design and placement as the first card, with the text "SUBMIT." Card 3: "Are you a coach, wanna connect?" Text at the top: "Are you a coach, wanna connect?" in bold white text. Input field: Another grey box for input. Submit button: Again, the same design as the other two cards, labeled "SUBMIT." The cards are placed side by side, with consistent spacing between them. The overall color scheme for this section is dark, with white text and grey input fields/buttons. Middle Section: Customer Support This section is a broader area with a white background and a mix of text and icons, serving as a customer support center. Header: There is a black horizontal banner with the text Customer Support in bold white, centered in the middle of the banner. Menu bar below the banner: A horizontal list of navigation links, all in uppercase, spread across the section: "HELP CENTER" "TRACK MY ORDER" "RETURNS" "PAYMENTS" These are spaced evenly and feature a clean, modern sans serif font in black. Each link has a subtle underline. Bottom Section: Customer Contact Form This section is divided into two parts: a black left panel with contact information and a white right panel with a form. Left Panel: Contact Information The Outstride logo appears at the top left in white, along with the tagline: "What do you wanna talk about?" in bold white text. Below the logo and tagline: Phone icon with the number "+1012 3456 789" in white. Email icon with "demo@gmail.com" in white. Location icon with the placeholder text "Add" in white. The entire left panel has a solid black background, and all text/icons are white for contrast. Right Panel: Contact Form A large form for submitting an inquiry or question. Fields (in a two column layout): First Name and Last Name fields on the top. Email and Phone Number fields below them. Subject Selector: A series of four selectable options arranged horizontally: General inquiry Fitness Coaching Collaboration Message field: A large text input box labeled "Write your message..." Submit button: A black rectangular button in the bottom right corner with the text "SUBMIT" in white. Footer Section: Support Email At the very bottom of the image is a footer section with large bold black text that reads Support@outstride.com, centered and spanning across the width of the screen. The text is in a sans serif font, making it prominent and easily readable. General Layout and Design: Color scheme: The image uses a stark contrast between black, white, and grey, making it look clean, modern, and professional. Fonts: All text uses a clean sans serif font, with bold text used to emphasize important titles and actions. Spacing: Consistent and sufficient padding between elements ensures readability and a visually appealing layout.

Prompt
Component Preview

About

OutstrideUI - Inquiry boxes, customer support, and contact form with sleek black and white design, professionally built with React and Tailwind. Download free code!

Share

Last updated 1 month ago