Skip to content

Added CSS as styles in REACT #228

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added CSS as styles in REACT #228

wants to merge 1 commit into from

Conversation

CarlosZiegler
Copy link

Current PR added a prompt to create code of REACT with CSS styles.

image

ORIGINAL:
image

GENERATED:
image

CODEPEN:
https://codepen.io/carlosziegler/pen/wvOxoLM

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to Zillow</title>
    <script src="https://unpkg.com/react/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
    <style>
        #root {
            font-family: 'Open Sans', sans-serif;
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            font-size: 24px;
            text-align: center;
            margin-bottom: 30px;
        }

        .tab {
            display: flex;
            justify-content: space-around;
            margin-bottom: 30px;
        }

        .tab div {
            font-weight: 600;
            color: #555;
        }

        .tab div.active {
            border-bottom: 2px solid #000;
        }

        input[type="email"], input[type="password"] {
            width: 100%;
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            width: 100%;
            padding: 15px;
            margin-bottom: 20px;
            border: none;
            border-radius: 4px;
            background-color: #007AFF;
            color: white;
            font-size: 16px;
            cursor: pointer;
        }

        .forgot-password {
            text-align: center;
            display: block;
            margin-bottom: 30px;
            color: #007AFF;
            font-size: 14px;
        }

        .divider {
            text-align: center;
            margin-bottom: 20px;
            color: #777;
        }

        .social-login {
            display: flex;
            flex-direction: column;
        }

        .social-login button {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            margin-bottom: 10px;
            background-color: #fff;
            color: #555;
            font-size: 16px;
            border: 1px solid #ccc;
        }

        .social-login button i {
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        const App = () => {
            return (
                <div>
                    <h1>Welcome to Zillow</h1>
                    <div className="tab">
                        <div className="active">Sign in</div>
                        <div>New account</div>
                    </div>
                    <form>
                        <input type="email" placeholder="Email" defaultValue="[email protected]" />
                        <input type="password" placeholder="Password" defaultValue="**********" />
                        <button type="submit">Sign in</button>
                    </form>
                    <a href="#" className="forgot-password">Forgot your password?</a>
                    <div className="divider">Or connect with:</div>
                    <div className="social-login">
                        <button>
                            <i className="fab fa-apple"></i> Continue with Apple
                        </button>
                        <button>
                            <i className="fab fa-facebook-f"></i> Continue with Facebook
                        </button>
                        <button>
                            <i className="fab fa-google"></i> Continue with Google
                        </button>
                    </div>
                </div>
            );
        };

        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>

@CarlosZiegler
🔧 fix(imported_code_prompts.py): add prompt for react_css stack
d824146 
✨ feat(imported_code_prompts.py): add prompt for react_css stack
@CarlosZiegler CarlosZiegler changed the title Added CSS as styles Added CSS as styles in REACT Feb 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@CarlosZiegler