A
Anonymous

Steps - Copy this React, Tailwind Component to your project

"Create a React component for a multi step form interface for PureCode AI. The layout should consist of two main sections: 1. Left sidebar: Contains a list of form steps Steps include: 'Welcome screen', 'Enter your Email', 'Enter your phone Number', and 'End screen' Each step is represented by a text label An 'Add field' button is present at the bottom of the list 2. Main content area: Displays the current form step (in this case, the welcome screen) Welcome screen contains: Large title text: 'Welcome to our form' Smaller description text below: 'This is a description of the form' A black 'Start' button Text next to the button saying 'press Enter' Additional UI elements: Top navigation bar with 'Dashboard > test' breadcrumb Tab navigation below with options: 'Content', 'Design', 'Share', 'Replies' 'Save & Publish' and 'Delete' buttons at the bottom left Use Tailwind CSS for styling, focusing on: Clean, minimalist design Proper spacing and alignment Contrasting colors for important elements (e.g., black button on white background) Responsive layout that adapts to different screen sizes Ensure the component is modular and can easily switch between different form steps." This description provides a comprehensive overview of the UI elements and structure, which should allow another AI to recreate the interface using React and Tailwind CSS.

Prompt
Component Preview

About

steps - Create a multi-step form with a sidebar for navigation, main content area, and buttons. Built with React and Tailwind. Copy component code!

Share

Last updated 1 month ago